/* =========================================================================
   app-mobile.css — geteilte Mobile-/Native-App-Layer (Etappe E1)
   -------------------------------------------------------------------------
   Quelle der Wahrheit für die app-weiten Mobile-Leitplanken + geteilten
   Komponenten. Wird von app/views/layout/header.php als versionierte Datei im
   Head geladen (<link … ?v=<mtime>, cachebar); bis Design D0 war sie inline
   eingebettet. Farb-, Form- und Ebenen-Tokens stehen in app-ui.css.

   Grundsätze:
   - Arbeitet über NEUE .app-*-Klassen + Tokens. Bestehende Modul-Klassen
     (.mem-*, .fin-* …) werden NICHT per Blanket-Selektor umgestylt.
   - Bewahrt die iOS-PWA-Scroll-Architektur (html = Scroll-Container).
     KEIN 100dvh/overscroll:none am Body — dvh nur in Sheets/Standalone.
   - Zoom bleibt aktiv (A11y). Kein user-scalable=no.
   ========================================================================= */

/* ---- Token-Skalen (Abstände, Radien, z-index, Safe-Area): jetzt in app-ui.css ---- */

/* ---- Touch-Leitplanken: kein Doppeltap-Zoom, kein grauer Tap-Blitz ------- */
button, a, [role="button"], label, summary, .app-interactive,
.btn, .nav-link, .dropdown-item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Keine ungewollte Textselektion auf reinen UI-Elementen (Inhalte/Inputs
   bleiben selektierbar). */
.btn, .nav-link, .app-backbtn, .dropdown-toggle,
.app-sheet-head, .app-toast, .card-interactive, .app-tabbar {
  -webkit-user-select: none;
  user-select: none;
}

/* ---- Kein Pull-to-Refresh / Bounce-Chaining (html = Scroll-Container) ---- */
html { overscroll-behavior: none; }

/* ---- iOS-Zoom-Kill: Formularfelder mind. 16px auf kleinen Screens -------- */
@media (max-width: 430px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea {
    font-size: 16px;
  }
}

/* ---- Body-Scroll-Lock (JS setzt body.top inline; siehe footer.php) ------- */
body.app-scroll-locked {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

/* ---- Safe-Area-Utilities ------------------------------------------------- */
.app-safe-top    { padding-top:    max(0px, var(--safe-top)); }
.app-safe-bottom { padding-bottom: max(0px, var(--safe-bottom)); }
.app-safe-x      { padding-left: var(--safe-left); padding-right: var(--safe-right); }

/* =========================================================================
   .app-rtable — responsive Tabelle → Karten (verallgemeinert .mem-rtable/.bj-tbl)
   Verwendung:  <table class="app-rtable"> … <td data-label="Spalte">Wert</td>
   Opt-out vom globalen .tbl-scroll-Wrapper zusätzlich data-no-tblscroll setzen.
   ========================================================================= */
@media (max-width: 640px) {
  table.app-rtable,
  table.app-rtable > tbody,
  table.app-rtable > tbody > tr,
  table.app-rtable > tbody > tr > td {
    display: block;
    width: 100%;
  }
  table.app-rtable { min-width: 0 !important; }
  /* thead visuell verstecken, für Screenreader erhalten */
  table.app-rtable > thead {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  table.app-rtable > tbody > tr {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 14px);
    background: var(--panel, #fff);
    margin-bottom: .6rem;
    padding: .35rem .8rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,.05));
  }
  table.app-rtable > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    text-align: right;
    padding: .4rem 0;
    border: 0;
    border-bottom: 1px solid var(--border, #f1f5f9);
    min-width: 0;
    white-space: normal !important;
  }
  table.app-rtable > tbody > tr > td:last-child { border-bottom: 0; }
  table.app-rtable > tbody > tr > td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-align: left;
    flex: 0 0 auto;
    margin-right: auto;
    padding-right: .5rem;
  }
  /* Zellen ohne data-label (z. B. Aktionsspalte) bekommen keinen Label-Rand */
  table.app-rtable > tbody > tr > td:not([data-label])::before { content: ""; }
  /* Erste Zelle als Karten-Titel */
  table.app-rtable > tbody > tr > td.app-rt-title {
    display: block;
    text-align: left;
    font-weight: 800;
    font-size: 1rem;
    color: var(--text, #0f172a);
  }
  table.app-rtable > tbody > tr > td.app-rt-title::before { content: ""; display: none; }
}

/* =========================================================================
   .app-sheet — Bottom-Sheet (mobil) / zentrierter Dialog (Desktop)
   ========================================================================= */
.app-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: var(--z-sheet, 10000);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.app-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.app-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-sheet, 10000) + 1);
  display: none;
  flex-direction: column;
  background: var(--panel, #fff);
  color: var(--text, #0f172a);
  border-radius: var(--radius-lg, 18px) var(--radius-lg, 18px) 0 0;
  max-height: min(88dvh, 88vh);
  padding-bottom: var(--safe-bottom);
  box-shadow: 0 -12px 40px rgba(0,0,0,.28);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  will-change: transform;
}
.app-sheet.is-open { display: flex; transform: translateY(0); }
.app-sheet-grip {
  flex: 0 0 auto;
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--border-strong, #cbd5e1);
  margin: .55rem auto .2rem;
}
.app-sheet-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .6rem;
  padding: .3rem 1rem .55rem;
}
.app-sheet-title { flex: 1; min-width: 0; margin: 0; font-weight: 800; font-size: 1.02rem; }
.app-sheet-close {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--text-muted, #64748b);
  font-size: 1.3rem; cursor: pointer;
}
.app-sheet-close:hover { background: color-mix(in srgb, var(--text-muted, #64748b) 12%, transparent); }
.app-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: .2rem 1rem 1rem;
}
@media (min-width: 700px) {
  /* Desktop: zentrierter Dialog statt Bottom-Sheet */
  .app-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(560px, 92vw);
    border-radius: var(--radius-lg, 18px);
    max-height: min(86dvh, 86vh);
    padding-bottom: 0;
    transform: translate(-50%, -46%) scale(.98);
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(15,23,42,.4));
  }
  .app-sheet.is-open { transform: translate(-50%, -50%) scale(1); }
  .app-sheet-grip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-sheet { transition: none; }
}

/* =========================================================================
   .app-toast — leichtgewichtige Rückmeldung (JS: window.appToast)
   ========================================================================= */
.app-toast-wrap {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--safe-bottom) + 18px);
  z-index: var(--z-toast, 10050);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 0 12px;
  pointer-events: none;
}
/* Über der Mobile-Bottom-Nav einschweben lassen */
@media (max-width: 768px) {
  body.is-logged-in .app-toast-wrap { bottom: calc(var(--safe-bottom) + 88px); }
}
.app-toast {
  pointer-events: auto;
  max-width: min(460px, 96vw);
  width: fit-content;
  background: #1e293b; color: #fff;
  border-radius: var(--radius-md, 14px);
  padding: .7rem 1rem;
  font-size: .9rem; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  border-left: 4px solid #64748b;
  opacity: 0; transform: translateY(12px);
  transition: opacity .2s, transform .2s;
  word-break: break-word;
}
.app-toast.is-open { opacity: 1; transform: translateY(0); }
.app-toast.is-success { border-left-color: #16a34a; }
.app-toast.is-error   { border-left-color: #dc2626; }
.app-toast.is-info    { border-left-color: var(--brand, #7c3aed); }
@media (prefers-reduced-motion: reduce) {
  .app-toast { transition: opacity .2s; transform: none; }
}

/* =========================================================================
   Spinner / Loading-Button / Skeleton
   ========================================================================= */
.app-spinner {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.15em;
  animation: appSpin .6s linear infinite;
}
@keyframes appSpin { to { transform: rotate(360deg); } }
[aria-busy="true"] { cursor: progress; }

/* Blockierendes „Bitte warten"-Overlay (window.appBusy / data-busy) */
.app-busy {
  position: fixed; inset: 0; z-index: 2147483000;
  display: none; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px);
  padding: 1rem;
}
.app-busy.is-on { display: flex; }
.app-busy-card {
  background: var(--panel, #fff); color: var(--text, #0f172a);
  border-radius: 16px; padding: 1.5rem 1.75rem; max-width: 92vw; width: 340px;
  text-align: center; box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
}
.app-busy-spin {
  width: 42px; height: 42px; margin: 0 auto .9rem;
  border: 4px solid var(--border, rgba(124, 58, 237, .25));
  border-top-color: var(--brand, #7c3aed);
  border-radius: 50%; animation: appSpin .8s linear infinite;
}
.app-busy-txt { font-weight: 700; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.app-busy-sub { font-size: .8rem; color: var(--text-muted, #64748b); margin-top: .35rem; }

.app-skeleton {
  background: linear-gradient(90deg,
    var(--border, #e2e8f0) 25%,
    var(--panel-elevated, #f1f5f9) 37%,
    var(--border, #e2e8f0) 63%);
  background-size: 400% 100%;
  border-radius: 8px;
  animation: appSkel 1.4s ease infinite;
}
@keyframes appSkel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .app-spinner { animation-duration: 1.2s; }
  .app-skeleton { animation: none; }
}

/* =========================================================================
   .app-empty — gestalteter Leer-Zustand (Icon + Titel + Text + CTA)
   ========================================================================= */
.app-empty {
  text-align: center;
  padding: 2.2rem 1rem;
  color: var(--text-muted, #64748b);
}
.app-empty-ic { font-size: 2.4rem; opacity: .55; margin-bottom: .35rem; }
.app-empty-title { font-weight: 700; color: var(--text, #0f172a); margin: .2rem 0 .3rem; }
.app-empty-text { font-size: .9rem; max-width: 34ch; margin: 0 auto 1rem; line-height: 1.5; }

/* =========================================================================
   .app-install — dezenter PWA-Installations-Hinweis (E1b; JS steuert Sichtbarkeit)
   ========================================================================= */
.app-install {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--safe-bottom) + 14px);
  z-index: var(--z-install, 10060);
  display: flex; align-items: center; gap: .8rem;
  background: var(--panel, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(15,23,42,.18));
  padding: .8rem 1rem;
  transform: translateY(160%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.app-install.is-open { transform: translateY(0); }
@media (max-width: 768px) {
  body.is-logged-in .app-install { bottom: calc(var(--safe-bottom) + 88px); }
}
.app-install-ic { font-size: 1.8rem; flex: 0 0 auto; color: var(--accent-text); }
.app-install-ic .wc-i { width: 32px; height: 32px; vertical-align: 0; }
.app-install-body { flex: 1; min-width: 0; }
.app-install-title { font-weight: 700; font-size: .95rem; }
.app-install-text { font-size: .82rem; color: var(--text-muted, #64748b); line-height: 1.4; }
.app-install-actions { display: flex; gap: .4rem; flex: 0 0 auto; }
.app-install-btn {
  border: 0; border-radius: 999px;
  padding: .5rem .9rem; min-height: 40px;
  font-weight: 700; font-size: .85rem; cursor: pointer;
  background: var(--brand, #7c3aed); color: #fff;
}
.app-install-dismiss {
  background: transparent; color: var(--text-muted, #64748b);
  border: 1px solid var(--border, #e2e8f0);
}
@media (prefers-reduced-motion: reduce) { .app-install { transition: none; } }

/* iOS-Anleitung (kein beforeinstallprompt) als kleines Sheet-Overlay */
.app-ios-hint-step { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; font-size: .92rem; }
.app-ios-hint-step .n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand, #7c3aed) 14%, transparent);
  color: var(--brand, #7c3aed); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}

/* =========================================================================
   MOBILER SEITENKOPF „Direction A" — großer Titel statt Hero-Karte
   -------------------------------------------------------------------------
   Auf dem Handy (≤768px) wird der dunkle Hero-Block zu einem schlanken,
   großen Seitentitel direkt auf dem Seiten-Hintergrund:
   - kein Karten-Block / kein Glow (transparent), Titel groß + dunkel,
     Untertitel gedämpft
   - Modul-Icon ausgeblendet (Kontext kommt aus Titel + Back-Leiste + Tab-Bar)
   - Aktions-Buttons: die erste bleibt sichtbar (Primär), weitere wandern per
     JS (footer.php → collapseHeroActions) in ein „⋯"-Aktionsblatt (.app-sheet)
   Greift über [class$="-hero"] (jede Hero-Klasse endet auf "-hero"). Nur in
   der eingeloggten App (Datei nur via header.php). Desktop bleibt vorerst
   unberührt (Platz-Druck ist mobil).
   Ausgenommen (inhaltsschwer/speziell): tk/vlt/pa/fx/splp/sig/pub/ppx/ppm/pcare.
   ========================================================================= */
@media (max-width: 768px) {
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: .15rem 0 .3rem !important;
    margin: 0 0 .55rem !important;
    gap: .5rem !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) h1 {
    color: var(--text, #0f172a) !important;
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    margin: 0 !important;
  }
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) p,
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) .sub,
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) .lead,
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) [class*="kick"] {
    /* Eyebrow-/Kicker-Label + Untertitel/Lead mobil aus — der große Titel trägt den Kontext. */
    display: none !important;
  }
  /* Modul-Icon ausblenden — der große Titel trägt den Kontext */
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) [class*="hero-ic"],
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) > .ic {
    display: none !important;
  }
  /* Aktions-Reihe rechts, kompakt; Primär bleibt, Rest wandert ins ⋯-Sheet */
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) [class*="-hero-actions"],
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) [class*="-hero-a"] {
    margin-left: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    gap: .4rem !important;
    align-items: center !important;
  }
  /* Zurück-/Hoch-Links, die footer.php als redundant markiert hat (Navbar hat
     bereits den Zurück-Pfeil) → komplett aus dem Hero nehmen. Behebt den
     „weiße Ghost-Schrift überlappt das ⋯"-Effekt auf dem hellen Mobil-Hero. */
  [data-hero-drop] { display: none !important; }
  /* Die eine sichtbar bleibende Primär-Aktion: kompakt + garantiert lesbar
     (Primär-Buttons haben eigenen Vollton-Hintergrund → Kontrast passt). */
  .app-hero-keep {
    flex: 0 0 auto !important;
    min-height: 40px;
    padding: .5rem .9rem !important;
    font-size: .85rem !important;
    border-radius: 12px !important;
    white-space: nowrap;
  }
}

/* =========================================================================
   DESKTOP: heller Groß-Titel-Kopf statt dunklem Hero — MODULWEISE freigeschaltet
   (Opt-in). Nur die hier gelisteten Modul-Heros werden am Desktop hell; alle
   anderen bleiben unverändert dunkel, bis sie im Rollout dran sind (kein
   Kaputt-Flippen un-polierter Module). Der Mobil-Transform oben lightet die
   Heros ohnehin schon; hier zieht der Desktop nach. Neue Module: Klasse in
   ALLE vier Selektor-Listen unten aufnehmen (+ ggf. Custom-Kinder im Modul fixen).
   Freigeschaltet: members · buchhaltung · dashboard · admin · groups · calendar ·
   postfach · ablage. (teams: 17 heterogene Hero-Klassen → eigener Pass;
   eventplanner: reicher Hero mit kicker/meta → eigener Pass; personal: pa-hero
   bewusst dunkel gelassen bis eigener Pass.)
   ========================================================================= */
@media (min-width: 769px) {
  .mem-hero, .fin-hero, .adm-hero, .udh-hero, .grp-hero, .gr-hero, .vs-hero,
  .cal-hero, .pf-hero, .ab-hero, .st-hero {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border, rgba(15,23,42,.08)) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: .3rem .1rem 1rem !important;
    margin: 0 0 1.1rem !important;
    align-items: flex-start !important;
    color: var(--text, #0f172a) !important;
  }
  .mem-hero::before, .fin-hero::before, .adm-hero::before, .udh-hero::before, .grp-hero::before,
  .gr-hero::before, .vs-hero::before, .cal-hero::before, .pf-hero::before, .ab-hero::before, .st-hero::before { display: none !important; }
  .mem-hero h1, .fin-hero h1, .adm-hero h1, .udh-hero h1, .grp-hero h1, .gr-hero h1, .vs-hero h1,
  .cal-hero h1, .pf-hero h1, .ab-hero h1, .st-hero h1, .udh-hero .udh-hello {
    color: var(--text, #0f172a) !important;
    font-size: 1.7rem !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
  }
  .mem-hero p, .fin-hero p, .adm-hero p, .udh-hero p, .grp-hero p, .gr-hero p, .vs-hero p,
  .cal-hero p, .pf-hero p, .ab-hero p, .st-hero p,
  .mem-hero [class*="-sub"], .fin-hero [class*="-sub"], .adm-hero [class*="-sub"], .udh-hero [class*="-sub"],
  .grp-hero [class*="-sub"], .cal-hero [class*="-sub"],
  .pf-hero .sub, .ab-hero .sub, .st-hero .sub {
    color: var(--text-muted, #64748b) !important;
  }
  .mem-hero [class*="hero-ic"], .fin-hero [class*="hero-ic"], .adm-hero [class*="hero-ic"], .udh-hero [class*="hero-ic"],
  .grp-hero [class*="hero-ic"], .gr-hero [class*="hero-ic"], .vs-hero [class*="hero-ic"], .cal-hero [class*="hero-ic"],
  .pf-hero .pf-ic, .ab-hero .ab-ic, .st-hero .ic {
    display: none !important;
  }
  .mem-hero [class*="-btn-ghost"], .fin-hero [class*="-btn-ghost"], .adm-hero [class*="-btn-ghost"], .udh-hero [class*="-btn-ghost"],
  .grp-hero [class*="-btn-ghost"], .gr-hero [class*="-btn-ghost"], .vs-hero [class*="-btn-ghost"], .cal-hero [class*="-btn-ghost"],
  .pf-hero [class*="-btn-ghost"], .ab-hero [class*="-btn-ghost"], .st-hero [class*="-btn-ghost"], .st-hero a.bk {
    background: var(--panel, #fff) !important;
    color: var(--text-soft, #475569) !important;
    border: 1px solid var(--border-strong, rgba(15,23,42,.16)) !important;
  }
  /* Admin-Unterseiten mit eigenem (früher dunklem) Hero: permissions_matrix (pm),
     mail (mailadm), security (sec), audit (aud) → gleicher heller Kopf. */
  .pm-hero, .mailadm-hero, .sec-hero, .aud-hero {
    background: transparent !important; border: 0 !important;
    border-bottom: 1px solid var(--border, rgba(15,23,42,.08)) !important;
    box-shadow: none !important; border-radius: 0 !important;
    padding: .3rem .1rem 1rem !important; margin: 0 0 1.1rem !important;
    align-items: flex-start !important; color: var(--text, #0f172a) !important;
  }
  .pm-hero::before, .mailadm-hero::before, .sec-hero::before, .aud-hero::before { display: none !important; }
  .pm-hero h1, .mailadm-hero h1, .sec-hero h1, .aud-hero h1 {
    color: var(--text, #0f172a) !important; font-size: 1.7rem !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -.02em !important;
  }
  .pm-hero p, .mailadm-hero p, .sec-hero p, .aud-hero p,
  .pm-hero [class*="-sub"], .mailadm-hero [class*="-sub"], .sec-hero [class*="-sub"], .aud-hero [class*="-sub"] { color: var(--text-muted, #64748b) !important; }
  .pm-hero [class*="hero-ic"], .mailadm-hero [class*="hero-ic"], .sec-hero [class*="hero-ic"], .aud-hero [class*="hero-ic"] { display: none !important; }
  .pm-hero [class*="-btn-ghost"], .mailadm-hero [class*="-btn-ghost"], .sec-hero [class*="-btn-ghost"], .aud-hero [class*="-btn-ghost"] {
    background: var(--panel, #fff) !important; color: var(--text-soft, #475569) !important; border: 1px solid var(--border-strong, rgba(15,23,42,.16)) !important;
  }

  /* Sport & Teams: 16 Standard-Slate-Heros (#0f172a→#1e293b) → gleicher heller
     Kopf. Mobil greifen sie schon über den Universal-Selektor; hier Desktop.
     Football-Widgets (.fbw-*/.fnh-*) sind KEINE -hero und bleiben bewusst dunkel. */
  .tm-hero, .ev-hero, .evl-hero, .hd-hero, .ic-hero, .mp-hero, .nf-hero, .nm-hero,
  .nv-hero, .nw-hero, .rst-hero, .sy-hero, .tov-hero, .tpl-hero, .ts-hero, .cp-hero {
    background: transparent !important; border: 0 !important;
    border-bottom: 1px solid var(--border, rgba(15,23,42,.08)) !important;
    box-shadow: none !important; border-radius: 0 !important;
    padding: .3rem .1rem 1rem !important; margin: 0 0 1.1rem !important;
    align-items: flex-start !important; color: var(--text, #0f172a) !important;
  }
  .tm-hero::before, .ev-hero::before, .evl-hero::before, .hd-hero::before, .ic-hero::before,
  .mp-hero::before, .nf-hero::before, .nm-hero::before, .nv-hero::before, .nw-hero::before,
  .rst-hero::before, .sy-hero::before, .tov-hero::before, .tpl-hero::before, .ts-hero::before, .cp-hero::before { display: none !important; }
  .tm-hero h1, .ev-hero h1, .evl-hero h1, .hd-hero h1, .ic-hero h1, .mp-hero h1, .nf-hero h1, .nm-hero h1,
  .nv-hero h1, .nw-hero h1, .rst-hero h1, .sy-hero h1, .tov-hero h1, .tpl-hero h1, .ts-hero h1, .cp-hero h1 {
    color: var(--text, #0f172a) !important; font-size: 1.7rem !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -.02em !important;
  }
  .tm-hero p, .ev-hero p, .evl-hero p, .hd-hero p, .ic-hero p, .mp-hero p, .nf-hero p, .nm-hero p,
  .nv-hero p, .nw-hero p, .rst-hero p, .sy-hero p, .tov-hero p, .tpl-hero p, .ts-hero p, .cp-hero p,
  .tm-hero [class*="-sub"], .ev-hero [class*="-sub"], .evl-hero [class*="-sub"], .hd-hero [class*="-sub"], .ic-hero [class*="-sub"],
  .mp-hero [class*="-sub"], .nf-hero [class*="-sub"], .nm-hero [class*="-sub"], .nv-hero [class*="-sub"], .nw-hero [class*="-sub"],
  .rst-hero [class*="-sub"], .sy-hero [class*="-sub"], .tov-hero [class*="-sub"], .tpl-hero [class*="-sub"], .ts-hero [class*="-sub"], .cp-hero [class*="-sub"] {
    color: var(--text-muted, #64748b) !important;
  }
  .tm-hero [class*="hero-ic"], .ev-hero [class*="hero-ic"], .evl-hero [class*="hero-ic"], .hd-hero [class*="hero-ic"], .ic-hero [class*="hero-ic"],
  .mp-hero [class*="hero-ic"], .nf-hero [class*="hero-ic"], .nm-hero [class*="hero-ic"], .nv-hero [class*="hero-ic"], .nw-hero [class*="hero-ic"],
  .rst-hero [class*="hero-ic"], .sy-hero [class*="hero-ic"], .tov-hero [class*="hero-ic"], .tpl-hero [class*="hero-ic"], .ts-hero [class*="hero-ic"], .cp-hero [class*="hero-ic"] { display: none !important; }
  .tm-hero [class*="-btn-ghost"], .ev-hero [class*="-btn-ghost"], .evl-hero [class*="-btn-ghost"], .hd-hero [class*="-btn-ghost"], .ic-hero [class*="-btn-ghost"],
  .mp-hero [class*="-btn-ghost"], .nf-hero [class*="-btn-ghost"], .nm-hero [class*="-btn-ghost"], .nv-hero [class*="-btn-ghost"], .nw-hero [class*="-btn-ghost"],
  .rst-hero [class*="-btn-ghost"], .sy-hero [class*="-btn-ghost"], .tov-hero [class*="-btn-ghost"], .tpl-hero [class*="-btn-ghost"], .ts-hero [class*="-btn-ghost"], .cp-hero [class*="-btn-ghost"] {
    background: var(--panel, #fff) !important; color: var(--text-soft, #475569) !important; border: 1px solid var(--border-strong, rgba(15,23,42,.16)) !important;
  }
}

/* EventPlanner: reiche Slate-Heros (.evp/.ept/.pc/.sh-hero) mit eigenen hellen
   Kindern (.kicker/.kick/.meta zusätzlich zu .sub). Der Universal-Flip deckt
   bg/h1/.sub ab, aber NICHT .kicker/.kick/.meta → die blieben hell-auf-hell.
   Hier: Desktop kompletter Flip + auf BEIDEN Breakpoints die Extra-Kinder abdunkeln. */
@media (min-width: 769px) {
  .evp-hero, .ept-hero, .pc-hero, .sh-hero {
    background: transparent !important; border: 0 !important;
    border-bottom: 1px solid var(--border, rgba(15,23,42,.08)) !important;
    box-shadow: none !important; border-radius: 0 !important;
    padding: .3rem .1rem 1rem !important; margin: 0 0 1.1rem !important;
    align-items: flex-start !important; color: var(--text, #0f172a) !important;
  }
  .evp-hero::before, .ept-hero::before, .pc-hero::before, .sh-hero::before { display: none !important; }
  .evp-hero h1, .ept-hero h1, .pc-hero h1, .sh-hero h1 {
    color: var(--text, #0f172a) !important; font-size: 1.7rem !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -.02em !important;
  }
  .evp-hero .kicker, .ept-hero .kick, .evp-hero .meta, .evp-hero .meta .st,
  .evp-hero p, .ept-hero .sub, .pc-hero .sub, .sh-hero .sub,
  .evp-hero [class*="-sub"], .ept-hero [class*="-sub"] { color: var(--text-muted, #64748b) !important; }
  .evp-hero .ic, .ept-hero .ic, .pc-hero .ic, .sh-hero .ic,
  .evp-hero [class*="hero-icon"], .ept-hero [class*="hero-icon"] { display: none !important; }
  .evp-hero [class*="-btn-ghost"], .ept-hero .acts [class*="-btn-ghost"] {
    background: var(--panel, #fff) !important; color: var(--text-soft, #475569) !important; border: 1px solid var(--border-strong, rgba(15,23,42,.16)) !important;
  }
}
@media (max-width: 768px) {
  /* Mobil deckt der Universal-Flip bg/h1/.sub ab; hier die Extra-Kinder nachziehen. */
  .evp-hero .kicker, .ept-hero .kick, .evp-hero .meta, .evp-hero .meta .st {
    color: var(--text-muted, #64748b) !important;
  }
}

/* =========================================================================
   UNIVERSELLER DESKTOP-HERO-FLIP (Parität zum Mobil-Flip).
   Alle Slate-Heros der eingeloggten App werden auch am Desktop hell — dieselbe
   Ausnahmeliste wie mobil (tk/vlt/pa/fx/splp/sig/pub/ppx/ppm/pcare = public-
   Standalone bzw. bewusst dunkel). Ersetzt das frühere Modul-für-Modul-Opt-in;
   die expliziten Modul-Blöcke oben bleiben (redundant, harmlos). Untertitel/
   Kicker werden am Desktop nur gedämpft (nicht versteckt — genug Platz).
   ========================================================================= */
@media (min-width: 769px) {
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) {
    background: transparent !important; border: 0 !important;
    border-bottom: 1px solid var(--border, rgba(15,23,42,.08)) !important;
    box-shadow: none !important; border-radius: 0 !important;
    padding: .3rem .1rem 1rem !important; margin: 0 0 1.1rem !important;
    align-items: flex-start !important; color: var(--text, #0f172a) !important;
  }
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero)::before { display: none !important; }
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) h1 {
    color: var(--text, #0f172a) !important; font-size: 1.7rem !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -.02em !important;
  }
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) p,
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) [class*="-sub"],
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) .lead,
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) [class*="kick"],
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) [class*="meta"] {
    color: var(--text-muted, #64748b) !important;
  }
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) [class*="hero-ic"],
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) > .ic {
    display: none !important;
  }
  [class$="-hero"]:not(.tk-hero):not(.vlt-hero):not(.pa-hero):not(.fx-hero):not(.splp-hero):not(.sig-hero):not(.pub-hero):not(.ppx-hero):not(.ppm-hero):not(.pcare-hero) [class*="-btn-ghost"] {
    background: var(--panel, #fff) !important; color: var(--text-soft, #475569) !important; border: 1px solid var(--border-strong, rgba(15,23,42,.16)) !important;
  }
}

/* Sponsoring-Sub-Tab-Leisten (.sp-/.sr-/.st-/.sw-tab) waren für den früher
   DUNKLEN Hero gestylt (weiße Schrift auf transparent-weiß) → auf dem jetzt
   HELLEN Hero unlesbar (hell-auf-hell). Zentral korrigiert: inaktiv = dezent
   heller Chip mit lesbarer Schrift, aktiv = Marken-Pill. Betrifft alle
   Sponsoring-Seiten (Übersicht/Auswertung/Webseite/Landingpage/Entwürfe/
   Anfragen/Einstellungen); CSS liegt dort dupliziert, daher hier per !important. */
.sp-tab, .sr-tab, .st-tab, .sw-tab {
  background: var(--panel-elevated, #f1f5f9) !important;
  color: var(--text-muted, #475569) !important;
  border-color: var(--border, #e2e8f0) !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sp-tab:hover, .sr-tab:hover, .st-tab:hover, .sw-tab:hover {
  color: var(--brand, #7c3aed) !important;
  border-color: color-mix(in srgb, var(--brand, #7c3aed) 35%, var(--border, #e2e8f0)) !important;
}
.sp-tab.is-on, .sr-tab.is-on, .st-tab.is-on, .sw-tab.is-on {
  background: var(--brand, #7c3aed) !important;
  border-color: var(--brand, #7c3aed) !important;
  color: #fff !important;
}

/* „⋯"-Mehr-Button + die ins Aktionsblatt verschobenen Aktionen (JS-erzeugt) */
.app-hero-more {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong, #cbd5e1);
  background: var(--panel, #fff);
  color: var(--text, #0f172a);
  font-size: 1.35rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.app-hero-sheet-item {
  display: flex !important;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 50px;
  padding: .85rem .3rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text, #0f172a) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
.app-hero-sheet-item:last-child { border-bottom: 0 !important; }
.app-hero-sheet-item.is-active { color: var(--brand, #7c3aed) !important; font-weight: 800 !important; }
/* Gruppen-Überschrift im Seiten-Menü (Bereiche / Aktionen / Mehr) */
.app-menu-group {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted, #64748b);
  padding: .85rem .3rem .3rem;
}
.app-sheet-body > .app-menu-group:first-child { padding-top: .1rem; }
/* Aufklappbare Untergruppe im ⋯-Menü (z. B. Abrechnung / Werkzeuge) */
.app-menu-sub > summary.app-menu-sub-sum { cursor: pointer; list-style: none; }
.app-menu-sub > summary.app-menu-sub-sum::-webkit-details-marker { display: none; }
.app-menu-sub > summary.app-menu-sub-sum::after {
  content: "▾"; margin-left: auto; color: var(--text-muted, #64748b); font-size: .8rem;
}
.app-menu-sub[open] > summary.app-menu-sub-sum::after { content: "▴"; }
.app-menu-sub-item { padding-left: 1.5rem !important; font-weight: 500 !important; }
/* Hilfe-Inhalt im Modal (aus dem Modul-Hilfe-Panel geklont) */
.app-help-embed { margin: 0 !important; }
.app-help-embed .help-body { margin: 0 !important; }
/* Sub-Navigation, die ins ⋯-Menü gewandert ist, auf dem Handy ausblenden */
@media (max-width: 768px) { [data-collapsed-menu] { display: none !important; } }

/* Zurück-Button in der oberen Leiste (Handy) statt in eigener Zeile */
.navbar-back {
  color: #fff; text-decoration: none; flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.55rem; line-height: 1; border-radius: 999px;
  margin: 0 .15rem 0 -.4rem;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.navbar-back:hover, .navbar-back:active { color: #fff; background: rgba(255,255,255,.15); }
@media (max-width: 768px) { .app-backbar { display: none !important; } }

/* =========================================================================
   MOBILE TAB-BAR (E2) — feste Kern-Tabs (Start · Suche · Module · Mitteilungen ·
   Profil), heller App-Look. Nur ≤768px; Desktop nutzt die Top-Navbar.
   ========================================================================= */
.app-tabbar {
  position: fixed;
  -webkit-transform: translateZ(0); transform: translateZ(0); /* eigene Compositing-Ebene: verhindert das „Mitwandern" auf iOS */
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bottomnav, 1030);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: var(--panel, #fff);
  border-top: 1px solid var(--border, #e2e8f0);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 16px rgba(15,23,42,.07);
}
.app-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 2px 5px;
  min-height: 54px;
  color: var(--text-muted, #64748b);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.1;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.app-tab .ic { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1.1; }
.app-tab .ic .wc-i { width: 24px; height: 24px; vertical-align: 0; }
.app-tab .lbl {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-tab.active { color: var(--brand, #7c3aed); }
.app-tab.active .lbl { font-weight: 700; }
/* Aktiv-Indikator oben (dezenter Marken-Strich) */
.app-tab.active::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 26px; height: 3px;
  transform: translateX(-50%);
  background: var(--brand, #7c3aed);
  border-radius: 0 0 3px 3px;
}
/* Center-Tab „Module" als hervorgehobener Kreis */
.app-tab-center { justify-content: flex-start; }
.app-tab-center .lbl { margin-top: 1px; }
.app-tab-fab {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand, #7c3aed), color-mix(in srgb, var(--brand, #7c3aed) 62%, #000));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-14px);
  box-shadow: 0 8px 20px rgba(124,58,237,.4);
  margin-bottom: -12px;
}
.app-tab-center::before { display: none !important; }
.app-tab-badge {
  position: absolute;
  top: 5px;
  left: calc(50% + 6px);
  background: #dc2626;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.3;
  min-width: 16px;
  text-align: center;
  padding: .05rem .25rem;
  border-radius: 999px;
  display: none;
}
.app-tab-bell.has-unread .app-tab-badge { display: inline-block; }
@media (min-width: 769px) { .app-tabbar { display: none; } }

/* Inhalts-Abstand unten an die schlankere Tab-Bar anpassen (überschreibt die
   alten 180px aus header.php, die für den großen Home-Button reserviert waren) */
@media (max-width: 768px) {
  body.is-logged-in .app-main {
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
}

/* Modul-Drawer (Center-Tab) — Kachel-Grid im Bottom-Sheet */
.app-drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
}
@media (max-width: 360px) { .app-drawer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-drawer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .35rem;
  padding: .7rem .3rem;
  border-radius: var(--radius-md, 14px);
  background: var(--panel-elevated, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  color: var(--text, #0f172a);
  text-decoration: none;
  text-align: center;
  min-height: 78px;
}
.app-drawer-item:hover { border-color: var(--brand, #7c3aed); }
.app-drawer-item.active {
  border-color: var(--brand, #7c3aed);
  background: color-mix(in srgb, var(--brand, #7c3aed) 8%, var(--panel, #fff));
}
.app-drawer-item .ic { font-size: 1.35rem; line-height: 1; }
.app-drawer-item .lbl {
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

/* Knopf „Prozess & Anleitung“ in jedem Modul (layout/header.php) */
.prc-link-row[hidden] { display: none; }
.prc-link-row { display: flex; justify-content: flex-end; margin: -.2rem 0 .6rem; }
.prc-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .95rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--panel); color: var(--accent-text); font-weight: 700; font-size: .88rem; text-decoration: none; }
.prc-link:hover { background: var(--accent-soft); color: var(--accent-text-hover); }
.prc-link svg { width: 18px; height: 18px; }