/* =========================================================
   Nachwuchswerk – App-Shell fürs Frontend (mobile-first)
   Topbar (3 Elemente) + Off-Canvas-Drawer von links
   ========================================================= */

/* Farben kommen aus assets/css/tokens.css. Hier stehen nur die Masse,
   die es ausschliesslich in der App gibt. */
:root{
  --mnd-drawer-w:288px; --mnd-topbar-h:58px;
}

/* ---------- Topbar ---------- */
.mnd-fe-topbar{
  /* Fest am oberen Rand verankert – der Menü-Button ist dadurch immer
     sichtbar, unabhängig vom Inhaltscontainer des Themes. Kein 100vw
     (das würde die Scrollleiste mitzählen und die Seite breiter machen). */
  position:fixed; top:0; left:0; right:0; z-index:99990;
  display:flex; align-items:center; gap:12px;
  height:var(--mnd-topbar-h);
  padding:0 12px; padding-top:env(safe-area-inset-top);
  background:#fff; border-bottom:1px solid var(--mnd-line);
  box-shadow:0 2px 10px rgba(20,24,33,.08);
  /* Absichtlich content-box: Der Sicherheitsabstand zum oberen Bildschirmrand
     (Gerät mit Aussparung) soll die Höhe VERGRÖSSERN, nicht den Inhalt stauchen.
     Diese Zeile ist die einzige bewusste Ausnahme vom Kastenmodell in tokens.css. */
  box-sizing:content-box;
}
/* Platz für die WordPress-Adminleiste lassen */
body.admin-bar .mnd-fe-topbar{top:32px;}
body.admin-bar .mnd-fe-drawer{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar .mnd-fe-topbar{top:46px;}
  body.admin-bar .mnd-fe-drawer{top:46px;}
}
.mnd-fe-burger{
  /* Q1.4: 44 px – der Menueknopf ist der meistgenutzte Knopf der App. */
  flex:0 0 auto; width:var(--mnd-touch,44px); height:var(--mnd-touch,44px); display:inline-flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  background:none; border:0; border-radius:10px; cursor:pointer; padding:0;
}
.mnd-fe-burger:hover{background:var(--mnd-bg);}
.mnd-fe-burger span{display:block; width:20px; height:2px; border-radius:2px; background:var(--mnd-ink); transition:transform .2s,opacity .2s;}
.mnd-fe-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mnd-fe-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.mnd-fe-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mnd-fe-brand{display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; text-decoration:none; color:var(--mnd-ink);}
.mnd-fe-brand img{height:32px; width:auto; flex:0 0 auto;}
.mnd-fe-brandtxt{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
/* Der Vereinsname muss in EINE Zeile – er ist der feste Punkt der Kopfleiste.
   Bricht er um, wandert alles darunter und die Leiste wird auf jeder Seite
   unterschiedlich hoch. Lieber etwas kleiner und vollständig lesbar. */
.mnd-fe-brandtxt strong{
  font-size:15px; font-weight:800; color:var(--mnd-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
@media (max-width:520px){ .mnd-fe-brandtxt strong{font-size:14px;} }
@media (max-width:400px){ .mnd-fe-brandtxt strong{font-size:13px;} }
/* Der Seitentitel darf zweizeilig stehen, aber NIE mitten im Wort brechen.
   Bis v12.7.0 stand hier `overflow-wrap:anywhere` – daher „Kriterienka/talog"
   und „Tauglichkei/t & Notfall". Zwei Zeilen sind in Ordnung, ein zerrissenes
   Wort nicht: Es kostet den Leser einen Moment, es wieder zusammenzusetzen. */
.mnd-fe-brandtxt small{
  font-size:12px; color:var(--mnd-mut); line-height:1.25;
  white-space:normal; overflow-wrap:break-word; word-break:normal; hyphens:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.mnd-fe-topact{
  position:relative; flex:0 0 auto; width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; color:var(--mnd-ink); text-decoration:none;
}
.mnd-fe-topact:hover{background:var(--mnd-bg); color:var(--mnd-red);}
.mnd-fe-topact .dashicons{font-size:22px; width:22px; height:22px;}
.mnd-fe-topact-empty{pointer-events:none;}
/* ---------- Abdunkelung ---------- */
.mnd-fe-scrim{
  position:fixed; inset:0; z-index:99991; background:rgba(15,19,26,.5);
  opacity:0; transition:none; backdrop-filter:saturate(.9) blur(1px);
}
.mnd-fe-scrim.is-open{opacity:1;}
.mnd-fe-scrim[hidden]{display:none;}

/* ---------- Drawer (immer links) ---------- */
.mnd-fe-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:99992;
  width:var(--mnd-drawer-w); max-width:86vw;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#7d0f1f 0%,#5d0b17 100%);
  color:#fff;
  transform:translateX(-100%);
  /* Vor dem ersten Bild darf nichts animieren, sonst faehrt das Menue beim
     Seitenaufbau einmal sichtbar aus und wieder ein. Die Uebergaenge werden
     erst freigeschaltet, wenn die Seite steht (Klasse mnd-app-ready). */
  transition:none;
  box-shadow:4px 0 24px rgba(0,0,0,.28);
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior:contain;
}
.mnd-fe-drawer.is-open{transform:translateX(0); visibility:visible;}
/* Ausgefahren wird nur verschoben - ohne visibility blieben alle Menuepunkte
   mit der Tabulatortaste erreichbar, obwohl das Menue zu ist. */
.mnd-fe-drawer{visibility:hidden;}
body.mnd-app-ready .mnd-fe-drawer{transition:transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s linear .26s;}
body.mnd-app-ready .mnd-fe-drawer.is-open{transition:transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s;}
body.mnd-app-ready .mnd-fe-scrim{transition:opacity .22s ease;}

.mnd-fe-drawer-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 12px 16px; border-bottom:1px solid rgba(255,255,255,.12);
}
.mnd-fe-drawer-head img{width:40px; height:40px; object-fit:contain; background:#fff; border-radius:10px; padding:2px; flex:0 0 auto;}
.mnd-fe-drawer-title{display:flex; flex-direction:column; line-height:1.2; flex:1 1 auto; min-width:0;}
.mnd-fe-drawer-title strong{font-size:16px; font-weight:800;}
.mnd-fe-drawer-title small{font-size:12px; color:rgba(255,255,255,.66);}
.mnd-fe-drawer-close{
  /* Auf die gemeinsame Größe gebracht (v6.8.1). Vorher fest 34 px - unter der
     sicher treffbaren Größe, und weil der Knopf im geschlossenen Menü liegt,
     fiel er bei den bisherigen Messungen durchs Raster. */
  flex:0 0 auto; width:var(--mnd-btn-h-sm); height:var(--mnd-btn-h-sm); border:0; border-radius:var(--mnd-r-sm); cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff; display:inline-flex; align-items:center; justify-content:center;
}
.mnd-fe-drawer-close:hover{background:rgba(255,255,255,.2);}
.mnd-fe-drawer-close .dashicons{font-size:19px; width:19px; height:19px;}

.mnd-fe-drawer-nav{flex:1 1 auto; overflow-y:auto; padding:12px 8px 16px; -webkit-overflow-scrolling:touch;}
.mnd-fe-dgroup{
  padding:16px 8px 6px; font-size:12px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.mnd-fe-dnav{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:12px 12px; margin-bottom:2px; border-radius:11px;
  color:rgba(255,255,255,.86); text-decoration:none; font-size:15px; font-weight:600;
  transition:background .15s,color .15s;
}
.mnd-fe-dnav .dashicons{font-size:19px; width:19px; height:19px; flex:0 0 auto; color:rgba(255,255,255,.72);}
.mnd-fe-dtxt{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mnd-fe-dnav:hover{background:rgba(255,255,255,.1); color:#fff;}
.mnd-fe-dnav:hover .dashicons{color:#fff;}
.mnd-fe-dnav.is-active{
  background:var(--mnd-red); color:#fff; box-shadow:0 4px 14px rgba(200,16,46,.4);
}
.mnd-fe-dnav.is-active .dashicons{color:#fff;}
.mnd-fe-dbadge{
  flex:0 0 auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:#fff; color:var(--mnd-red-dark); font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.mnd-fe-dnav.is-active .mnd-fe-dbadge{background:rgba(255,255,255,.95);}

.mnd-fe-drawer-foot{
  flex:0 0 auto; border-top:1px solid rgba(255,255,255,.12);
  padding:12px 12px 16px; background:rgba(0,0,0,.14);
}
.mnd-fe-acct{display:flex; align-items:center; gap:12px; margin-bottom:8px; min-width:0;}
.mnd-fe-avatar{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:var(--mnd-red); color:#fff; font-weight:800; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center;
}
.mnd-fe-acct-txt{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.mnd-fe-acct-txt strong{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mnd-fe-acct-txt small{font-size:12px; color:rgba(255,255,255,.6);}
.mnd-fe-logout{margin:0;}
.mnd-fe-logout-btn{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px; border:1px solid rgba(255,255,255,.24); border-radius:10px;
  background:rgba(255,255,255,.06); color:#fff; font-size:14px; font-weight:700; cursor:pointer;
}
.mnd-fe-logout-btn:hover{background:rgba(255,255,255,.16);}
.mnd-fe-logout-btn .dashicons{font-size:17px; width:17px; height:17px;}

/* Kein Scrollen im Hintergrund, solange der Drawer offen ist */
body.mnd-drawer-open{overflow:hidden;}

/* ---------- Inhaltsbereich ---------- */
.mnd-fe-app{max-width:1100px; margin:0 auto; padding:calc(var(--mnd-topbar-h) + 16px) 12px 48px; color:var(--mnd-ink); font-size:15px;}
@media(max-width:640px){
  .mnd-fe-app{padding:calc(var(--mnd-topbar-h) + 12px) 12px 32px;}
  :root{--mnd-topbar-h:54px;}
}

/* Der Drawer bleibt auf ALLEN Breiten ein Off-Canvas-Menü –
   der Menü-Button ist damit immer sichtbar und das Theme-Layout bleibt unberührt. */
@media(min-width:1200px){
  .mnd-fe-drawer{width:320px;}
  .mnd-fe-app{padding-left:24px; padding-right:24px;}
}

/* =========================================================
   Hub-Startseite: Hinweiskarte, Überschriften, Funktionskacheln
   ========================================================= */
.mnd-fe-h1{font-size:24px; font-weight:800; margin:2px 0 16px; color:var(--mnd-ink);}
.mnd-hub-h2{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mnd-mut); margin:24px 0 12px; padding-left:8px;
  border-left:4px solid var(--mnd-red); line-height:1.4;
}
.mnd-hub-h2 .dashicons{font-size:17px; width:17px; height:17px; color:var(--mnd-red);}

/* ---- Braucht Aufmerksamkeit ---- */
.mnd-hub-attn{
  background:#fff; border:1px solid var(--mnd-line); border-left:4px solid #e0a800;
  border-radius:12px; padding:12px 16px; margin-bottom:20px;
  box-shadow:0 2px 10px rgba(20,24,33,.05);
}
.mnd-hub-attn .mnd-hub-h2{margin:0 0 8px; border-left:0; padding-left:0; color:#a56a00;}
.mnd-hub-attn .mnd-hub-h2 .dashicons{color:#e0a800;}
.mnd-hub-attn-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.mnd-hub-attn-list li{display:flex; align-items:center; gap:8px; font-size:14px; min-width:0;}
.mnd-hub-attn-list .dashicons{font-size:18px; width:18px; height:18px; color:#e0a800; flex:0 0 auto;}
.mnd-hub-attn-txt{flex:1 1 auto; min-width:0;}
.mnd-hub-attn-btn{
  flex:0 0 auto; background:var(--mnd-red); color:#fff; text-decoration:none;
  padding:6px 12px; border-radius:8px; font-size:13px; font-weight:700;
}
.mnd-hub-attn-btn:hover{background:var(--mnd-red-dark); color:#fff;}

/* ---- Funktionskacheln ---- */
.mnd-hub-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
@media(min-width:700px){ .mnd-hub-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1100px){ .mnd-hub-grid{grid-template-columns:repeat(4,1fr);} }

.mnd-hub-tile{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:12px 12px; min-width:0;
  background:#fff; border:1px solid var(--mnd-line); border-radius:13px;
  text-decoration:none; color:var(--mnd-ink);
  box-shadow:0 1px 3px rgba(20,24,33,.05);
  transition:transform .12s, box-shadow .15s, border-color .15s;
}
.mnd-hub-tile:hover{
  transform:translateY(-2px); border-color:var(--ic,var(--mnd-red));
  box-shadow:0 8px 20px rgba(20,24,33,.11); color:var(--mnd-ink);
}
.mnd-hub-ic{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ic,var(--mnd-red,#c8102e)) 12%, #fff);
}
.mnd-hub-ic .dashicons{font-size:21px; width:21px; height:21px; color:var(--ic,var(--mnd-red,#c8102e));}
.mnd-hub-txt{display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.3;}
/* Kacheltexte duerfen umbrechen statt zu kuerzen.
   Vorher stand hier `nowrap` mit Auslassungspunkten - aus "Kader & Altersklassen"
   wurde "Kader & Altersk…". Auf einer Startseite soll man lesen koennen, wohin
   ein Feld fuehrt; zwei Zeilen sind dafuer der geringere Preis. Die Hoehe der
   Kachel faengt das ab (min-height weiter unten). */
.mnd-hub-txt strong{font-size:14px; font-weight:700; white-space:normal; overflow-wrap:break-word; hyphens:auto;}
.mnd-hub-txt small{font-size:12px; color:var(--mnd-mut); white-space:normal; overflow-wrap:break-word; hyphens:auto;}
.mnd-hub-badge{
  position:absolute; top:9px; right:9px; min-width:19px; height:19px; padding:0 4px;
  border-radius:10px; background:var(--mnd-red); color:#fff; font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
@media(max-width:380px){
  .mnd-hub-tile{flex-direction:column; align-items:flex-start; gap:8px;}
  .mnd-hub-txt strong{white-space:normal;}
  .mnd-hub-txt small{white-space:normal;}
}

/* ==== Schutzregel: Vereinslogo darf NIE übergroß dargestellt werden ==== */
.mnd-pub-logo,.mnd-pub-view-logo,.mnd-header-logo,.mnd-fe-brand img,.mnd-fe-drawer-head img{
  max-height:56px !important; width:auto !important; max-width:130px !important; object-fit:contain;
}
.mnd-fe-brand img{max-height:32px !important;}
.mnd-fe-drawer-head img{max-height:40px !important; max-width:40px !important;}

/* ==== Menü-Button & Drawer-Buttons: Theme-Button-Styles neutralisieren ==== */
.mnd-fe-topbar .mnd-fe-burger,
.mnd-fe-drawer .mnd-fe-drawer-close,
.mnd-fe-drawer .mnd-fe-logout-btn{
  -webkit-appearance:none !important; appearance:none !important;
  font:inherit !important; letter-spacing:normal !important; text-transform:none !important;
  box-shadow:none !important;
}
/* Tastaturbedienung braucht eine sichtbare Markierung. */
.mnd-fe-topbar .mnd-fe-burger:focus-visible,
.mnd-fe-drawer .mnd-fe-drawer-close:focus-visible,
.mnd-fe-drawer .mnd-fe-logout-btn:focus-visible{
  outline:3px solid #fff !important; outline-offset:2px !important;
}
.mnd-fe-topbar .mnd-fe-burger{
  background:transparent !important; border:0 !important; border-radius:10px !important;
  /* Q1.4: 44 px statt 42 – Mindestmass fuer die Bedienung mit dem Finger. */
  padding:0 !important; width:var(--mnd-touch,44px) !important; height:var(--mnd-touch,44px) !important; min-height:var(--mnd-touch,44px) !important;
  /* Der Aufbau der drei Striche muss erzwungen werden: manche Themes setzen
     button{display:block} - dann kleben die Striche zu einem Balken zusammen. */
  display:inline-flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important; gap:4px !important;
}
.mnd-fe-topbar .mnd-fe-burger:hover{background:var(--mnd-bg) !important;}
.mnd-fe-topbar .mnd-fe-burger span{
  background:var(--mnd-ink) !important; width:20px !important; height:2px !important;
  border-radius:2px !important; display:block !important; margin:0 !important; flex:0 0 auto !important;
}
.mnd-fe-drawer .mnd-fe-drawer-close{
  background:rgba(255,255,255,.12) !important; border:0 !important; color:#fff !important;
  border-radius:9px !important; padding:0 !important; width:34px !important; height:34px !important;
}
.mnd-fe-drawer .mnd-fe-drawer-close:hover{background:rgba(255,255,255,.24) !important;}
.mnd-fe-drawer .mnd-fe-logout-btn{
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.26) !important;
  color:#fff !important; border-radius:10px !important;
}
.mnd-fe-drawer .mnd-fe-logout-btn:hover{background:rgba(255,255,255,.2) !important;}

/* ===== v3.9.9 – Kein doppelter Leerraum über der App ===== */
/* Die App bringt ihre eigene fixierte Topbar mit. Theme-Kopf und die
   Elementor-Container-Abstände oberhalb des Inhalts werden entfernt, damit
   unter der Topbar kein großer Leerraum stehenbleibt. */
body:has(.mnd-fe-app) .elementor-location-header,
body:has(.mnd-fe-app) header.site-header,
body:has(.mnd-fe-app) .ehf-header{display:none !important;}
body:has(.mnd-fe-app) .page-content,
body:has(.mnd-fe-app) .page-content > .elementor,
body:has(.mnd-fe-app) .elementor > .e-con,
body:has(.mnd-fe-app) .e-con > .e-con-inner,
body:has(.mnd-fe-app) .elementor-widget-shortcode,
body:has(.mnd-fe-app) .elementor-shortcode{padding-top:0 !important; margin-top:0 !important;}
/* ---------- „Als App speichern“-Vorschlag ---------- */
.mnd-pwa-install{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:99999;
  max-width:440px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
  padding:12px 12px;
  background:#fff; border:1px solid var(--mnd-line); border-radius:16px;
  box-shadow:0 14px 40px rgba(20,24,33,.18);
  transform:translateY(140%); opacity:0;
  transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
.mnd-pwa-install.is-in{transform:translateY(0); opacity:1;}
.mnd-pwa-ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--mnd-red); color:#fff;
}
.mnd-pwa-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.mnd-pwa-txt strong{font-size:14px; color:var(--mnd-ink); line-height:1.25;}
.mnd-pwa-txt span{font-size:13px; color:var(--mnd-mut); line-height:1.4;}
.mnd-pwa-txt em{font-style:normal; font-weight:600; color:var(--mnd-ink);}
.mnd-pwa-share{display:inline-block; transform:translateY(1px); font-weight:700;}
.mnd-pwa-btns{flex:0 0 auto; display:flex; flex-direction:column; gap:6px; align-items:stretch;}
.mnd-pwa-yes{
  background:var(--mnd-red); color:#fff; border:0; border-radius:10px;
  padding:8px 12px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap;
}
.mnd-pwa-yes:hover{background:var(--mnd-red-dark);}
.mnd-pwa-no{
  background:transparent; color:var(--mnd-mut); border:0; border-radius:10px;
  padding:6px 8px; font-size:13px; cursor:pointer;
}
.mnd-pwa-no:hover{color:var(--mnd-ink); background:var(--mnd-bg);}
@media(max-width:420px){
  .mnd-pwa-install{gap:8px; padding:12px 12px;}
  .mnd-pwa-ico{width:38px; height:38px;}
  .mnd-pwa-txt strong{font-size:14px;}
}

/* App-Hintergrundbild (v4.29.0) */
.mnd-bg-layer{ position:fixed; inset:0; z-index:0; background-position:center; pointer-events:none; }
.mnd-bg-layer.is-scroll{ position:absolute; height:100%; min-height:100vh; }
.mnd-fe-app{ position:relative; z-index:1; }
.mnd-fe-topbar{ z-index:60; }

/* Seitenabschnitts-Leiste (Scroll-Rail, v4.29.0) */
.mnd-rail{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:8px; padding:8px 6px; border-right:2px solid color-mix(in srgb, var(--mnd-red) 25%, transparent); }
.mnd-rail-item{ display:flex; align-items:center; justify-content:flex-end; gap:8px; text-decoration:none; min-height:14px; }
.mnd-rail-tick{ width:14px; height:3px; border-radius:2px; background:rgba(107,122,144,.45); transition:all .2s; flex:0 0 auto; order:2; }
.mnd-rail-lbl{ order:1; font-size:12px; color:var(--mnd-mut,#6b7a90); background:rgba(255,255,255,.92); border:1px solid var(--mnd-line,#e5e7eb); border-radius:8px; padding:2px 8px; white-space:nowrap; opacity:0; transform:translateX(6px); transition:all .2s; pointer-events:none; }
.mnd-rail:hover .mnd-rail-lbl{ opacity:1; transform:none; }
.mnd-rail-item.is-active .mnd-rail-tick{ background:var(--mnd-red,#c8102e); width:22px; height:4px; }
.mnd-rail-item.is-active .mnd-rail-lbl{ opacity:1; transform:none; color:var(--mnd-red); font-weight:700; border-color:color-mix(in srgb, var(--mnd-red) 35%, transparent); }
/* Tablet: mittelgroß */
@media(max-width:1100px){
  .mnd-rail{ right:0; gap:8px; }
  .mnd-rail-tick{ width:11px; }
  .mnd-rail-item.is-active .mnd-rail-tick{ width:17px; }
  .mnd-rail-lbl{ font-size:12px; }
}
/* Mobile: klein, aktives Label direkt sichtbar */
@media(max-width:700px){
  .mnd-rail{ right:0; gap:6px; padding:6px 4px; border-right-width:1.5px; }
  .mnd-rail-tick{ width:8px; height:2.5px; }
  .mnd-rail-item.is-active .mnd-rail-tick{ width:13px; height:3px; }
  .mnd-rail-lbl{ display:none; }
  .mnd-rail-item.is-active .mnd-rail-lbl{ display:block; opacity:1; font-size:12px; padding:0px 6px; }
}

/* Panels über dem Hintergrundbild: Milchglas-Optik (v4.29.0) */
.mnd-fe-app .mnd-panel, .mnd-fe-app .mnd-hub-attn{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; }
.mnd-fe-app .mnd-hub-attn{ padding:12px 16px; }
/* Überschriften außerhalb der Kacheln: lesbar auf dunklem Hintergrundbild */
.mnd-fe-app > h2, .mnd-hub-h2, .mnd-ts-head h2, .mnd-ts-head small{ text-shadow:0 1px 4px rgba(255,255,255,.85), 0 0 12px rgba(255,255,255,.5); }

/* Topbar-Badges: Postfach rot (oben links), Chat blau (unten links) – v4.30.0 */
.mnd-fe-topact{ position:relative; }
.mnd-fe-pbadge{ position:absolute; top:-4px; left:-6px; right:auto; min-width:17px; height:17px; border-radius:9px; background:#c8102e; color:#fff; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; line-height:1; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.mnd-fe-cbadge{ position:absolute; bottom:-4px; left:-6px; min-width:17px; height:17px; border-radius:9px; background:#2264d1; color:#fff; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; line-height:1; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.mnd-fe-drawer .mnd-fe-nav-start, .mnd-fe-drawer .mnd-fe-nav-start .dashicons{ color:inherit; }

/* Layout-Editor v2 (v4.31.0) */
.mnd-l2-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:start; }
.mnd-l2-grid > *{ grid-column:span 6; min-width:0; }
.mnd-l2-grid > .mnd-l2-half{ grid-column:span 3; }
.mnd-l2-grid > .mnd-l2-third{ grid-column:span 2; }
.mnd-l2-grid > .mnd-l2-two{ grid-column:span 4; }
@media(max-width:900px){ .mnd-l2-grid > *{ grid-column:span 6 !important; } }
.mnd-l2-toggle{ position:fixed; right:18px; bottom:26px; z-index:99990; display:inline-flex; align-items:center; gap:6px; background:#374151; color:#fff; border:0; border-radius:24px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 5px 16px rgba(0,0,0,.3); }
.mnd-l2-toggle:hover{ background:#1f2430; }
.mnd-l2-actions{ position:fixed; right:18px; bottom:26px; z-index:99991; display:flex; gap:8px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:8px 8px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.mnd-l2-actions button{ border:1px solid #e5e7eb; background:#fff; border-radius:9px; padding:6px 12px; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.mnd-l2-actions .mnd-l2-save{ background:var(--mnd-red,#c8102e); border-color:var(--mnd-red,#c8102e); color:#fff; }
.mnd-l2-editing .mnd-l2-item{ outline:2px dashed rgba(200,16,46,.5); outline-offset:3px; cursor:grab; position:relative; }
.mnd-l2-editing .mnd-l2-item.is-drag{ opacity:.5; }
.mnd-l2-bar{ display:flex; align-items:center; gap:6px; background:#1f2430; color:#fff; border-radius:8px; padding:4px 8px; margin-bottom:8px; width:max-content; }
.mnd-l2-grip{ cursor:grab; font-size:14px; letter-spacing:1px; }
.mnd-l2-w{ border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; border-radius:6px; padding:2px 8px; font-size:12px; font-weight:700; cursor:pointer; }
.mnd-l2-w.is-on{ background:var(--mnd-red,#c8102e); border-color:var(--mnd-red,#c8102e); }


/* ==== Sprungleiste am Handy: wieder da, aber anders (v6.9.0) ====
   In v4.42 wurde sie hier ausgeblendet - mit gutem Grund: Die Striche waren nur
   8 x 2,5 px groß, unbeschriftet und klebten am Rand; beim Scrollen mit dem
   Daumen lösten sie ungewollt aus.

   Dieser Grund ist entfallen. Die Leiste hat jetzt einen 36 px großen Griff,
   der zeigt, dass sich etwas öffnen lässt; die Striche selbst sind am Handy
   ausgeblendet, solange sie zugeklappt ist - es gibt also nichts mehr, was
   versehentlich getroffen werden könnte. Aufgeklappt sind die Einträge 44 px
   hoch und beschriftet. */
@media (max-width:700px) {
	.mnd-rail { right:0; padding:0; border-right:0; }
	.mnd-rail:not(.is-open) .mnd-rail-item { display:none; }
	.mnd-rail.is-open .mnd-rail-lbl { display:block; opacity:1; font-size:12px; padding:2px 8px; }
	.mnd-rail.is-open .mnd-rail-item { min-height:var(--mnd-touch); }
}
@media (max-width:900px), (pointer:coarse) {
  .mnd-fe-drawer .mnd-fe-drawer-close { width:var(--mnd-touch); height:var(--mnd-touch); }
}

/* Der Installations-Hinweis darf die schwebenden Knöpfe nicht verdecken. */
.mnd-pwa-tip { bottom:96px !important; }

/* ===========================================================================
 * Benutzermenü oben rechts (v6.32.0)
 *
 * Das eigene Konto gehört an den Rand, nicht ins Fachmenü. Bewusst schlicht:
 * ein rundes Bild, ein Klick, drei Zeilen. Die Fläche ist 44 px groß, damit
 * sie auch mit dem Daumen sicher zu treffen ist.
 * ========================================================================= */
.mnd-fe-user{position:relative;flex:0 0 auto;}
.mnd-fe-userbtn{
	width:var(--mnd-touch,44px);height:var(--mnd-touch,44px);padding:0;border:0;background:transparent;
	display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;
}
/* ► v12.7.0 – der Konto-Knopf war unsichtbar.
 *
 *   Das ganze Element war für eine ROTE Kopfleiste gebaut: weißer Rand, weiße
 *   Schrift auf 22 % Weiß, weißer Fokusring. Die Kopfleiste ist aber weiß.
 *   Ergebnis auf dem Handy: ein weißer Kreis auf weißem Grund – man sah nicht,
 *   ob und als wer man angemeldet ist.
 *
 *   Das ist der teuerste Fehler dieser Art, weil er ausgerechnet die Frage
 *   unbeantwortet lässt, die man sich in einem Rechtesystem am häufigsten
 *   stellt: „Wer bin ich hier gerade?"
 *
 *   Jetzt trägt der Kreis die Vereinsfarbe – sichtbar, und die Initialen
 *   stehen kontrastreich darauf.
 */
.mnd-fe-userbtn:focus-visible{outline:2px solid var(--mnd-red,#c8102e);outline-offset:2px;}
.mnd-fe-useravatar{
	width:32px;height:32px;border-radius:50%;object-fit:cover;display:flex;
	align-items:center;justify-content:center;
	border:2px solid var(--mnd-line,#dbe3ee);
	flex:0 0 auto;
}
.mnd-fe-userini{
	background:var(--mnd-red,#c8102e); color:#fff;
	border-color:var(--mnd-red,#c8102e);
	font-weight:800; font-size:13px; letter-spacing:.02em;
}
.mnd-fe-usermenu{
	position:absolute;top:calc(100% + 6px);right:0;min-width:230px;z-index:120;
	background:#fff;border:1px solid #dbe3ee;border-radius:12px;
	box-shadow:0 12px 32px rgba(16,24,40,.18);overflow:hidden;
}
.mnd-fe-usermenu[hidden]{display:none;}
.mnd-fe-userhead{padding:12px 14px;border-bottom:1px solid #eef2f7;background:#f7f9fc;}
.mnd-fe-userhead strong{display:block;color:#1f2430;font-size:14px;overflow-wrap:break-word;}
.mnd-fe-userhead small{color:#6b7a90;font-size:12px;}
.mnd-fe-useritem{
	display:flex;align-items:center;gap:10px;width:100%;min-height:var(--mnd-touch,44px);
	padding:0 14px;border:0;background:transparent;text-align:left;cursor:pointer;
	color:#28303c;text-decoration:none;font-size:14px;
}
.mnd-fe-useritem:hover,.mnd-fe-useritem:focus{background:#f2f6fb;color:#28303c;}
.mnd-fe-useritem .dashicons{color:#6b7a90;flex:0 0 auto;}
.mnd-fe-userform{margin:0;border-top:1px solid #eef2f7;}
.mnd-fe-userlogout{color:#a3172c;}
.mnd-fe-userlogout .dashicons{color:#a3172c;}