/* ============ Kids-Beschreibung (mycuco.de/kids) ============
   Stil: dunkles Table-/Panel-Layout passend zur bestehenden Site
   (bg #0d1117, panel #161b22, border #30363d, mono Zeiten).
   Wird vom 100er-Clicker-Plugin eingebunden (clicker.php).
   Scoped auf .mvg-kids -> kein Konflikt mit Theme-CSS. */
.mvg-kids {
  --mvg-bg:#0d1117;
  --mvg-panel:#161b22;
  --mvg-panel-2:#1c2129;
  --mvg-border:#30363d;
  --mvg-border-soft:#21262d;
  --mvg-text:#c9d1d9;
  --mvg-heading:#f0f6fc;
  --mvg-muted:#8b949e;
  --mvg-accent:#58a6ff;
  --mvg-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  padding:24px 18px 48px;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--mvg-bg); color:var(--mvg-text);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.mvg-kids *,
.mvg-kids *::before,
.mvg-kids *::after { box-sizing:border-box; }

.mvg-kids .mvg-wrap { max-width:1120px; margin:0 auto; }

/* ---------- Kopfbereich wie Seiten-Header ---------- */
.mvg-kids .mvg-page-head { margin-bottom:18px; }
.mvg-kids .mvg-page-head h1 {
  margin:0 0 6px; font-size:22px; font-weight:600; color:var(--mvg-heading); letter-spacing:-0.01em;
}
.mvg-kids .mvg-page-head .mvg-meta {
  margin:0; font-size:13px; color:var(--mvg-muted);
}

/* ---------- Panel ---------- */
.mvg-kids .mvg-panel {
  background:var(--mvg-panel);
  border:1px solid var(--mvg-border);
  border-radius:8px;
  padding:16px 18px;
  margin-bottom:18px;
}
.mvg-kids .mvg-panel p { margin:0 0 10px; }
.mvg-kids .mvg-panel p:last-child { margin-bottom:0; }
.mvg-kids .mvg-panel strong { color:var(--mvg-heading); font-weight:600; }
.mvg-kids .mvg-intro { margin:0 0 10px; font-size:14px; color:var(--mvg-muted); }
.mvg-kids .mvg-section .mvg-intro:last-child { margin:10px 0 0; }
.mvg-kids a { color:var(--mvg-accent); text-decoration:none; }
.mvg-kids a:hover { text-decoration:underline; }

/* ---------- Sektion + Tabelle wie "Ablauf" ---------- */
.mvg-kids h2 {
  margin:0 0 10px; font-size:14px; font-weight:600; color:var(--mvg-heading);
}
.mvg-kids .mvg-section { margin-bottom:22px; }
.mvg-kids .mvg-table-scroll { overflow-x:auto; border:1px solid var(--mvg-border); border-radius:8px; background:var(--mvg-panel); }
.mvg-kids table { width:100%; border-collapse:collapse; font-size:14px; }
.mvg-kids thead th {
  text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--mvg-muted); padding:10px 14px; border-bottom:1px solid var(--mvg-border);
  white-space:nowrap;
}
.mvg-kids tbody td { padding:10px 14px; border-bottom:1px solid var(--mvg-border-soft); vertical-align:top; }
.mvg-kids tbody tr:last-child td { border-bottom:none; }
.mvg-kids .mvg-mono { font-family:var(--mvg-mono); font-size:13px; color:var(--mvg-muted); white-space:nowrap; }
.mvg-kids .mvg-name { color:var(--mvg-heading); font-weight:600; white-space:nowrap; }
.mvg-kids td.mvg-num { font-family:var(--mvg-mono); font-size:13px; white-space:nowrap; }

/* ---------- Aktions-Button im Stil des Players ---------- */
.mvg-kids .mvg-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.mvg-kids .mvg-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--mvg-panel-2); color:var(--mvg-text);
  border:1px solid var(--mvg-border); border-radius:8px;
  padding:9px 16px; font-size:14px; font-weight:600; line-height:1;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.mvg-kids .mvg-btn:hover { border-color:var(--mvg-accent); color:var(--mvg-accent); text-decoration:none; }
.mvg-kids .mvg-btn .mvg-triangle { font-size:11px; color:var(--mvg-accent); }

/* ---------- Inline-Tags ---------- */
.mvg-kids .mvg-tag {
  display:inline-block; padding:2px 8px; border-radius:999px;
  border:1px solid var(--mvg-border); background:var(--mvg-panel-2);
  font-size:12px; color:var(--mvg-muted); white-space:nowrap;
}

/* ---------- Fussnote wie Seiten-Ende ---------- */
.mvg-kids .mvg-foot { font-size:12px; color:var(--mvg-muted); }

@media (max-width:560px) {
  .mvg-kids { padding:16px 12px 36px; }
  .mvg-kids .mvg-page-head h1 { font-size:19px; }
  .mvg-kids .mvg-hide-sm { display:none; }
}