/**
 * Kompakte Mobile-Portal-UI — aktiv bei body[data-ui-design="mobile"].sf-ui-mobile-active
 * Eltern- / Spieler- / Kind-Portal.
 *
 * Grundsätze:
 *  - Nichts „schwebt“ über dem Inhalt außer der Bottom-Nav (Inhalt hat passendes Padding).
 *  - Kopfzeile (Topbar) fließt mit dem Inhalt und scrollt weg.
 *  - Profilwechsel (nativ) ist kein schwebender Button mehr, sondern Kachel/Kopfzeile.
 */
body[data-ui-design="mobile"].sf-ui-mobile-active {
  --sf-m-ink: #0f1f1a;
  --sf-m-forest: #143d32;
  --sf-m-green: #1f8f5f;
  --sf-m-mint: #e8f6ef;
  --sf-m-sand: #eef3f0;
  --sf-m-line: rgba(20, 61, 50, 0.1);
  --sf-m-nav-h: 60px;
  --radius: 16px;
  background: var(--sf-m-sand) !important;
  background-image: none !important;
  color: var(--sf-m-ink);
}

/* Portal-Hintergründe (Plakat/Verlauf) abschalten */
body[data-ui-design="mobile"].sf-ui-mobile-active::before,
body[data-ui-design="mobile"].sf-ui-mobile-active::after {
  display: none !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .app-shell {
  background: transparent !important;
  min-height: 100dvh;
  display: block;
}

/* Desktop-Chrome weg */
/* Hamburger-Menü + Seitenleiste bleiben (dort liegt u. a. der Ansichts-Umschalter) */
body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-context-pill,
body[data-ui-design="mobile"].sf-ui-mobile-active .topbar .page-title,
body[data-ui-design="mobile"].sf-ui-mobile-active .content::before,
body[data-ui-design="mobile"].sf-ui-mobile-active .sf-native-club-switch {
  display: none !important;
}

/* Kopfzeile: im Fluss, kompakt, scrollt weg */
body[data-ui-design="mobile"].sf-ui-mobile-active .topbar {
  position: static !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 0 !important;
  margin: 0 auto;
  max-width: 560px;
  padding: calc(env(safe-area-inset-top, 0px) + 0.45rem) 0.85rem 0.15rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-left {
  flex: 1 1 auto;
  flex-wrap: nowrap !important;
  min-width: 0;
  gap: 0.5rem !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-brand-logo {
  width: 30px !important;
  height: 30px !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-actions .icon-button,
body[data-ui-design="mobile"].sf-ui-mobile-active .sf-lang-globe-btn {
  width: 2.1rem !important;
  height: 2.1rem !important;
  min-width: 2.1rem !important;
  background: #fff;
  border: 1px solid var(--sf-m-line);
  box-shadow: none;
}

.sf-m-head-title {
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--sf-m-ink, #0f1f1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-m-head-profile {
  appearance: none;
  border: 1px solid rgba(20, 61, 50, 0.12);
  background: #fff;
  color: var(--sf-m-forest, #143d32);
  border-radius: 999px;
  height: 2.1rem;
  width: 2.1rem;
  min-width: 2.1rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* Inhalt */
body[data-ui-design="mobile"].sf-ui-mobile-active .content {
  max-width: 560px !important;
  margin: 0 auto !important;
  width: 100%;
  padding: 0.35rem 0.85rem calc(var(--sf-m-nav-h) + env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active.sf-no-m-nav .content {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .content .page > .card,
body[data-ui-design="mobile"].sf-ui-mobile-active .content > .card,
body[data-ui-design="mobile"].sf-ui-mobile-active .content section.card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .content section.card > .card-header {
  display: none !important;
}

/* Hilfe-Panel unter die Topbar */
body[data-ui-design="mobile"].sf-ui-mobile-active .help-panel {
  top: calc(env(safe-area-inset-top, 0px) + 3.2rem) !important;
}

/* —— Bottom nav —— */
.sf-m-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: calc(var(--sf-m-nav-h, 60px) + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid rgba(20, 61, 50, 0.1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 20px rgba(15, 31, 26, 0.06);
}

.sf-m-nav__btn {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(15, 31, 26, 0.5);
  cursor: pointer;
  text-decoration: none;
  padding: 0.3rem 0.2rem;
}

.sf-m-nav__btn.is-active {
  color: #1f8f5f;
}

.sf-m-nav__ico {
  font-size: 1.15rem;
  line-height: 1;
}

/* —— Home —— */
.sf-m-home {
  display: none;
  flex-direction: column;
  gap: 0.8rem;
}

body.sf-ui-mobile-active[data-sf-m-view="home"] .sf-m-home {
  display: flex;
}

/* View-Steuerung im Kind-/Eltern-Portal */
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidSessionsPane,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidRewardsPane,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidMessengerPane,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidPushBlock,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidFooter,
body.sf-ui-mobile-active[data-sf-m-view="home"] #sfClassicMobileSwitch,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidFeedback,
body.sf-ui-mobile-active #publicLightKidTabBar {
  display: none !important;
}

body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidSessionsPane {
  display: block !important;
}

body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidRewardsPane,
body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidMessengerPane,
body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidFooter,
body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidPushBlock {
  display: none !important;
}

body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidMessengerPane {
  display: block !important;
}

body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidSessionsPane,
body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidRewardsPane,
body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidPushBlock,
body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidFooter {
  display: none !important;
}

body.sf-ui-mobile-active[data-sf-m-view="more"][data-sf-m-push="1"] #publicLightKidPushBlock,
body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidFooter {
  display: block !important;
}

/* Quote/Auswertung nie unter Mehr (Kompakt und Liste); Formkurve nur mit Lizenz als eigene Ansicht */
body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="more"]:not([data-sf-m-push="1"]) #publicLightKidPushBlock {
  display: none !important;
}

body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidSessionsPane,
body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidMessengerPane,
body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidRewardsPane {
  display: none !important;
}

body.sf-ui-mobile-active[data-sf-m-view="formkurve"] #publicLightKidRewardsPane {
  display: block !important;
}

body.sf-ui-mobile-active[data-sf-m-view="formkurve"] #publicLightKidSessionsPane,
body.sf-ui-mobile-active[data-sf-m-view="formkurve"] #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="formkurve"] #publicLightKidMessengerPane,
body.sf-ui-mobile-active[data-sf-m-view="formkurve"] #publicLightKidPushBlock,
body.sf-ui-mobile-active[data-sf-m-view="formkurve"] #publicLightKidFooter,
body.sf-ui-mobile-active[data-sf-m-view="formkurve"] .sf-m-home,
body.sf-ui-mobile-active[data-sf-m-view="formkurve"] .sf-m-more {
  display: none !important;
}
/* Hero + Kacheln */
.sf-m-hero {
  appearance: none;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  background: linear-gradient(160deg, #163f33 0%, #1d5a47 100%);
  color: #fff;
  border-radius: 20px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 12px 28px rgba(15, 31, 26, 0.16);
  cursor: pointer;
}

.sf-m-hero__kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.8;
  margin-bottom: 0.3rem;
}

.sf-m-hero__when {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sf-m-hero__place {
  margin-top: 0.35rem;
  font-size: 0.86rem;
  opacity: 0.9;
  line-height: 1.35;
}

.sf-m-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.sf-m-hero__pills span {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.sf-m-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.sf-m-tile {
  appearance: none;
  font: inherit;
  border: 1px solid rgba(20, 61, 50, 0.08);
  background: #fff;
  border-radius: 16px;
  padding: 0.85rem 0.8rem;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.04);
  color: #0f1f1a;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 4.6rem;
}

.sf-m-tile__ico {
  font-size: 1.2rem;
  line-height: 1.1;
}

.sf-m-tile__label {
  font-weight: 800;
  font-size: 0.92rem;
}

.sf-m-tile__meta {
  font-size: 0.72rem;
  color: rgba(15, 31, 26, 0.55);
  font-weight: 600;
}

.sf-m-tile.is-wide {
  grid-column: 1 / -1;
}

/* —— Termine —— */
body.sf-ui-mobile-active #publicLightKidSessions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0 !important;
}

body.sf-ui-mobile-active .public-light-session-card {
  border-radius: 16px !important;
  border: 1px solid rgba(20, 61, 50, 0.08) !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.05) !important;
  padding: 0.85rem 0.9rem !important;
}

body.sf-ui-mobile-active .public-light-session-card .cta,
body.sf-ui-mobile-active .attendance-rsvp-group-btn,
body.sf-ui-mobile-active .sf-session-carpool .cta,
body.sf-ui-mobile-active .sf-m-more__card .cta {
  border-radius: 999px !important;
}

body.sf-ui-mobile-active .sf-session-carpool,
body.sf-ui-mobile-active .sf-session-carpool--direct {
  border-radius: 14px !important;
  border: 1px solid rgba(20, 61, 50, 0.1) !important;
  background: #e8f6ef !important;
  padding: 0.65rem !important;
  margin-top: 0.6rem;
}

body.sf-ui-mobile-active .sf-session-carpool-offer {
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(20, 61, 50, 0.08) !important;
}

/* —— Mehr —— */
.sf-m-more {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

body.sf-ui-mobile-active[data-sf-m-view="more"] .sf-m-more {
  display: flex;
}

.sf-m-more__card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.8rem 0.9rem;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.04);
}

.sf-m-more__card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 800;
}

.sf-m-more__row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.sf-m-more__row .cta {
  border-radius: 999px;
  text-decoration: none;
}

.sf-m-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.35rem;
  background: #eef3f0;
  border-radius: 999px;
  padding: 0.25rem;
  margin-top: 0.5rem;
}

.sf-m-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.5rem 0.4rem;
  border-radius: 999px;
  color: rgba(15, 31, 26, 0.6);
  cursor: pointer;
}

.sf-m-seg button.is-on {
  background: #fff;
  color: #1f8f5f;
  box-shadow: 0 2px 8px rgba(15, 31, 26, 0.1);
}

/* PIN / Gate / Consent / Boot */
body.sf-ui-mobile-active #publicLightKidGate,
body.sf-ui-mobile-active #publicLightKidConsent,
body.sf-ui-mobile-active #publicLightKidBoot {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.9rem 1rem;
  box-shadow: 0 8px 22px rgba(15, 31, 26, 0.05);
}

body.sf-ui-mobile-active #publicLightKidGate .cta,
body.sf-ui-mobile-active #publicLightKidConsent .cta,
body.sf-ui-mobile-active #publicLightKidFooter .cta {
  border-radius: 999px;
}

body.sf-ui-mobile-active #publicLightKidFooter {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.75rem;
  margin: 0.6rem 0 0 !important;
  flex-wrap: wrap;
  gap: 0.45rem;
}

body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidFooter {
  display: flex !important;
}

body.sf-ui-mobile-active[data-theme="dark"] #publicLightKidFooter,
body.sf-ui-mobile-active[data-theme="dark"] #publicLightKidPushBlock {
  background: #1b2622;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8f2ee;
}

body.sf-ui-mobile-active #publicLightKidPushBlock {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.75rem 0.9rem;
  margin: 0.6rem 0 0 !important;
}

body.sf-ui-mobile-active .sf-kid-stats-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

body.sf-ui-mobile-active .sf-kid-stats-gauge {
  background: #e8f6ef;
  border-radius: 14px;
  padding: 0.65rem;
}

body.sf-ui-mobile-active[data-theme="dark"] .sf-kid-stats-gauge,
body.sf-ui-mobile-active[data-theme="dark"] .sf-kid-stats-list .list-item {
  background: #1b2622;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8f2ee;
}

body.sf-ui-mobile-active[data-theme="dark"] .sf-kid-stats-gauge-val {
  color: #4cd9a0;
}

/* Fundbüro / Shop / Zugang / Teamplan */
body.sf-ui-mobile-active .facility-page .card-header,
body.sf-ui-mobile-active .facility-public-header {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  background: #fff !important;
  border-radius: 16px;
  padding: 0.8rem 0.9rem !important;
  margin-bottom: 0.65rem;
  border: 1px solid rgba(20, 61, 50, 0.08);
}

body.sf-ui-mobile-active .facility-page .card-header::before,
body.sf-ui-mobile-active .facility-page .card-header::after {
  display: none !important;
}

body.sf-ui-mobile-active .facility-hub,
body.sf-ui-mobile-active .facility-panel {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.8rem;
}

body.sf-ui-mobile-active .sf-team-schedule {
  background: #fff !important;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  overflow: hidden;
}

body.sf-ui-mobile-active #parentAccessRequestForm {
  background: #fff;
  border-radius: 16px;
  padding: 0.85rem;
}

body.sf-ui-mobile-active .cta:not(.ghost) {
  background: #1f8f5f;
  border-color: #1f8f5f;
}

body.sf-ui-mobile-active .input,
body.sf-ui-mobile-active .textarea,
body.sf-ui-mobile-active select.input,
body.sf-ui-mobile-active .page textarea,
body.sf-ui-mobile-active .page select,
body.sf-ui-mobile-active .page input[type="text"],
body.sf-ui-mobile-active .page input[type="email"],
body.sf-ui-mobile-active .page input[type="search"],
body.sf-ui-mobile-active .page input[type="number"],
body.sf-ui-mobile-active .page input[type="tel"],
body.sf-ui-mobile-active .page input[type="file"] {
  border-radius: 12px;
  font-size: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.sf-ui-mobile-active .page textarea {
  resize: vertical;
}

body.sf-ui-mobile-active .facility-hub {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.sf-ui-mobile-active .public-light-event-reg-inplace {
  background: #fff;
  border-radius: 16px;
  padding: 0.7rem;
  border: 1px solid rgba(20, 61, 50, 0.08);
}

/* Hinweis in Classic: neue Ansicht testen (im Fluss, nicht fixiert) */
.sf-m-try-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: #e8f6ef;
  border: 1px solid rgba(20, 61, 50, 0.12);
  border-radius: 14px;
  padding: 0.55rem 0.75rem;
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #143d32;
}

.sf-m-try-banner .cta {
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Bottom-Nav erst nach PIN-/Einwilligungs-Maske */
body.sf-m-locked .sf-m-nav {
  display: none !important;
}

/* —— Ungelesen-Zähler (Messenger) —— */
.sf-m-nav__ico {
  position: relative;
  display: inline-block;
}

.sf-m-badge {
  position: absolute;
  top: -7px;
  right: -12px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #d93025;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
}

.sf-m-tile {
  position: relative;
}

.sf-m-tile .sf-m-badge {
  top: 0.6rem;
  right: 0.7rem;
  font-size: 0.7rem;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
}

/* —— Trainer-Shell (eingeloggte interne App, ≤ 960px) —— */
body[data-ui-design="mobile"].sf-ui-mobile-trainer {
  --sf-m-nav-h: 60px;
}

/* Nav liegt unter Seitenleiste/Backdrop, damit das Hamburger-Menü sie sauber überdeckt */
body.sf-ui-mobile-trainer.nav-open .sf-m-nav {
  z-index: 40;
}

body[data-ui-design="mobile"].sf-ui-mobile-trainer .content {
  padding-bottom: calc(var(--sf-m-nav-h) + env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
}

/* Nichts schwebt über der Nav: Profilwechsel ist in „Mehr“ */
body[data-ui-design="mobile"].sf-ui-mobile-trainer .sf-native-club-switch,
body[data-ui-design="mobile"].sf-ui-mobile-trainer #sfNativeClubSwitch {
  display: none !important;
}

.sf-m-thome,
.sf-m-tmore {
  display: none;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0.2rem 0 0.8rem;
}

body.sf-ui-mobile-trainer.sf-m-t-home .sf-m-thome,
body.sf-ui-mobile-trainer.sf-m-t-more-open .sf-m-tmore {
  display: flex;
}

/* Trainer-Start: kompakte Kacheln statt Desktop-Dashboard (optional einblendbar) */
body.sf-ui-mobile-trainer.sf-m-t-home:not(.sf-m-t-showdash) main.page,
body.sf-ui-mobile-trainer.sf-m-t-more-open main.page {
  display: none !important;
}

.sf-m-thome .sf-m-hero {
  cursor: pointer;
}

.sf-m-link {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: #1f8f5f;
  padding: 0.4rem;
  cursor: pointer;
  align-self: center;
}

.sf-m-tmore {
  gap: 0.6rem;
}

.sf-m-list {
  display: flex;
  flex-direction: column;
}

.sf-m-list__row {
  appearance: none;
  border: 0;
  border-top: 1px solid rgba(20, 61, 50, 0.08);
  background: transparent;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.4rem 0.1rem;
  text-align: left;
  cursor: pointer;
}

.sf-m-list__row:first-child {
  border-top: 0;
}

.sf-m-list__ico {
  width: 1.6rem;
  text-align: center;
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.sf-m-list__label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.sf-m-list__chev {
  flex: 0 0 auto;
  opacity: 0.4;
  font-size: 1.2rem;
}

/* —— Dunkelmodus Eltern-/Spielerportal: dunkler Grund statt heller Fläche mit dunkler Karte —— */
body[data-ui-design="mobile"].sf-ui-mobile-active[data-theme="dark"] {
  background: #0f1714 !important;
  color: #e8f2ee;
}

body[data-ui-design="mobile"].sf-ui-mobile-active[data-theme="dark"] .content section.card,
body[data-ui-design="mobile"].sf-ui-mobile-active[data-theme="dark"] .content .page > .card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #e8f2ee;
}

/* —— Dunkelmodus (Trainer-Shell & gemeinsame Bausteine) —— */
body[data-theme="dark"] .sf-m-nav {
  background: #17201d;
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .sf-m-nav__btn {
  color: rgba(255, 255, 255, 0.55);
}

body[data-theme="dark"] .sf-m-nav__btn.is-active {
  color: #4cd9a0;
}

body[data-theme="dark"] .sf-m-tile,
body[data-theme="dark"] .sf-m-more__card {
  background: #1b2622;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8f2ee;
  box-shadow: none;
}

body[data-theme="dark"] .sf-m-tile__meta {
  color: rgba(232, 242, 238, 0.6);
}

body[data-theme="dark"] .sf-m-list__row {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #e8f2ee;
}

body[data-theme="dark"] .sf-m-seg {
  background: #0f1714;
}

body[data-theme="dark"] .sf-m-seg button {
  color: rgba(232, 242, 238, 0.7);
}

body[data-theme="dark"] .sf-m-seg button.is-on {
  background: #26352f;
  color: #4cd9a0;
}

body[data-theme="dark"] .sf-m-link {
  color: #4cd9a0;
}

/* —— Werbebanner auf Home (Eltern/Kind, Daten vom Cronserver) —— */
.sf-m-ad {
  --sf-ad-i: 0;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(120deg, #143d32, #1f8f5f, #2fb36f, #143d32);
  background-size: 300% 300%;
  box-shadow: 0 8px 22px rgba(31, 143, 95, 0.28);
  animation: sfAdIn 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) both, sfAdFlow 10s ease-in-out infinite alternate;
}

.sf-m-ad__track {
  display: flex;
  transform: translateX(calc(var(--sf-ad-i) * -100%));
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.sf-m-ad__slide {
  position: relative;
  flex: 0 0 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 4rem;
  padding: 0.55rem 0.7rem 0.6rem;
  color: #fff !important;
  text-decoration: none !important;
}

.sf-m-ad__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.sf-m-ad__slide.is-current .sf-m-ad__logo {
  animation: sfAdPop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

.sf-m-ad__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.sf-m-ad__text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Titel bis 2 Zeilen, Unterzeile einzeilig */
.sf-m-ad__text strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sf-m-ad__text span {
  font-size: 0.76rem;
  opacity: 0.9;
}

.sf-m-ad__cta {
  position: relative;
  overflow: hidden;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.42rem 0.6rem;
  border-radius: 999px;
  background: #b6f04a;
  color: #0f1f1a;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* Glanz, der regelmäßig über den Button läuft */
.sf-m-ad__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sfAdShine 3.2s ease-in-out 1s infinite;
}

.sf-m-ad__label {
  position: absolute;
  top: 0.25rem;
  right: 0.6rem;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.sf-m-ad__dots {
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
}

.sf-m-ad__dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.sf-m-ad__dot.is-on {
  width: 1rem;
  background: #fff;
}

@keyframes sfAdIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes sfAdFlow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes sfAdPop {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

@keyframes sfAdShine {
  0%, 60% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .sf-m-ad,
  .sf-m-ad__slide.is-current .sf-m-ad__logo,
  .sf-m-ad__cta::after {
    animation: none !important;
  }
  .sf-m-ad__track {
    transition: none;
  }
}

/* —— Home ohne Scrollen: stufenweise dichter (gesetzt von fitHome() in ui_design_mobile.js) —— */
.sf-m-home--fit1 {
  gap: 0.55rem;
}
.sf-m-home--fit1 .sf-m-hero {
  padding: 0.75rem 0.95rem 0.8rem;
}
.sf-m-home--fit1 .sf-m-hero__when {
  font-size: 1.2rem;
}
.sf-m-home--fit1 .sf-m-hero__pills {
  margin-top: 0.45rem;
}
.sf-m-home--fit1 .sf-m-tiles {
  gap: 0.45rem;
}
.sf-m-home--fit1 .sf-m-tile {
  min-height: 3.9rem;
  padding: 0.6rem 0.7rem;
}

/* Kachel als Zeile: Symbol links, Text rechts */
.sf-m-home--fit2 .sf-m-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  row-gap: 0;
  align-items: center;
  min-height: 3.1rem;
  padding: 0.5rem 0.65rem;
}
.sf-m-home--fit2 .sf-m-tile__ico {
  grid-row: 1 / span 2;
}
.sf-m-home--fit2 .sf-m-tile__label,
.sf-m-home--fit2 .sf-m-tile__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-m-home--fit2 .sf-m-hero__place {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-m-home--fit3 .sf-m-tile__meta,
.sf-m-home--fit3 .sf-m-hero__kicker {
  display: none;
}
.sf-m-home--fit3 .sf-m-tile {
  min-height: 2.6rem;
}
.sf-m-home--fit3 .sf-m-hero__pills {
  margin-top: 0.3rem;
}

/* —— Startseite passt auf den Bildschirm: Seite nicht ziehbar (gesetzt von syncHomeNoScroll) —— */
html.sf-m-noscroll,
html.sf-m-noscroll body {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

/* —— Trainer-Start (Kompakt): klassische Übersicht nicht kurz aufblitzen lassen, bis die
   Kompakt-Hülle entschieden hat (sf-m-t-ready). Sicherheitsnetz: spätestens nach 1,5 s sichtbar. —— */
@media (max-width: 960px) {
  body[data-ui-design="mobile"][data-page="trainer-dashboard"]:not(.sf-ui-mobile-trainer):not(.sf-m-t-ready) main.page,
  /* Client-Navigation zurück auf Home: Hülle steht schon, Kacheln (sf-m-t-home) folgen gleich */
  body[data-ui-design="mobile"][data-page="trainer-dashboard"].sf-ui-mobile-trainer:not(.sf-m-t-home):not(.sf-m-t-more-open) main.page {
    visibility: hidden;
    animation: sfMTHoldReveal 0s linear 1.5s forwards;
  }
}

@keyframes sfMTHoldReveal {
  to {
    visibility: visible;
  }
}

/* —— Eltern/Kind: Lade-Gerüst im Stil der Startseite statt Lade-Karte (sf-m-booting) —— */
body.sf-m-booting #publicLightKidBoot {
  display: none !important;
}

/* Schon vor dem Skript: Lade-Karte im Kompakt-Portal nicht zeigen (Gerüst folgt sofort) */
body[data-ui-design="mobile"][data-page="public-attendance-light-player"] #publicLightKidBoot {
  visibility: hidden;
}

body.sf-m-booting .card:has(> #publicLightKidBoot) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.sf-m-skel {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.sf-m-skel__hero {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 20px;
  background: linear-gradient(160deg, #163f33 0%, #1d5a47 100%);
}

.sf-m-skel__hero span {
  display: block;
  height: 0.75rem;
  width: 35%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  animation: sfSkelPulse 1.2s ease-in-out infinite alternate;
}

.sf-m-skel__hero span:nth-child(2) {
  height: 1.35rem;
  width: 70%;
}

.sf-m-skel__hero span:nth-child(3) {
  width: 55%;
}

.sf-m-skel__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.sf-m-skel__tiles span {
  display: block;
  min-height: 4.6rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(20, 61, 50, 0.08);
  animation: sfSkelPulse 1.2s ease-in-out infinite alternate;
}

body[data-theme="dark"] .sf-m-skel__tiles span {
  background: #1a2744;
  border-color: rgba(255, 255, 255, 0.08);
}

@keyframes sfSkelPulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-m-skel__hero span,
  .sf-m-skel__tiles span {
    animation: none;
  }
}

/* Nächster Termin noch nicht geladen: Platzhalter-Balken in der Termin-Karte */
.sf-m-hero__skel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.2rem 0 0.15rem;
}

.sf-m-hero__skel span {
  display: block;
  height: 1.3rem;
  width: 68%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  animation: sfSkelPulse 1.2s ease-in-out infinite alternate;
}

.sf-m-hero__skel span + span {
  height: 0.8rem;
  width: 52%;
}