/* Zeichen für die Rolle (templates/rolle_badge.html) und Banner des Eltern-Bereichs (templates/basis.html, static/js/banner.js).
   Immer Text und Symbol, nie nur Farbe; Kontrast jeweils über 7:1. Gilt im Lernbereich ebenso wie in der Verwaltung. */
.rolle-badge {
  display: inline-flex; align-items: center; gap: .3em; flex: none; white-space: nowrap;
  padding: .12rem .65rem; border-radius: 999px; border: 2px solid; font-size: .85rem; font-weight: 700; line-height: 1.35; letter-spacing: .01em; text-decoration: none;
}
.rolle-symbol { font-size: .95em; line-height: 1; }
.rolle-eltern { background: #e6f2de; color: #1d4a20; border-color: #3d7a3d; }                 /* ruhiges Grün wie die Verwaltung (Eltern, auch beim Üben) */
.rolle-admin { background: #1d3b73; color: #ffffff; border-color: #ffffff; }                   /* kräftiges Blau, deutlich anders (Verwaltung) */
.topbar-badge { margin-left: .25rem; }

/* In der Spielerwahl: unter dem Namen statt der Stufe */
.spieler-karte .rolle-badge { margin-top: .15rem; font-size: .8rem; }

/* Banner „Eltern-Bereich · schließt sich in N Minuten“ ganz oben im Inhalt des Eltern-Bereichs: schmal, ruhig, mit Text */
.eltern-banner {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  background: #e6f2de; color: #1d4a20; border-bottom: 1px solid #3d7a3d; padding: .3rem 1rem; font-size: .9rem; font-weight: 600;
}
.eltern-banner-knopf { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .85rem; --bs-btn-color: #1d4a20; --bs-btn-border-color: #3d7a3d; --bs-btn-hover-bg: #1d4a20; --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #1d4a20; --bs-btn-active-bg: #1d4a20; --bs-btn-active-color: #fff; }

/* Dezenter Knopf auf der Startseite (nur für Eltern) */
.eltern-link { display: inline-flex; align-items: center; gap: .35em; padding: .3rem .9rem; border-radius: 999px; border: 2px solid #3d7a3d; background: #fff; color: #1d4a20; font-size: .95rem; font-weight: 600; text-decoration: none; }
.eltern-link:hover { background: #e6f2de; color: #1d4a20; }
.eltern-link-zeile { text-align: center; margin: 1.75rem 0 .5rem; }

@media (max-width: 575.98px) {
  .rolle-badge { font-size: .78rem; padding: .08rem .5rem; gap: .2em; }
  .eltern-banner { padding: .3rem .75rem; font-size: .85rem; }
}

/* Schmale Titelleiste der Verwaltung (360 px): Platz für Name, Zeichen und Knöpfe schaffen */
@media (max-width: 420px) {
  body.verwaltung .topbar-avatar { display: none; }
  body.verwaltung .topbar-badge { margin-left: 0; }
}

/* Titelleiste des Lernbereichs auf dem Handy (360 px): mit dem Zeichen „Eltern“ rückt alles etwas enger zusammen */
@media (max-width: 575.98px) {
  .kopf-innen:has(.rolle-badge) { gap: .3rem; padding: 0 .6rem; }
  .kopf-innen .rolle-badge { font-size: .74rem; padding: .05rem .4rem; border-width: 1.5px; }
  .kopf-innen:has(.rolle-badge) .kopf-avatar { width: 44px; height: 44px; }
  .kopf-innen:has(.rolle-badge) .marke { font-size: 1.5rem; margin-right: 0; }
  .kopf-innen:has(.rolle-badge) .punkte-pille { margin-left: auto; }
}