/* ============================================================
   MITGEHN — Testlayout v2 (09.10.2026)
   Menüführung nach dem Vorbild des Länderkampf-Spiels, aber in den
   Farben und Schriften von Mitgehn. Reine Darstellungsschicht: wird
   NUR geladen, wenn body.layout-v2 gesetzt ist (Admin-Test), und
   fasst kein bestehendes CSS an.
   ============================================================ */

/* ---------- 1. Kopfleiste bleibt beim Scrollen stehen ---------- */
body.layout-v2 .nav{
  position: sticky; top: 0; z-index: 900;
  background: rgba(250,246,238,.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line, #ece3d3);
}

/* ---------- 2. Seitenleiste dichter ---------- */
/* Mehr Punkte ohne Scrollen: kleinere Abstaende, kompaktere Gruppen. */
body.layout-v2 .mg-sidebar{ padding-top: 14px; }
body.layout-v2 .mg-sb-item{
  padding: 7px 13px; font-size: 14px; border-radius: 10px; gap: 10px;
}
body.layout-v2 .mg-sb-item svg{ width: 19px; height: 19px; }
body.layout-v2 .mg-sb-sec{
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  margin: 14px 0 4px; padding: 0 13px; color: #a79f90;
}
body.layout-v2 .mg-sb-item.active{
  background: #eef4ef; color: #1f6b4c; font-weight: 700;
  box-shadow: inset 2px 0 0 #2f7d68;
}

/* ---------- 3. Handy-Menue als aufklappbare Gruppen ---------- */
/* Vorher eine lange Liste zum Scrollen. Jetzt sind die Gruppen zu und
   man tippt die auf, die man braucht - der Teil aus dem Laenderkampf,
   den Marco besser findet. */
@media (max-width: 1023px){
  body.layout-v2 .mobile-nav-panel{
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  body.layout-v2 .mobile-nav-panel .mob-section{
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
    margin: 6px 0 0; padding: 11px 14px;
    background: #f7f3ea; border-radius: 12px;
    font-size: 13px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: #5f6b62;
  }
  body.layout-v2 .mobile-nav-panel .mob-section::after{
    content: "\25BE"; font-size: 13px; color: #8a9183; transition: transform .18s ease;
  }
  body.layout-v2 .mobile-nav-panel .mob-section.zu::after{ transform: rotate(-90deg); }
  body.layout-v2 .mobile-nav-panel .v2-hidden{ display: none !important; }
  body.layout-v2 .mobile-nav-panel .mob-link{
    padding: 11px 16px; font-size: 15px; border-radius: 10px;
  }
  body.layout-v2 .mobile-nav-panel .mob-link:active{ background: #eef4ef; }
}

/* ---------- 4. Untere Tab-Leiste ruhiger ---------- */
body.layout-v2 .bottom-tab-bar{
  border-top: 1px solid var(--line, #ece3d3);
  box-shadow: 0 -2px 12px rgba(24,49,61,.05);
}
body.layout-v2 .bt-item.active{ color: #2f7d68; }
body.layout-v2 .bt-item.active svg{ stroke-width: 2.1; }

/* ---------- 5. Hinweisbalken, damit der Test erkennbar bleibt ---------- */
.v2-hinweis{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 2147482000;
  display: flex; align-items: center; gap: 10px;
  background: #18313d; color: #fff; border-radius: 99px;
  padding: 8px 14px; font-size: 12.5px;
  box-shadow: 0 6px 20px rgba(24,49,61,.28);
}
.v2-hinweis a{ color: #9fd9c3; font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (min-width: 1024px){ .v2-hinweis{ bottom: 20px; } }

/* ============================================================
   STUFE 2 (09.10.2026): Treffen-Karte nach dem "Gebaeude"-Muster
   aus dem Laenderkampf - aber hell und in Mitgehn-Farben.
   Leitgedanke: EINE Akzentfarbe (Gruen). Lila, Indigo, Violett und
   bunte Kategorie-Pillen werden eingeebnet; Farbe traegt nur noch
   Bedeutung (rot = voll, gruen = frei).
   ============================================================ */

/* --- Karte: klarer Rahmen statt Schatten, ruhiger Grund --- */
body.layout-v2 .ed-card{
  border: 1px solid #e6ddcc;
  border-radius: 16px;
  background: #fffdf9;
  box-shadow: none;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
body.layout-v2 .ed-card:hover{ border-color: #cfe0d6; transform: translateY(-2px); }

/* --- Kopfzeile: Titel links, Status rechts (wie "Stufe 4 / 30") --- */
body.layout-v2 .ed-title{
  font-size: 17px; line-height: 1.25; margin: 0;
  letter-spacing: -.01em;
}
body.layout-v2 .ed-body{ padding: 14px 16px 12px; }

/* --- Kategorie-Pille (02.11.2026 zurueckgenommen) -----------------
   War grau und in Grossbuchstaben. Zusammen mit den eingeebneten
   Datenzeilen wirkte die ganze Karte dadurch lustlos. Die Farbwelt je
   Kategorie aus feed.php bleibt jetzt erhalten.                      */
body.layout-v2 .ed-cat-pill{ font-size: 12px; }

/* --- Datenzeilen (02.11.2026 zurueckgenommen) ---------------------
   War: Pillen zu grauen Zeilen untereinander eingeebnet. Wirkte wie ein
   leeres Formular statt wie eine Einladung - die Karte sah lustlos aus.
   Die Pillen aus theme-editorial.css bleiben jetzt, wie sie sind, damit
   Testlayout und klassische Ansicht gleich einladend aussehen.
   Nur der Abstand nach oben bleibt etwas groesser.                   */
body.layout-v2 .ed-pills{ margin-top: 9px; }

/* --- Fusszeile: Teilnehmer links, Knoepfe rechts, klare Trennlinie --- */
body.layout-v2 .ed-foot{
  border-top: 1px solid #f2ede3;
  padding: 11px 16px;
  background: #fdfbf6;
}
body.layout-v2 .ed-parts-txt{ font-size: 12.5px; color: #6b7a73; }

/* --- Beliebtheits-Marken einebnen: zwei bunte Pillen waren zu viel --- */
body.layout-v2 .ed-foot span[title^="Beliebtheit"],
body.layout-v2 .ed-foot span[title^="Gesamt-Beliebtheit"]{
  background: #f2efe8 !important; color: #6b7a73 !important;
}

/* --- Knoepfe: genau EINER gefuellt, der Rest in Umrissen --- */
body.layout-v2 .ed-actions .btn-primary,
body.layout-v2 .ed-actions .ed-join{
  background: #2f7d68; border-color: #2f7d68; box-shadow: none;
}
body.layout-v2 .ed-actions .btn:not(.btn-primary):not(.ed-join){
  background: #fff; border: 1px solid #e3d9c6; color: #5f6b62; box-shadow: none;
}

/* --- Ausgebuchte Karten: nicht ausgrauen, sondern markieren --- */
body.layout-v2 .ed-card[style*="opacity"]{ opacity: 1 !important; }
body.layout-v2 .ed-card:has(.ed-pill-full){ background: #fdfaf6; border-color: #eadfcd; }

/* ---------- Stufe 3: Menue unten statt Burger oben ---------- */
body.layout-v2 .mobile-menu-btn{ display: none !important; }
@media (max-width: 1023px){
  /* Schublade von links statt Panel von unten - wie im Laenderkampf */
  body.layout-v2 .mobile-nav{ align-items: stretch; justify-content: flex-start; }
  body.layout-v2 .mobile-nav-panel{
    width: min(84vw, 330px); height: 100%; max-height: 100%;
    border-radius: 0 18px 18px 0; overflow-y: auto;
  }
}