/**
 * GameReader App-Rahmen (M4) – Design "Vereinsheim" (Variante A).
 * Tokens aus dem Prototyp (prototype/index.html). !important auf
 * Buttons/Links wegen Theme-Overrides (bekannter ruhipro-Gotcha).
 */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Nunito:wght@500;600;700;800&display=swap');

.gra {
  --gra-cream: #FBF3E8;
  --gra-cream2: #F7ECDB;
  --gra-coral: #DA5C30;
  --gra-coral-d: #B8481F;
  --gra-tint: #FBEADF;
  --gra-soft: #F3D3C2;
  --gra-navy: #202C3A;
  --gra-ink: #262523;
  --gra-muted: #807C72;
  --gra-good: #3B9E63;
  --gra-star: #F2B33C;
  --gra-line: rgba(38, 37, 35, .10);
  --gra-display: 'Fredoka', system-ui, sans-serif;
  --gra-body: 'Nunito', system-ui, sans-serif;
  display: flex;
  min-height: 78vh;
  background: linear-gradient(180deg, var(--gra-cream), var(--gra-cream2));
  border-radius: 22px;
  overflow: hidden;
  font-family: var(--gra-body);
  color: var(--gra-ink);
  border: 1px solid var(--gra-line);
}

/* ---- Sidebar (Desktop) ---- */
.gra-side {
  flex: 0 0 208px;
  background: var(--gra-navy);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
}

.gra-logo {
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 21px;
  color: #fff !important;
  text-decoration: none !important;
  padding: 2px 12px 18px;
  display: block;
}

.gra-logo span { color: var(--gra-coral); }

.gra-nav { display: flex; flex-direction: column; gap: 3px; }

.gra-nv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: #B9C3CE !important;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}

.gra-nv svg { width: 20px; height: 20px; flex: 0 0 20px; }
.gra-nv:hover { background: rgba(255, 255, 255, .07); color: #fff !important; }
.gra-nv.on { background: var(--gra-coral); color: #fff !important; }
.gra-side-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .09); }

.gra-legallinks { margin-top: 10px; padding: 0 10px; display: flex; align-items: center; gap: 6px; font-size: 11px; }
.gra-legallinks a { color: #7C8899; text-decoration: none; }
.gra-legallinks a:hover { color: #fff; text-decoration: underline; }
.gra-legallinks span { color: #4E5A6B; }

/* ---- Rechtstexte (Datenschutz/Impressum) ---- */
.gra-legal { max-width: 760px; }
.gra-legal h2 { font-size: 16px; font-weight: 800; color: var(--gra-navy); margin: 26px 0 8px; }
.gra-legal h2:first-child { margin-top: 0; }
.gra-legal p { font-size: 14px; line-height: 1.6; color: #333; margin: 0 0 10px; }
.gra-legal ul { margin: 0 0 10px; padding-left: 20px; }
.gra-legal li { font-size: 14px; line-height: 1.6; color: #333; margin-bottom: 4px; }

/* ---- Inhalt ---- */
.gra-main {
  flex: 1;
  min-width: 0;
  padding: 26px 30px 34px;
}

.gra-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.gra-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gra-coral-d);
  margin-bottom: 5px;
}

.gra-title {
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.08;
  color: var(--gra-ink);
  margin: 0;
}

.gra-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.gra-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid rgba(38, 37, 35, .13);
  border-radius: 22px;
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gra-ink);
}

.gra-chip svg { width: 15px; height: 15px; color: var(--gra-coral); }

/* ---- Hero (Empfehlung) ---- */
.gra-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--gra-navy);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 16px;
  text-decoration: none !important;
  transition: transform .14s, box-shadow .14s;
}

.gra-hero:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(32, 44, 58, .25); }

.gra-hero-thumb {
  position: relative;
  flex: 0 0 108px;
  height: 64px;
  border-radius: 12px;
  background: #39485C;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gra-hero-thumb video,
.gra-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gra-hero-play { position: absolute; width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

.gra-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gra-hero-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #E8A98F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gra-hero-title { font-family: var(--gra-display); font-weight: 500; font-size: 17px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gra-hero-sub { font-size: 12px; font-weight: 700; color: #B9C3CE; }

.gra-btn {
  display: inline-block;
  border: 0 !important;
  border-radius: 13px !important;
  padding: 11px 18px !important;
  font-family: var(--gra-body);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.gra-btn.coral { background: var(--gra-coral) !important; color: #fff !important; }
.gra-btn.coral:hover { background: var(--gra-coral-d) !important; }
.gra-btn.soft { background: #EFE9DE !important; color: var(--gra-ink) !important; }

/* ---- Karten ---- */
.gra-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; }
.gra-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }

.gra-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--gra-line);
  border-radius: 18px;
  padding: 16px;
  text-decoration: none !important;
  color: var(--gra-ink) !important;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}

.gra-card:hover { border-color: var(--gra-soft); box-shadow: 0 10px 24px rgba(40, 28, 12, .08); transform: translateY(-1px); }

.gra-ico {
  flex: 0 0 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--gra-tint);
  color: var(--gra-coral-d);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gra-ico.navy { background: #E7EDF4; color: var(--gra-navy); }
.gra-ico svg { width: 24px; height: 24px; }
.gra-card-body { flex: 1; min-width: 0; }
.gra-card-body h3 { font-family: var(--gra-display); font-weight: 500; font-size: 18px; margin: 0; color: var(--gra-ink); }
.gra-card-body p { font-size: 12.7px; color: var(--gra-muted); line-height: 1.4; margin: 3px 0 0; font-weight: 600; }
.gra-go { color: var(--gra-coral); }
.gra-go svg { width: 20px; height: 20px; }

/* ---- Open-Lab: Spielfeld ---- */
.gra-oblayout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }

.gra-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, #46855A 0 25%, #3E7A4E 25% 50%, #46855A 50% 75%, #3E7A4E 75%);
  border-radius: 16px;
  border: 1px solid rgba(38, 37, 35, .18);
  overflow: hidden;
}

.gra-pitch-box { position: absolute; inset: 12px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 6px; }
.gra-pitch-goalbox { position: absolute; left: 50%; bottom: 12px; width: 46%; height: 17%; border: 2px solid rgba(255, 255, 255, .55); border-bottom: 0; transform: translateX(-50%); }
.gra-pitch-mid { position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: rgba(255, 255, 255, .55); }
.gra-pitch-circle { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%; transform: translate(-50%, -50%); }

.gra-pos {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #fff !important;
  color: var(--gra-navy) !important;
  border-radius: 22px !important;
  padding: 6px 11px !important;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: transform .12s, background .12s;
}

.gra-pos:hover { transform: translate(-50%, -50%) scale(1.12); }
.gra-pos.on { background: var(--gra-coral) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .65), 0 2px 8px rgba(0, 0, 0, .3); }

.gra-hint { font-size: 12.5px; color: var(--gra-muted); font-weight: 600; margin: 10px 2px 0; }
.gra-hint a { color: var(--gra-coral-d) !important; font-weight: 800; }

/* ---- Open-Lab: Filter + Clips ---- */
.gra-filterrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.gra-filter { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gra-muted); }

.gra-filter select {
  border: 1px solid rgba(38, 37, 35, .16) !important;
  background: #fff !important;
  color: var(--gra-ink) !important;
  border-radius: 11px !important;
  padding: 8px 10px !important;
  font-family: var(--gra-body);
  font-size: 13px;
  font-weight: 700;
  min-width: 130px;
}

.gra-clipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px; }

/* Sortier-Leiste über den Clips */
.gra-clipbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gra-clipbar .gra-sectionlabel { margin: 16px 0 8px; }
.gra-sortrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gra-sortlbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gra-muted); }
.gra-sortchip {
  font-size: 12.5px; font-weight: 700; color: var(--gra-muted);
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--gra-line);
  background: #fff; text-decoration: none !important; transition: background .15s, color .15s, border-color .15s;
}
.gra-sortchip:hover { color: var(--gra-ink); border-color: var(--gra-muted); }
.gra-sortchip.on { background: var(--gra-coral); border-color: var(--gra-coral); color: #fff; }

/* Gruppen-Überschrift innerhalb des Clip-Grids */
.gra-clipgroup {
  grid-column: 1 / -1;
  margin: 6px 0 -2px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--gra-ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--gra-line);
}
.gra-clipgroup:first-child { margin-top: 0; }

.gra-clip {
  display: block;
  background: #fff;
  border: 1px solid var(--gra-line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--gra-ink) !important;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}

.gra-clip:hover { border-color: var(--gra-soft); box-shadow: 0 10px 24px rgba(40, 28, 12, .08); transform: translateY(-1px); }

.gra-clip-thumb { position: relative; display: block; height: 104px; background: var(--gra-navy); overflow: hidden; }
.gra-clip-thumb video,
.gra-clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gra-clip-type {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--gra-coral);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 12px;
  padding: 3px 8px;
}

.gra-clip-body { display: block; padding: 10px 12px 12px; }
.gra-clip-body b { display: block; font-size: 13px; font-weight: 800; line-height: 1.3; }
.gra-clip-body i { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--gra-muted); margin-top: 3px; }

.gra-empty { background: #fff; border: 1px dashed rgba(38, 37, 35, .2); border-radius: 16px; padding: 26px; text-align: center; }
.gra-empty h3 { font-family: var(--gra-display); font-weight: 500; font-size: 18px; margin: 0 0 4px; }
.gra-empty p { font-size: 13px; color: var(--gra-muted); font-weight: 600; margin: 0 0 14px; }

.gra-note {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--gra-line);
  border-radius: 14px;
  padding: 13px 16px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gra-ink);
}

.gra-note svg { width: 20px; height: 20px; color: var(--gra-coral); flex: 0 0 20px; }

/* ---- Statistik ---- */
.gra-metric { background: #fff; border: 1px solid var(--gra-line); border-radius: 16px; padding: 14px 16px; }
.gra-metric span { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gra-muted); }
.gra-metric b { display: block; font-family: var(--gra-display); font-weight: 600; font-size: 24px; margin: 2px 0; }
.gra-metric i { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--gra-muted); }
.gra-metric.coral b { color: var(--gra-coral-d); font-size: 17px; line-height: 1.2; padding: 5px 0; }
.gra-metric.coral i a { color: var(--gra-coral-d) !important; font-weight: 800; }

.gra-panel { background: #fff; border: 1px solid var(--gra-line); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.gra-panel h3 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gra-muted); margin: 0 0 12px; font-family: var(--gra-body); }

.gra-bars { display: flex; align-items: flex-end; gap: 14px; min-height: 110px; }
.gra-bar { flex: 1; text-align: center; min-width: 0; }
.gra-bar-track { height: 84px; display: flex; align-items: flex-end; }
.gra-bar-fill { width: 100%; border-radius: 7px 7px 0 0; background: var(--gra-coral); min-height: 4px; }
.gra-bar-fill.mid { background: #E8926B; }
.gra-bar-fill.low { background: var(--gra-soft); }
.gra-bar-label { font-size: 10px; font-weight: 800; color: var(--gra-muted); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gra-bar-val { font-size: 11px; font-weight: 800; color: var(--gra-ink); }

.gra-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 340px; }
.gra-zone { border-radius: 10px; padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 800; background: var(--gra-cream2); color: var(--gra-muted); }
.gra-zone b { display: block; font-size: 15px; color: var(--gra-ink); font-family: var(--gra-display); font-weight: 600; }
.gra-zone.hot { background: var(--gra-tint); }
.gra-zone.hot b { color: var(--gra-coral-d); }

/* ---- Schwerpunkt-Karten (Decision/Skills/Taktik mit Erklärung) ---- */
.gra-swrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 6px; }

.gra-sw {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #fff !important;
  border: 1px solid rgba(38, 37, 35, .14) !important;
  color: var(--gra-ink) !important;
  border-radius: 14px !important;
  padding: 13px 15px !important;
  text-decoration: none !important;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}

.gra-sw b { font-family: var(--gra-display); font-weight: 500; font-size: 16px; }
.gra-sw span { font-size: 11.5px; font-weight: 700; color: var(--gra-muted); line-height: 1.35; }
.gra-sw:hover { transform: translateY(-1px); border-color: var(--gra-soft) !important; box-shadow: 0 8px 20px rgba(40, 28, 12, .08); }
.gra-sw.on { background: var(--gra-coral) !important; border-color: var(--gra-coral) !important; }
.gra-sw.on b { color: #fff; }
.gra-sw.on span { color: #FBEADF; }

/* ---- Kategorie-Karten (Ober-/Unterkategorie mit Erklärung) ---- */
.gra-sectionlabel {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gra-muted);
  margin: 16px 0 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.gra-sectionlabel small { text-transform: none; letter-spacing: normal; font-weight: 700; }
.gra-sectionlabel small a { color: var(--gra-coral-d); text-decoration: none; }

.gra-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gra-catgrid.small { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.gra-cat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #fff !important;
  border: 1px solid var(--gra-line) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  text-decoration: none !important;
  color: var(--gra-ink) !important;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}

.gra-cat:hover { border-color: var(--gra-soft) !important; box-shadow: 0 8px 20px rgba(40, 28, 12, .08); transform: translateY(-1px); }
.gra-cat b { font-family: var(--gra-display); font-weight: 500; font-size: 15px; }
.gra-cat span { font-size: 11.5px; color: var(--gra-muted); font-weight: 700; line-height: 1.35; }
.gra-cat.on { border: 2px solid var(--gra-coral) !important; background: var(--gra-tint) !important; }
.gra-cat.on b { color: var(--gra-coral-d); }

/* ---- Team-Lab ---- */
.gra-teamlist { display: flex; flex-direction: column; gap: 10px; }

.gra-teamcard { background: #fff; border: 1px solid var(--gra-line); border-radius: 16px; padding: 14px 16px; }
.gra-teamhead { display: flex; align-items: center; gap: 12px; }
a.gra-teamhead.link { text-decoration: none !important; color: inherit !important; margin: -14px -16px; padding: 14px 16px; border-radius: 16px; }
a.gra-teamhead.link:hover { background: var(--gra-cream2); }
.gra-teambadge {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gra-coral);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 13px;
}
.gra-teambadge.navy { background: var(--gra-navy); }
.gra-teaminfo { flex: 1; min-width: 0; }
.gra-teaminfo b { display: block; font-size: 15px; font-weight: 800; }
.gra-teaminfo i { display: block; font-style: normal; font-size: 12px; color: var(--gra-muted); font-weight: 700; margin-top: 2px; }
.gra-teaminfo code { background: var(--gra-cream2); border-radius: 6px; padding: 1px 6px; font-weight: 800; color: var(--gra-coral-d); }

.gra-pending { border-top: 1px solid var(--gra-line); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.gra-pendingrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.gra-pendingrow span { flex: 1; }
.gra-pendingrow .gra-btn { padding: 7px 12px !important; font-size: 12px; }

/* ---- Bibliothek ---- */
.gra-tablewrap { padding: 6px 0 0; overflow-x: auto; }

.gra-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gra-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gra-muted);
  padding: 8px 14px;
  border-bottom: 1px solid var(--gra-line);
}

.gra-table td { padding: 10px 14px; border-bottom: 1px solid var(--gra-line); vertical-align: middle; }
.gra-table tr:last-child td { border-bottom: 0; }
.gra-table tr:hover td { background: var(--gra-cream); }

.gra-td-title { display: flex; align-items: center; gap: 10px; font-weight: 800; min-width: 200px; }
.gra-mini-thumb { flex: 0 0 56px; height: 34px; border-radius: 8px; background: var(--gra-navy); overflow: hidden; }
.gra-mini-thumb video { width: 100%; height: 100%; object-fit: cover; }
.gra-td-meta { color: var(--gra-muted); font-weight: 700; font-size: 12px; }
.gra-td-actions { white-space: nowrap; text-align: right; }
.gra-td-actions .gra-btn { padding: 7px 12px !important; font-size: 12px; margin-left: 6px; }

.gra-clip-type.static { position: static; display: inline-block; }

.gra-status { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: 12px; padding: 4px 9px; white-space: nowrap; }
.gra-status.ok { background: #E5F3EA; color: #2C7A4B; }
.gra-status.off { background: #EFEAE0; color: var(--gra-muted); }
.gra-status.mid { background: #FBEEDD; color: var(--gra-coral-d); }

/* ---- Formulare (Profil) ---- */
.gra-form { max-width: 440px; background: #fff; border: 1px solid var(--gra-line); border-radius: 18px; padding: 20px 22px; }
.gra-form .form-item { margin: 0 0 16px; }
.gra-form label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gra-muted); margin-bottom: 5px; }
.gra-form select {
  width: 100%;
  border: 1px solid rgba(38, 37, 35, .18) !important;
  background: #fff !important;
  color: var(--gra-ink) !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  font-family: var(--gra-body);
  font-size: 14.5px;
  font-weight: 700;
}
.gra-form .description { font-size: 12px; color: var(--gra-muted); font-weight: 600; margin-top: 5px; }
.gra-form .gra-btn { width: 100%; text-align: center; font-size: 15px; padding: 14px !important; }

/* Mobil-Ersatz für Statistik in der Bottom-Nav (Profil/Anmelden). Auf
   Desktop unsichtbar, da dort schon unten in der Sidebar vorhanden.
   WICHTIG: diese Regel muss VOR der @media-Sektion stehen, sonst
   überschreibt sie (gleiche Spezifität, später im Code) die mobile
   "display: flex"-Regel auch auf dem Handy. */
.gra-nv-mobileauth { display: none; }

/* Drupal-Adminleiste (Toolbar-Modul) auf dem Handy ausblenden – die brauchen
   wir in der App nicht, sie kostet nur Platz und sorgt für unnötiges Scrollen.
   Betrifft ohnehin nur Admin-Nutzer (nur die haben die Berechtigung, die
   Leiste überhaupt zu sehen); normale Spieler sehen sie nie. */
@media (max-width: 899px) {
  #toolbar-administration { display: none !important; }
  body.toolbar-fixed { margin-top: 0 !important; }
  body.toolbar-horizontal.toolbar-fixed { padding-top: 0 !important; }
}

/* ---- Mobil: Bottom-Nav ---- */
@media (max-width: 899px) {
  .gra { flex-direction: column; border-radius: 16px; }
  /* Bottom-Nav fest am unteren Bildschirmrand – bleibt beim Scrollen sichtbar. */
  .gra-side {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    order: 2;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    border-radius: 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
  }
  .gra-logo { display: none; }
  .gra-nav { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
  .gra-nv { flex-direction: column; gap: 4px; font-size: 10.5px; padding: 7px 10px; border-radius: 11px; }
  /* Profil/Login/Rechtliches raus aus der Bottom-Nav-Leiste (Fußzeile);
     stattdessen ersetzt „Profil"/„Anmelden" den Statistik-Eintrag ganz
     rechts direkt in der Leiste – hält die Zeile auf einer Reihe. */
  .gra-side-foot { display: none; }
  .gra-nv-statistik { display: none; }
  .gra-nv-mobileauth { display: flex; }
  .gra-nv-mobileauth .gra-userbadge { width: 20px; height: 20px; border-radius: 50%; background: var(--gra-coral); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  /* Platz lassen, damit Inhalt nicht hinter der fixen Leiste verschwindet. */
  .gra-main { padding: 18px 16px calc(84px + env(safe-area-inset-bottom)); order: 1; }
  .gra-title { font-size: 23px; }
  .gra-oblayout { grid-template-columns: 1fr; }
  .gra-pitchwrap { max-width: 340px; margin: 0 auto; }
  .gra-hero { flex-direction: column; align-items: stretch; gap: 12px; }
  .gra-hero-thumb { flex: 0 0 auto; width: 100%; height: 150px; }
  .gra-hero-eyebrow { white-space: normal; overflow: visible; text-overflow: clip; }
  .gra-hero-title { white-space: normal; overflow: visible; text-overflow: clip; }
  .gra-hero .gra-btn.coral { align-self: flex-start; }
  .gra-uebung { flex-wrap: wrap; }
  .gra-uebung-txt { flex: 1 1 100%; order: -1; }
  .gra-summetrics { flex-wrap: wrap; }
}

/* ---- Übung starten (Session/Playlist) ---- */
.gra-uebung {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 4px;
  padding: 14px 16px;
  background: var(--gra-tint);
  border: 1px solid var(--gra-soft);
  border-radius: 16px;
}
.gra-uebung-ico {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--gra-coral);
  color: #fff;
}
.gra-uebung-ico svg { width: 20px; height: 20px; }
.gra-uebung-txt { display: flex; flex-direction: column; gap: 2px; }
.gra-uebung-txt b { font-family: var(--gra-display); font-weight: 600; font-size: 16px; color: var(--gra-navy); }
.gra-uebung-txt span { font-size: 12.5px; font-weight: 600; color: var(--gra-muted); }
.gra-uebung-count { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gra-muted); }
.gra-uebung-count input {
  width: 68px;
  border: 1px solid rgba(38, 37, 35, .18) !important;
  background: #fff !important;
  color: var(--gra-ink) !important;
  border-radius: 10px !important;
  padding: 9px 10px !important;
  font-family: var(--gra-body);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
.gra-uebung .gra-btn { white-space: nowrap; }
.gra-uebung.muted { opacity: .72; }
.gra-uebung.muted .gra-uebung-ico { background: var(--gra-muted); }

/* Prominente Platzierung ganz oben (Hauptmechanik), volle Breite. */
.gra-uebung-hero { margin: 4px 0 18px; }
.gra-uebung-hero .gra-uebung {
  margin: 0;
  padding: 16px 18px;
  background: linear-gradient(180deg, #fff, var(--gra-tint));
  border: 1px solid var(--gra-soft);
  box-shadow: 0 6px 18px rgba(218, 92, 48, .08);
}
.gra-uebung-hero .gra-uebung-txt b { font-size: 17px; }

/* Schwierigkeits-Auswahl (Standbild / Kurz / Echtzeit) */
.gra-uebung-modus { display: inline-flex; background: rgba(38, 37, 35, .06); border-radius: 12px; padding: 3px; gap: 2px; }
.gra-seg { position: relative; cursor: pointer; margin: 0; }
.gra-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.gra-seg span { display: block; padding: 8px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 800; color: var(--gra-muted); white-space: nowrap; transition: background .15s, color .15s; }
.gra-seg input:checked + span { background: #fff; color: var(--gra-coral-d); box-shadow: 0 1px 4px rgba(38, 37, 35, .12); }
.gra-seg input:focus-visible + span { outline: 2px solid var(--gra-coral); outline-offset: 1px; }

/* ---- Team-Lab: Detail / Aufgaben / Auswertung ---- */
.gra-backlink, .gra-backbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gra-coral-d) !important;
  text-decoration: none !important;
  margin-bottom: 10px;
  padding: 7px 13px 7px 11px;
  background: #EFE9DE;
  border: 1px solid var(--gra-line);
  border-radius: 999px;
  transition: background .15s, border-color .15s, transform .05s;
}
.gra-backlink:hover, .gra-backbtn:hover { background: var(--gra-tint); border-color: var(--gra-soft); }
.gra-backlink:active, .gra-backbtn:active { transform: translateY(1px); }
.gra-sub { font-size: 13px; font-weight: 600; color: var(--gra-muted); margin: 4px 0 0; }
.gra-codebox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--gra-tint); border: 1px solid var(--gra-soft); border-radius: 14px; padding: 12px 16px; margin: 6px 0 16px; }
.gra-codebox > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gra-muted); }
.gra-codebox code { font-family: var(--gra-display); font-weight: 600; font-size: 22px; letter-spacing: .12em; color: var(--gra-navy); }
.gra-codebox i { font-style: normal; font-size: 12px; color: var(--gra-muted); flex: 1 1 100%; }
.gra-memberlist, .gra-evallist { display: flex; flex-direction: column; gap: 8px; }
.gra-memberrow, .gra-evalrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--gra-line); border-radius: 12px; padding: 10px 13px; }
.gra-memberrow b, .gra-evalrow b { font-size: 14px; }
.gra-memberrow .gra-status, .gra-evalrow .gra-status { margin-left: auto; }
/* Auswertung je Aufgabe: Reaktionszeit-Chip + Antwort/Freitext-Block je Spieler. */
.gra-evalrow .gra-evalrt { font-size: 11.5px; font-weight: 800; color: var(--gra-muted); white-space: nowrap; }
.gra-evalvalue {
  flex: 1 1 100%;
  margin: 2px 0 0 42px;
  background: var(--gra-cream2);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gra-ink);
  line-height: 1.4;
}
.gra-evalvalue.quote { font-style: italic; }
.gra-evalvalue.quote::before { content: '„'; } .gra-evalvalue.quote::after { content: '"'; }
/* Playlist-Auswertung: kleine Richtig/Falsch-Quadrate je Clip + Score-Zeile. */
.gra-evalsquares { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.gra-sq {
  width: 20px; height: 20px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff; flex: 0 0 auto;
}
.gra-sq.ok { background: var(--gra-good); }
.gra-sq.off { background: var(--gra-coral); }
.gra-sq.neutral { background: #D8D2C6; }
.gra-evalscore { flex: 1 1 100%; font-size: 12.5px; font-weight: 700; color: var(--gra-muted); }
.gra-evalscore b { color: var(--gra-ink); }
.gra-evaldetails { flex: 1 1 100%; }
.gra-evaldetails summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--gra-coral); list-style: none; padding: 2px 0; }
.gra-evaldetails summary::-webkit-details-marker { display: none; }
.gra-evaldetails summary::before { content: '▸ '; }
.gra-evaldetails[open] summary::before { content: '▾ '; }
.gra-evaldetails .gra-evalvalue { margin-top: 6px; }
.gra-evalcorrect { color: var(--gra-coral-d); font-weight: 700; font-style: normal; }
.gra-asglist { display: flex; flex-direction: column; gap: 8px; }
.gra-asgcard { display: block; background: #fff; border: 1px solid var(--gra-line); border-radius: 14px; padding: 12px 14px; text-decoration: none !important; color: var(--gra-ink) !important; }
a.gra-asgcard:hover { border-color: var(--gra-soft); }
.gra-asghead { display: flex; align-items: center; gap: 8px; }
.gra-asghead b { font-size: 15px; flex: 1; }
.gra-asgcard i { display: block; font-style: normal; font-size: 12.5px; color: var(--gra-muted); margin-top: 2px; }
.gra-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gra-coral-d); background: var(--gra-tint); border-radius: 20px; padding: 2px 8px; }
.gra-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.gra-progress-track { flex: 1; height: 7px; border-radius: 6px; background: rgba(38, 37, 35, .10); overflow: hidden; }
.gra-progress-fill { display: block; height: 100%; background: var(--gra-coral); border-radius: 6px; }
.gra-progress-val { font-size: 12px; font-weight: 800; color: var(--gra-muted); }
.gra-asgplay { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--gra-coral-d); }
.gra-asgcard.is-done { opacity: .72; }
.gra-empty.small { padding: 16px; text-align: left; }
.gra-empty.small p { margin: 0 0 8px; }
a.gra-teamcard.link { text-decoration: none !important; color: inherit !important; }

/* ---- Übungs-Auswertung ---- */
.gra-sumcard {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--gra-line);
  border-radius: 20px;
  padding: 22px 24px;
  margin: 8px 0 16px;
  flex-wrap: wrap;
}
.gra-sumring {
  flex: 0 0 128px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
  background: var(--gra-good);
}
.gra-sumring.mid { background: var(--gra-star); }
.gra-sumring.low { background: var(--gra-coral); }
.gra-sumring b { font-family: var(--gra-display); font-weight: 600; font-size: 38px; line-height: 1; }
.gra-sumring b i { font-style: normal; font-size: 20px; }
.gra-sumring span { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .92; margin-top: 4px; }
.gra-summetrics { display: flex; gap: 30px; flex: 1; }
.gra-summetric b { display: block; font-family: var(--gra-display); font-weight: 600; font-size: 24px; color: var(--gra-navy); }
.gra-summetric span { font-size: 12.5px; font-weight: 600; color: var(--gra-muted); }
.gra-sumacts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }


/* ===== Clip-Upload / Aufgabe anlegen ===== */
/* Hauptweg-Kachel „Eigenen Clip hochladen". */
.gra-uploadcta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--gra-coral);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(218, 92, 48, .28);
  transition: filter .12s, transform .12s;
}
.gra-uploadcta:hover { filter: brightness(1.04); transform: translateY(-1px); }
.gra-uploadcta-plus {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}
.gra-uploadcta-txt { display: flex; flex-direction: column; gap: 2px; }
.gra-uploadcta-txt b { font-family: var(--gra-display); font-weight: 600; font-size: 17px; }
.gra-uploadcta-txt i { font-style: normal; font-size: 12.5px; opacity: .92; }
.gra-or { display: flex; align-items: center; text-align: center; margin: 16px 0 6px; color: var(--gra-muted); }
.gra-or::before, .gra-or::after { content: ""; flex: 1; height: 1px; background: var(--gra-line); }
.gra-or span { padding: 0 12px; font-size: 12.5px; font-weight: 700; }

/* Kontextuelle Erklärung je Aufgabenart. */
.gra-typehelp {
  background: var(--gra-tint);
  border-left: 3px solid var(--gra-coral);
  border-radius: 10px;
  padding: 10px 13px;
  margin: 8px 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gra-ink);
}

/* Formular-Abschnitte im geführten Clip-Formular. */
.gra-clipform fieldset {
  border: 1px solid var(--gra-line);
  border-radius: 14px;
  padding: 14px 16px 4px;
  margin: 0 0 16px;
  background: #fff;
}
.gra-clipform legend {
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--gra-navy);
  padding: 0 6px;
}
.gra-clipform .fieldset__description,
.gra-clipform .form-item__description,
.gra-clipform .description { color: var(--gra-muted); font-size: 12px; }
.gra-clipform details {
  border: 1px solid var(--gra-line);
  border-radius: 14px;
  padding: 6px 16px;
  margin: 0 0 16px;
  background: #fff;
}
.gra-clipform summary { font-family: var(--gra-display); font-weight: 600; color: var(--gra-navy); cursor: pointer; padding: 8px 0; }

/* Aufgabenart als Karten-Grid (clipform.js baut sie aus dem Select). */
.gra-hidden-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.gra-fmtgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.gra-fmtcard {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  cursor: pointer;
  border: 1.5px solid var(--gra-line);
  background: #fff;
  border-radius: 14px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.gra-fmtcard:hover { border-color: var(--gra-soft); }
.gra-fmtcard b { font-family: var(--gra-display); font-weight: 600; font-size: 14.5px; color: var(--gra-navy); }
.gra-fmtcard span { font-size: 12px; line-height: 1.4; color: var(--gra-muted); }
.gra-fmtcard.on {
  border-color: var(--gra-coral);
  background: var(--gra-tint);
  box-shadow: 0 6px 16px rgba(218, 92, 48, .16);
}
.gra-fmtcard.on b { color: var(--gra-coral-d); }

/* Video-Vorschau im Clip-Formular. */
.gra-clip-preview {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--gra-line);
  border-radius: 14px;
  background: var(--gra-cream);
}
.gra-clip-preview video {
  width: 100%;
  max-height: 340px;
  border-radius: 10px;
  background: #000;
  display: block;
}
.gra-preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gra-pauseout { font-weight: 700; font-size: 13px; color: var(--gra-coral-d); }
.gra-preview-hint { margin: 8px 0 0; font-size: 12px; color: var(--gra-muted); }
/* "Alle auswählen" über der Liste bereits hochgeladener Dateien (Bulk-Upload). */
.gra-selectall { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--gra-ink); cursor: pointer; }
.gra-selectall input { width: 16px; height: 16px; accent-color: var(--gra-coral); }

/* Aufgabe anlegen: Playlist-Formular. */
.gra-form fieldset {
  border: 1px solid var(--gra-line);
  border-radius: 14px;
  padding: 14px 16px 6px;
  margin: 0 0 16px;
  background: #fff;
}
.gra-form legend {
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--gra-navy);
  padding: 0 6px;
}
.gra-cliplist {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--gra-line);
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--gra-cream);
}
.gra-cliplist .form-type-checkbox,
.gra-cliplist .js-form-type-checkbox { padding: 3px 0; }

/* ===== Trainer-Steuerung: Dashboard, Ankündigungen, Co-Trainer ===== */
.gra-toolrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.gra-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Dashboard-Rangliste */
.gra-dash { display: flex; flex-direction: column; gap: 8px; }
.gra-dashrow {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--gra-line);
  border-radius: 14px;
  padding: 12px 14px;
}
.gra-dashrow.behind { border-color: var(--gra-soft); background: var(--gra-tint); }
.gra-dashrank {
  flex: 0 0 auto;
  width: 24px;
  text-align: center;
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--gra-muted);
}
.gra-dashwho { flex: 1; min-width: 0; }
.gra-dashwho b { display: block; font-family: var(--gra-display); font-weight: 600; font-size: 15px; color: var(--gra-navy); }
.gra-dashwho i { font-style: normal; font-size: 12.5px; color: var(--gra-muted); }
.gra-behind { color: var(--gra-coral-d); font-weight: 700; }
.gra-dashmetrics { display: flex; gap: 16px; flex: 0 0 auto; }
.gra-dashmetric { text-align: center; }
.gra-dashmetric b { display: block; font-family: var(--gra-display); font-weight: 600; font-size: 18px; color: var(--gra-navy); }
.gra-dashmetric i { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gra-muted); }

/* Gamification: Wochen-Rangliste (Trainer-Dashboard + Spieler-Team-Tab). */
.gra-lboard { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.gra-lrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--gra-line); border-radius: 14px; padding: 10px 14px;
}
.gra-lrow.leader { border-color: var(--gra-star); background: linear-gradient(90deg, #FFF7E6, #fff); }
.gra-lrow.me { border-color: var(--gra-coral); }
.gra-lrank { flex: 0 0 auto; width: 24px; text-align: center; font-family: var(--gra-display); font-weight: 700; font-size: 15px; color: var(--gra-muted); }
.gra-lrow.leader .gra-lrank { font-size: 18px; }
.gra-lname { font-family: var(--gra-display); font-weight: 600; font-size: 14.5px; color: var(--gra-navy); }
.gra-lbadge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--gra-star); color: #5A3E00; border-radius: 12px; padding: 3px 9px; }
.gra-lpoints { margin-left: auto; font-size: 13px; color: var(--gra-muted); white-space: nowrap; }
.gra-lpoints b { font-family: var(--gra-display); font-weight: 700; color: var(--gra-navy); font-size: 16px; }
.gra-lsub { font-style: normal; font-size: 11.5px; color: var(--gra-muted); white-space: nowrap; }

/* Ankündigungen */
.gra-newslist { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.gra-newsitem {
  background: #fff;
  border: 1px solid var(--gra-line);
  border-left: 3px solid var(--gra-coral);
  border-radius: 12px;
  padding: 11px 14px;
}
.gra-newsmeta { font-size: 11.5px; font-weight: 700; color: var(--gra-muted); margin-bottom: 4px; }
.gra-newstext { font-size: 14px; line-height: 1.45; color: var(--gra-ink); }
.gra-newsdel { color: var(--gra-coral-d); margin-left: 8px; font-weight: 700; text-decoration: none; }
.gra-newsdel:hover { text-decoration: underline; }

/* ===== Clip-Kacheln mit Video-Vorschau (Playlist-Auswahl + Bibliothek) ===== */
.gra-picksection {
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--gra-navy);
  margin: 14px 2px 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gra-pickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
  /* Kacheln nur so hoch wie ihr Inhalt – sonst zeigt sich unten ein weißer
     Streifen der gestreckten Kachel. */
  align-items: start;
}
.gra-tile {
  position: relative;
  margin: 0 !important;
  border: 1.5px solid var(--gra-line);
  border-radius: 14px;
  background: var(--gra-cream2);
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.gra-tile:hover { border-color: var(--gra-soft); }
.gra-tile.on { border-color: var(--gra-coral); box-shadow: 0 6px 16px rgba(218, 92, 48, .18); }
/* Auswahl-Häkchen oben rechts */
.gra-tile input[type="checkbox"] {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--gra-coral);
}
.gra-tile label { display: block; margin: 0; cursor: pointer; }
.gra-tilevid-wrap {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #0d1117;
  cursor: pointer;
}
/* Vorschaubild und (erst beim Antippen geladenes) Video liegen deckungsgleich. */
.gra-tilevid,
.gra-tilethumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.gra-tilevid { z-index: 1; }
.gra-tileplay {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  pointer-events: none;
  transition: opacity .15s;
}
.gra-tile.playing .gra-tileplay { opacity: 0; }
.gra-tilebody { padding: 8px 10px 10px; }
.gra-tilebody b { display: block; font-family: var(--gra-display); font-weight: 600; font-size: 13px; color: var(--gra-navy); line-height: 1.25; }
.gra-tilebody i { font-style: normal; font-size: 11px; color: var(--gra-muted); }
.gra-pickwrap summary { font-family: var(--gra-display); font-weight: 600; color: var(--gra-navy); cursor: pointer; padding: 8px 0; }

/* ===== Kachel-Text im Marken-Design ===== */
.gra-tilebody {
  display: block;
  padding: 9px 11px 11px;
  background: linear-gradient(180deg, var(--gra-cream), var(--gra-cream2));
  border-top: 2px solid var(--gra-coral-soft);
}
.gra-tilevid-wrap { display: block; }
.gra-tilebody i { display: block; }
.gra-tilebody b {
  display: block;
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--gra-navy);
  line-height: 1.25;
  margin-bottom: 2px;
}
.gra-tilebody i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gra-coral-d);
}
.gra-tile.on .gra-tilebody { background: var(--gra-tint); border-top-color: var(--gra-coral); }

/* ===== Aufgabe anlegen: Drei-Wege-Buttons ===== */
.gra-choosegrid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.gra-choosebtn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--gra-coral);
  border: 2px solid var(--gra-coral);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(218, 92, 48, .20);
  transition: transform .12s, filter .12s, box-shadow .12s;
}
.gra-choosebtn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.gra-choosebtn .gra-choose-ic {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.gra-choose-tx { display: flex; flex-direction: column; gap: 2px; }
.gra-choosebtn b { font-family: var(--gra-display); font-weight: 600; font-size: 17px; color: #fff; }
.gra-choosebtn i { font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .9); }
.gra-choosebtn.on { box-shadow: 0 0 0 3px rgba(32, 44, 58, .20), 0 8px 20px rgba(218, 92, 48, .25); filter: brightness(.95); }
.gra-choosebtn.on .gra-choose-ic { background: rgba(255, 255, 255, .38); }

.gra-choosepanel { display: none; margin-bottom: 18px; }
.gra-choosepanel.open { display: block; }

/* ===== Bibliothek: Auswahl-Leiste ===== */
.gra-tilecheck {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--gra-coral);
}
.gra-libbar {
  position: sticky;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--gra-navy);
  color: #fff;
  box-shadow: 0 12px 30px rgba(38, 37, 35, .28);
  opacity: .55;
  pointer-events: none;
  transition: opacity .15s;
}
.gra-libbar.active { opacity: 1; pointer-events: auto; }
.gra-libbar-txt { font-size: 14px; font-weight: 700; }
.gra-libbar .gra-libcount { font-family: var(--gra-display); font-size: 18px; color: var(--gra-star); }

/* ===== Formulare im Marken-Stil (Clip-Upload, Aufgabe anlegen, Team …) ===== */
.gra-form { max-width: 680px; }

/* Text/Zahl/Datum/Textarea – einheitlich wie die Selects. */
.gra-form input[type="text"],
.gra-form input[type="number"],
.gra-form input[type="date"],
.gra-form input[type="search"],
.gra-form input[type="email"],
.gra-form textarea {
  width: 100%;
  border: 1px solid rgba(38, 37, 35, .18) !important;
  background: #fff !important;
  color: var(--gra-ink) !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  font-family: var(--gra-body);
  font-size: 14.5px;
  font-weight: 600;
  box-sizing: border-box;
}
.gra-form textarea { resize: vertical; min-height: 62px; line-height: 1.45; }
.gra-form input:focus,
.gra-form select:focus,
.gra-form textarea:focus {
  outline: none;
  border-color: var(--gra-coral) !important;
  box-shadow: 0 0 0 3px var(--gra-tint);
}
.gra-form input::placeholder,
.gra-form textarea::placeholder { color: #b3ad9f; font-weight: 500; }

/* Fieldsets als saubere Karten; Legende als „eingekerbte" Überschrift,
   damit sie nicht mehr über dem Rand liegt. */
.gra-form fieldset {
  border: 1px solid var(--gra-line);
  border-radius: 16px;
  padding: 8px 18px 14px;
  margin: 0 0 18px;
  background: #fff;
  min-width: 0;
}
.gra-form legend {
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--gra-coral-d);
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 10px;
  background: #fff;
  border-radius: 8px;
}
.gra-form fieldset > .fieldset-wrapper,
.gra-form fieldset > .fieldset__wrapper { padding-top: 4px; }

/* Datei-Upload aufgeräumt. */
.gra-form .form-managed-file,
.gra-form .js-form-managed-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gra-form input[type="file"] { font-family: var(--gra-body); font-size: 13px; font-weight: 600; }

/* Checkboxen/Radios lesbar (Label nicht in Großbuchstaben). */
.gra-form input[type="checkbox"],
.gra-form input[type="radio"] { accent-color: var(--gra-coral); width: 17px; height: 17px; vertical-align: -3px; }
.gra-form .form-type-checkbox label,
.gra-form .form-type-radio label,
.gra-form .js-form-type-checkbox label,
.gra-form .js-form-type-radio label {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--gra-ink);
  font-size: 13.5px;
  margin: 0 0 0 6px;
}

/* Aufklappbereiche (Rückmeldung / Optionen). */
.gra-form details {
  border: 1px solid var(--gra-line);
  border-radius: 14px;
  background: #fff;
  padding: 2px 16px;
  margin: 0 0 18px;
}
.gra-form summary {
  font-family: var(--gra-display);
  font-weight: 600;
  color: var(--gra-navy);
  cursor: pointer;
  padding: 11px 0;
  list-style-position: inside;
}

/* ===== Aufgabe anlegen: zweistufige Auswahl ===== */
.gra-hide { display: none !important; }
.gra-uploadlink { display: inline-block; margin-top: 6px; color: var(--gra-coral-d); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.gra-uploadlink:hover { text-decoration: underline; }

/* Öffentliche Bibliothek: Titel-Liste mit ausklappbarer Vorschau (lazy). */
.gra-librows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.gra-librow {
  position: relative;
  margin: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--gra-line);
  border-radius: 12px;
  background: #fff;
}
.gra-librow input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.gra-librow label { display: flex !important; align-items: center; flex-wrap: wrap; gap: 10px; flex: 1; margin: 0 !important; text-transform: none; letter-spacing: 0; cursor: pointer; }
.gra-librow-txt { display: flex; flex-direction: column; }
.gra-librow-txt b { font-family: var(--gra-display); font-weight: 600; font-size: 14px; color: var(--gra-navy); }
.gra-librow-txt i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gra-coral-d); }
.gra-libprev { margin-left: auto; color: var(--gra-coral-d); font-weight: 700; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.gra-libprev:hover { text-decoration: underline; }
.gra-libvid { flex-basis: 100%; display: none; }
.gra-libvid.open { display: block; }
.gra-libvid video { width: 100%; max-width: 360px; border-radius: 10px; background: #000; margin-top: 4px; }

.gra-assignback {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--gra-coral-d);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.gra-assignback:hover { text-decoration: underline; }
.gra-selbar {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--gra-tint);
  color: var(--gra-ink);
  font-size: 13.5px;
  font-weight: 700;
}
.gra-selbar .gra-selcount { font-family: var(--gra-display); font-size: 17px; color: var(--gra-coral-d); }
.gra-assignpanel .gra-pickgrid { margin-bottom: 16px; }
.gra-asgnote { display: block; margin-top: 4px; font-size: 13px; color: var(--gra-ink); font-weight: 600; }

/* ===== Aufgabe bearbeiten / löschen ===== */
.gra-btn.danger { background: var(--gra-bad, #D8483C); color: #fff; border: 0; }
.gra-btn.danger:hover { filter: brightness(1.05); }
.gra-btn.danger-soft { background: #fff; color: #C0392B; border: 1px solid rgba(192, 57, 43, .35); }
.gra-btn.danger-soft:hover { background: rgba(192, 57, 43, .06); }
.gra-confirm { background: #fff; border: 1px solid var(--gra-line); border-radius: 16px; padding: 20px 22px; max-width: 560px; }
.gra-confirm p { margin: 0 0 16px; color: var(--gra-ink); font-size: 14.5px; line-height: 1.5; }
.gra-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Team löschen (Trainer) / Team verlassen (Spieler). */
.gra-dangerzone { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--gra-line); text-align: right; }
.gra-dangerlink { font-size: 12.5px; font-weight: 700; color: #C0392B; text-decoration: none; }
.gra-dangerlink:hover { text-decoration: underline; }
.gra-teamleave { font-size: 12px; font-weight: 700; color: #C0392B; text-decoration: none; margin-left: auto; }
.gra-teamleave:hover { text-decoration: underline; }

/* Bibliothek: Zuweisen-Leiste auch oben (nicht klebend). */
.gra-libbar-top { position: static; opacity: 1; pointer-events: auto; margin: 0 0 16px; box-shadow: 0 4px 14px rgba(38,37,35,.16); }

/* Öffentliche Bibliothek nach Kategorie gruppiert. */
.gra-libgroups { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.gra-libcat {
  margin: 10px 0 2px;
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gra-coral-d);
}
.gra-libgroups .gra-libcat:first-child { margin-top: 0; }

/* Aufgabe anlegen: Kategorien erst als Überschrift, Klick klappt Videos auf. */
.gra-libcatgroup { margin-bottom: 4px; }
.gra-libcat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--gra-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--gra-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gra-coral-d);
}
.gra-libcat:hover { border-color: var(--gra-soft); }
.gra-libcat::after { content: "▾"; font-size: 12px; transition: transform .15s; }
.gra-libcat.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gra-libcat.open::after { transform: rotate(180deg); }
.gra-libcatgroup .gra-librows { margin-top: 0; padding: 6px; border: 1px solid var(--gra-line); border-top: 0; border-radius: 0 0 12px 12px; }

/* ---- Bibliothek-Hub (rollenabhängig): Open-Lab + Team-Gruppen ---- */
.gra-libsection { margin: 12px 0; }
.gra-libh2 {
  font-family: var(--gra-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--gra-navy);
  margin: 22px 2px 8px;
}
/* Verschachtelte Untergruppen (Oberkategorien innerhalb Open-Lab) etwas einrücken. */
.gra-libsub { margin: 8px 0; }
.gra-libsub > .gra-libcat {
  background: var(--gra-cream2);
  font-size: 13px;
}
/* Kachel-Grid innerhalb einer aufgeklappten Gruppe. */
.gra-librows .gra-libgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 4px 0 2px;
}
/* Bibliothekskachel (ohne Auswahl-Checkbox) mit Aktionsleiste. */
.gra-tile-lib { position: relative; }
.gra-tile-lib .gra-tileactions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gra-tile-lib .gra-tileactions .gra-btn {
  padding: 5px 10px;
  font-size: 11.5px;
}
.gra-tilenovid {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  color: var(--gra-muted);
  font-size: 12px;
  background: #EFE9DE;
}
.gra-libteamlink { display: inline-block; margin: 8px 2px 2px; }
.gra-headactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Expertenmodus: bewusst unauffälliger als die anderen Kopf-Aktionen (nur
   für Admins, seltener genutzt als Upload/Mehrere-hochladen). */
.gra-expertbtn { opacity: .72; font-size: 12.5px; padding: 7px 12px; }
.gra-expertbtn:hover { opacity: 1; }

/* ---- Statistik-Bausteine (Dashboard-Ausbau + Spieler-Detail) ---- */
.gra-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.gra-stat { background: #fff; border: 1px solid var(--gra-line); border-radius: 16px; padding: 12px 14px; }
.gra-stat span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gra-muted); }
.gra-stat b { display: block; font-family: var(--gra-display); font-weight: 600; font-size: 24px; color: var(--gra-navy); line-height: 1.1; margin: 2px 0; }
.gra-stat i { font-style: normal; font-size: 12px; color: var(--gra-muted); }

/* horizontale Balken */
.gra-hbars { display: flex; flex-direction: column; gap: 8px; }
.gra-hbar { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; }
.gra-hbar-lab { font-size: 12.5px; font-weight: 700; color: var(--gra-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gra-hbar-track { height: 12px; background: #EDE6DA; border-radius: 999px; overflow: hidden; }
.gra-hbar-fill { display: block; height: 100%; border-radius: 999px; background: var(--gra-navy); }
.gra-hbar-fill.good { background: var(--gra-good); }
.gra-hbar-fill.mid { background: var(--gra-star); }
.gra-hbar-fill.low { background: var(--gra-coral); }
.gra-hbar-val { font-size: 12.5px; font-weight: 800; color: var(--gra-navy); min-width: 40px; text-align: right; }
.gra-hbar-val i { font-style: normal; font-size: 10px; color: var(--gra-muted); margin-left: 4px; }

/* Schwerpunkt-Mini-Chips in den Dashboard-Zeilen */
.gra-swmini { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.gra-swchip { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #EDE6DA; color: var(--gra-ink); }
.gra-swchip.good { background: rgba(59,158,99,.16); color: #2c7a4b; }
.gra-swchip.mid { background: rgba(242,179,60,.20); color: #9a7411; }
.gra-swchip.low { background: var(--gra-tint); color: var(--gra-coral-d); }

/* Dashboard-Zeile als Link + Trendfarben */
a.gra-dashrow { text-decoration: none !important; color: inherit !important; }
a.gra-dashrow:hover { border-color: var(--gra-soft); }
.gra-dashmetric b.gra-trend.up { color: var(--gra-good); }
.gra-dashmetric b.gra-trend.down { color: var(--gra-coral); }

/* Aufgaben-Historie (Spieler-Detail) */
.gra-histlist { display: flex; flex-direction: column; gap: 6px; }
.gra-histrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: #fff; border: 1px solid var(--gra-line); border-radius: 12px; text-decoration: none !important; color: var(--gra-ink) !important; }
.gra-histrow:hover { border-color: var(--gra-soft); }
.gra-histrow b { font-size: 13px; font-weight: 700; }
.gra-histval { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #EDE6DA; color: var(--gra-muted); white-space: nowrap; }
.gra-histval.good { background: rgba(59,158,99,.16); color: #2c7a4b; }
.gra-histval.mid { background: rgba(242,179,60,.20); color: #9a7411; }
.gra-histval.off { background: #EDE6DA; color: var(--gra-muted); }

/* ---- Spieler-Home: Tabs + Fokus ---- */
.gra-tabs { display: flex; gap: 6px; margin: 0 0 16px; border-bottom: 1px solid var(--gra-line); }
.gra-tab {
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--gra-muted) !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.gra-tab:hover { color: var(--gra-ink) !important; }
.gra-tab.on { color: var(--gra-coral-d) !important; border-bottom-color: var(--gra-coral); }

/* ---- Hub-Design: Ankündigungs-Band (Spieler + Trainer) ---- */
.gra-announce {
  background: var(--gra-navy);
  border-radius: 18px;
  padding: 16px 18px;
  margin: 0 0 18px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.gra-announce::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}
.gra-announce-lab {
  font-family: var(--gra-display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #e3a98f;
  margin-bottom: 6px;
  position: relative;
}
.gra-announce-text { font-size: 14px; font-weight: 700; line-height: 1.4; max-width: 640px; position: relative; }
.gra-announce-meta { font-size: 11.5px; color: #9aa3b0; margin-top: 6px; font-weight: 600; position: relative; }
.gra-announce-meta a { color: #cfd3da; text-decoration: underline; }
.gra-announce-empty { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .78); position: relative; }
/* Eingebettetes AnnouncementForm kompakt im Band darstellen. */
.gra-announce .gra-form {
  position: relative;
  background: transparent;
  border: 0;
  padding: 12px 0 0;
  max-width: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.gra-announce .gra-form .form-item { margin: 0; flex: 1 1 220px; }
.gra-announce .gra-form label { display: none; }
.gra-announce .gra-form textarea {
  width: 100%;
  border: 0 !important;
  border-radius: 11px !important;
  padding: 10px 13px !important;
  font-family: var(--gra-body);
  font-size: 13.5px;
  font-weight: 600;
  min-height: 40px;
  resize: vertical;
}
.gra-announce .gra-form .form-actions { margin: 0; flex: 0 0 auto; }
.gra-announce .gra-form .gra-btn { padding: 10px 16px !important; margin: 0 !important; }

/* ---- Hub-Design: große Bereichs-Kacheln (Navigation statt Reiter) ---- */
.gra-tilegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 20px; }
@media (max-width: 640px) { .gra-tilegrid { grid-template-columns: 1fr; } }
.gra-tile {
  background: #fff;
  border: 1px solid var(--gra-line);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none !important;
  color: var(--gra-ink) !important;
  position: relative;
  min-height: 108px;
  transition: transform .12s, box-shadow .12s;
}
a.gra-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(38, 37, 35, .10); }
.gra-tile.accent { background: linear-gradient(135deg, var(--gra-coral), var(--gra-coral-d)); color: #fff !important; border: 0; }
.gra-tile-top { display: flex; align-items: center; justify-content: space-between; }
.gra-tile-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--gra-tint); display: flex; align-items: center; justify-content: center; color: var(--gra-coral-d); flex: 0 0 auto; }
.gra-tile.accent .gra-tile-ico { background: rgba(255, 255, 255, .22); color: #fff; }
.gra-tile-badge { font-family: var(--gra-display); font-weight: 600; font-size: 11px; background: var(--gra-soft); color: var(--gra-coral-d); padding: 3px 9px; border-radius: 20px; }
.gra-tile.accent .gra-tile-badge { background: rgba(255, 255, 255, .25); color: #fff; }
.gra-tile-title { font-family: var(--gra-display); font-weight: 600; font-size: 16px; margin: 2px 0 0; }
.gra-tile-sub { font-size: 12px; color: var(--gra-muted); font-weight: 600; line-height: 1.35; }
.gra-tile.accent .gra-tile-sub { color: rgba(255, 255, 255, .85); }
.gra-tile-metrics { display: flex; gap: 14px; margin-top: auto; padding-top: 4px; }
.gra-tile-metric b { font-family: var(--gra-display); font-weight: 600; font-size: 18px; display: block; }
.gra-tile-metric i { font-style: normal; font-size: 10.5px; color: var(--gra-muted); font-weight: 700; }
.gra-tile.accent .gra-tile-metric i { color: rgba(255, 255, 255, .75); }

/* ---- Hub-Design: Aufgaben als Kacheln (Spieler) – offen gross/farbig, erledigt ausgegraut ---- */
.gra-taskgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 760px) { .gra-taskgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gra-taskgrid { grid-template-columns: 1fr; } }
.gra-task { border-radius: 16px; padding: 13px 14px; text-decoration: none !important; display: flex; flex-direction: column; gap: 5px; min-height: 92px; position: relative; }
.gra-task.open { background: #fff; border: 2px solid var(--gra-soft); color: var(--gra-ink) !important; }
.gra-task.open:hover { border-color: var(--gra-coral); }
.gra-task.done { background: #EFEBE3; border: 2px solid transparent; color: var(--gra-muted) !important; opacity: .74; }
.gra-task-tag { font-family: var(--gra-display); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.gra-task.open .gra-task-tag { color: var(--gra-coral-d); }
.gra-task-name { font-weight: 800; font-size: 13px; line-height: 1.3; }
.gra-task-meta { font-size: 11px; font-weight: 700; color: var(--gra-muted); margin-top: auto; }
.gra-task-check { position: absolute; top: 11px; right: 12px; color: var(--gra-good); font-weight: 900; }
.gra-task.done .gra-task-check { color: #9aa094; }
.gra-focus {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--gra-tint); border: 1px solid var(--gra-soft);
  border-radius: 14px; padding: 11px 15px; margin: 0 0 14px;
  font-size: 13.5px; font-weight: 700; color: var(--gra-ink);
}
.gra-focus b { color: var(--gra-coral-d); }
.gra-focus .gra-btn { margin-left: auto; }
.gra-dashpanels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.gra-dashpanels .gra-panel { margin: 0; }
.gra-panel h3 small { font-weight: 600; color: var(--gra-muted); font-size: 12px; }

/* Sicherstellen, dass das hidden-Attribut auch Flex-/Grid-Elemente ausblendet
   (sonst bleibt z. B. der „wird geladen"-Spinner .gra-note trotz hidden sichtbar). */
.gra [hidden] { display: none !important; }

/* ---- Sidebar: Nutzer + Abmelden ---- */
.gra-userbox { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); }
.gra-userbadge { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--gra-coral); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gra-username { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gra-logout { flex: 0 0 auto; color: #B9C3CE !important; display: flex; align-items: center; text-decoration: none !important; }
.gra-logout:hover { color: #fff !important; }
.gra-logout svg { width: 18px; height: 18px; }

/* Deaktivierter Button (z. B. „Zuweisen" ohne Auswahl) */
.gra-btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
.gra-libassign b { font-weight: 800; }

/* Open-Lab etwas ruhiger: Kategorie-Beschreibungen auf 2 Zeilen begrenzen */
.gra-cat span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Willkommensseite (nicht angemeldet) ---- */
.gra-welcome { max-width: 620px; padding: 20px 0; }
.gra-welcome-badge { display: inline-block; font-family: var(--gra-display); font-weight: 700; font-size: 15px; color: var(--gra-coral); margin-bottom: 14px; }
.gra-welcome-title { font-family: var(--gra-display); font-weight: 600; font-size: 30px; color: var(--gra-navy); margin: 0 0 14px; line-height: 1.15; }
.gra-welcome-lead { font-size: 15px; line-height: 1.6; color: #333; margin: 0 0 16px; }
.gra-welcome-points { margin: 0 0 16px; padding-left: 20px; }
.gra-welcome-points li { font-size: 14px; line-height: 1.7; color: #333; margin-bottom: 4px; }
.gra-welcome-note { font-size: 13px; line-height: 1.6; color: var(--gra-muted); margin: 0 0 22px; }
.gra-welcome-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Mobile: in der fixen Bottom-Nav nur das Abmelden-Icon zeigen (kein Name) */
@media (max-width: 899px) {
  .gra-userbox { margin: 0; padding: 6px 8px; background: transparent; flex-direction: column; gap: 3px; }
  .gra-userbadge, .gra-username { display: none; }
  .gra-logout { flex-direction: column; gap: 4px; font-size: 10.5px; }
  .gra-logout::after { content: "Abmelden"; }
}

/* ---- Tutorials-Seite ---- */
.gra-tutgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.gra-tut h3 { font-family: var(--gra-display); font-weight: 600; font-size: 17px; color: var(--gra-navy); margin: 0 0 8px; }
.gra-tut p { font-size: 13.5px; line-height: 1.5; color: var(--gra-ink); margin: 0 0 10px; }
.gra-tut p b { color: var(--gra-navy); }
.gra-tut .gra-btn { margin-top: 2px; }
.gra-tut-coach { border: 1px solid var(--gra-soft); background: var(--gra-tint); }

/* Open-Lab: Unterkategorie steht in der schmalen linken Spalte untereinander */
.gra-untercol { grid-template-columns: 1fr; margin-top: 4px; }

/* Team-Management (3.23): Einladen per Link/Mail, Code erneuern, Beitreten. */
button.gra-btn { border: 0; cursor: pointer; font: inherit; }
.gra-coderenew { font-size: 12px; font-weight: 800; color: var(--gra-muted); text-decoration: underline; margin-left: auto; }
.gra-coderenew:hover { color: var(--gra-coral); }
.gra-invite { background: #fff; border: 1px solid var(--gra-line); border-radius: 14px; padding: 14px 16px; margin: -6px 0 16px; display: flex; flex-direction: column; gap: 10px; }
.gra-invite-head { display: flex; flex-direction: column; gap: 2px; }
.gra-invite-head b { font-size: 14px; }
.gra-invite-head i { font-style: normal; font-size: 12px; color: var(--gra-muted); line-height: 1.4; }
.gra-invite-url { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; color: var(--gra-ink); background: var(--gra-cream2, #F6F2EA); border: 1px solid var(--gra-line); border-radius: 10px; padding: 9px 11px; }
.gra-invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gra-invite-actions .gra-btn { flex: 1 1 auto; text-align: center; justify-content: center; }
.gra-joinwrap { margin-top: 10px; }
.gra-joinintro { font-size: 14px; color: var(--gra-muted); line-height: 1.45; margin: 0 0 14px; max-width: 560px; }

/* ===== 3.24: Durchgänge, Spieler-Auswertung, Erklärungen, Lösungshilfen ===== */
.gra-muted { color: var(--gra-muted); font-size: 13px; }
.gra-attemptchips { margin: 0 0 14px; }
.gra-attemptchips .gra-chip { text-decoration: none !important; }
.gra-attemptchips .gra-chip.on { background: var(--gra-coral); border-color: var(--gra-coral); color: #fff !important; }
.gra-resulthint { font-size: 12.5px; color: var(--gra-muted); line-height: 1.45; margin: 4px 0 16px; max-width: 640px; }

/* Aufgaben-Kacheln (Spieler): Auswertung / Nochmal üben */
.gra-task-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.gra-task-actions a { font-size: 12px; font-weight: 800; color: var(--gra-coral-d, var(--gra-coral)) !important; text-decoration: none; }
.gra-task-actions a:hover { text-decoration: underline; }
.gra-task.done:has(.gra-task-actions) { opacity: 1; }

/* Trainer-Auswertung: Verlauf je Durchgang */
.gra-runchips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1 1 100%; margin-left: 42px; }
.gra-runchip { font-size: 11px; font-weight: 800; background: var(--gra-cream2, #F6F2EA); color: var(--gra-ink); border-radius: 8px; padding: 3px 7px; white-space: nowrap; }
.gra-runchip.on { background: var(--gra-navy); color: #fff; }
.gra-runarrow { font-size: 11px; color: var(--gra-muted); }
.gra-explainpanel { margin-top: 18px; }
.gra-explainpanel summary { cursor: pointer; font-weight: 800; font-size: 14px; }
.gra-explainpanel summary small { font-weight: 700; color: var(--gra-muted); }
.gra-explainlist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gra-explainrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.gra-explainrow a { margin-left: auto; font-weight: 800; font-size: 12px; color: var(--gra-coral); }

/* Spieler-Auswertung je Clip */
.gra-resultlist { display: flex; flex-direction: column; gap: 10px; }
.gra-resultrow { background: #fff; border: 1px solid var(--gra-line); border-left: 4px solid var(--gra-line); border-radius: 12px; padding: 11px 14px; display: flex; flex-direction: column; gap: 6px; }
.gra-resultrow.ok { border-left-color: var(--gra-good); }
.gra-resultrow.bad { border-left-color: var(--gra-bad, #D8483C); }
.gra-resultrow.skip { opacity: .7; }
.gra-resulthead { display: flex; align-items: flex-start; gap: 10px; }
.gra-resultmark { flex: 0 0 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; color: #fff; background: #B8B2A7; }
.gra-resultrow.ok .gra-resultmark { background: var(--gra-good); }
.gra-resultrow.bad .gra-resultmark { background: var(--gra-bad, #D8483C); }
.gra-resulttitle b { display: block; font-size: 14px; line-height: 1.3; }
.gra-resulttitle i { font-style: normal; font-size: 11.5px; color: var(--gra-muted); font-weight: 700; }
.gra-resultline { font-size: 13px; line-height: 1.4; margin-left: 34px; }
.gra-resultline span { color: var(--gra-muted); font-weight: 700; }
.gra-resultline.good { color: var(--gra-good); font-weight: 700; }
.gra-resultline.muted { color: var(--gra-muted); }
.gra-resultexplain { margin-left: 34px; background: var(--gra-tint); border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.45; }
.gra-resultexplain b { color: var(--gra-navy); margin-right: 3px; }
.gra-resultstrategy { margin-left: 34px; font-size: 12.5px; font-weight: 800; color: var(--gra-coral) !important; text-decoration: none; }
.gra-resultstrategy:hover { text-decoration: underline; }

/* Bibliothek: Erklärung-Link an der Kachel */
.gra-tileexplain { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 800; color: var(--gra-coral) !important; text-decoration: none; position: relative; z-index: 4; }
.gra-tileexplain.has { color: var(--gra-good) !important; }

/* Tutorials: Lösungshilfen */
.gra-tut-wide { grid-column: 1 / -1; }
.gra-stratgroup { margin: 12px 0 0; }
.gra-stratgroup-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gra-muted); margin-bottom: 6px; }
.gra-stratlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.gra-stratitem { display: flex; flex-direction: column; gap: 2px; background: var(--gra-tint); border: 1px solid var(--gra-soft); border-radius: 12px; padding: 9px 12px; text-decoration: none !important; color: var(--gra-ink) !important; }
.gra-stratitem:hover { border-color: var(--gra-coral); }
.gra-stratitem b { font-size: 13.5px; color: var(--gra-navy); }
.gra-stratitem i { font-style: normal; font-size: 11.5px; color: var(--gra-muted); }
.gra-stratpick { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--gra-line); display: flex; flex-direction: column; gap: 6px; }
.gra-stratpick label { font-size: 12px; font-weight: 800; color: var(--gra-navy); }
.gra-stratpick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gra-stratpick select { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--gra-line); border-radius: 10px; background: #fff; }
.gra-stratpick small { font-size: 11px; color: var(--gra-muted); }
.gra-strategy { font-size: 14.5px; line-height: 1.6; color: var(--gra-ink); max-width: 720px; }
.gra-strategy h4 { font-family: var(--gra-display); font-weight: 600; font-size: 16px; color: var(--gra-navy); margin: 16px 0 6px; }
.gra-strategy h4:first-child { margin-top: 0; }
.gra-strategy ul { margin: 0 0 12px; padding-left: 20px; }
.gra-strategy li { margin: 3px 0; }
.gra-strategy p { margin: 0 0 12px; }
.gra-strategy-meta { font-size: 11.5px; color: var(--gra-muted); margin-top: 14px !important; }

/* ===== 3.25: Konto-Seiten im App-Rahmen + weitere Feldtypen ===== */
.gra-form input[type="password"],
.gra-form input[type="url"],
.gra-form input[type="tel"] {
  width: 100%;
  border: 1px solid rgba(38, 37, 35, .18) !important;
  background: #fff !important;
  color: var(--gra-ink) !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  font-family: var(--gra-body);
  font-size: 14.5px;
  font-weight: 600;
  box-sizing: border-box;
}
.gra-form input[type="password"]:focus,
.gra-form input[type="url"]:focus,
.gra-form input[type="tel"]:focus { outline: none; border-color: var(--gra-coral) !important; box-shadow: 0 0 0 3px var(--gra-tint); }
.gra-authform { max-width: 440px; }
.gra-authform .form-actions { margin-top: 6px; }
.gra-authform .form-submit { width: 100%; justify-content: center; }
.gra-authlinks { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 0; max-width: 440px; }
.gra-authlinks a { font-size: 13px; font-weight: 800; color: var(--gra-coral) !important; text-decoration: none; }
.gra-authlinks a:hover { text-decoration: underline; }
.gra-tileexplain + .gra-tileexplain { margin-left: 10px; }

/* 3.26: Lösungshilfen als eigener Bereich. Mobil ersetzt „Lösungshilfen"
   den Tutorials-Eintrag in der Bottom-Nav (Tutorials: über die
   Lösungshilfen-Seite oben rechts und über das Profil erreichbar). */
.gra-stratpage .gra-stratgroup:first-child { margin-top: 0; }
.gra-tutlink { align-self: flex-start; }
@media (max-width: 899px) {
  .gra-nv-tut { display: none; }
}

/* ===== 3.27: Tutorials als aufklappbare Themen-Karten ===== */
.gra-tutsection { font-family: var(--gra-display); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gra-muted); margin: 8px 0 10px; }
.gra-tutsection:not(:first-of-type) { margin-top: 26px; }
.gra-tutcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 480px) { .gra-tutcards { grid-template-columns: 1fr; } }
.gra-tutcard { background: #fff; border: 1px solid var(--gra-line); border-radius: 18px; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; }
.gra-tutcard:hover { border-color: var(--gra-soft); box-shadow: 0 6px 18px rgba(38, 37, 35, .06); }
.gra-tutcard[open] { border-color: var(--gra-coral); box-shadow: 0 8px 24px rgba(218, 92, 48, .10); }
.gra-tutcard summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 15px 16px; cursor: pointer; }
.gra-tutcard summary::-webkit-details-marker { display: none; }
.gra-tutico { flex: 0 0 44px; height: 44px; border-radius: 14px; background: var(--gra-tint); color: var(--gra-coral); display: flex; align-items: center; justify-content: center; }
.gra-tutico svg { width: 22px; height: 22px; }
.gra-tutcard.coach .gra-tutico { background: #E7ECF3; color: var(--gra-navy); }
.gra-tuttxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gra-tuttxt b { font-family: var(--gra-display); font-weight: 600; font-size: 16.5px; color: var(--gra-navy); line-height: 1.25; }
.gra-tuttxt i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--gra-muted); }
.gra-tutchev { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--gra-cream2, #F7ECDB); position: relative; transition: transform .2s ease; }
.gra-tutchev::after { content: ''; position: absolute; left: 7px; top: 6px; width: 6px; height: 6px; border-right: 2px solid var(--gra-ink); border-bottom: 2px solid var(--gra-ink); transform: rotate(45deg); }
.gra-tutcard[open] .gra-tutchev { transform: rotate(180deg); }
.gra-tutbody { padding: 0 18px 18px 74px; font-size: 15px; line-height: 1.6; color: var(--gra-ink); }
@media (max-width: 480px) { .gra-tutbody { padding-left: 18px; } }
.gra-tutbody p { margin: 0 0 10px; }
.gra-tutbody ol { margin: 0 0 12px; padding-left: 0; list-style: none; counter-reset: tut; }
.gra-tutbody ol li { counter-increment: tut; position: relative; padding-left: 32px; margin: 0 0 9px; }
.gra-tutbody ol li::before { content: counter(tut); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--gra-coral); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gra-tutcard.coach .gra-tutbody ol li::before { background: var(--gra-navy); }
.gra-tutnote { background: var(--gra-tint); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; font-weight: 700; }
.gra-tutbody .gra-btn { margin-top: 4px; }

/* ===== 3.27: Lösungshilfen – Position wählen, dann Aufgabenart ===== */
.gra-stratstep { display: flex; align-items: center; gap: 9px; font-family: var(--gra-display); font-weight: 600; font-size: 15px; color: var(--gra-navy); margin: 6px 0 10px; }
.gra-stratstep span { width: 24px; height: 24px; border-radius: 50%; background: var(--gra-coral); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.gra-stratstep small { font-family: var(--gra-body); font-size: 13px; color: var(--gra-muted); font-weight: 700; }
.gra-stratchips { margin-bottom: 22px; }
.gra-stratchips .gra-chip { text-decoration: none !important; }
.gra-stratchips .gra-chip.on { background: var(--gra-coral); border-color: var(--gra-coral); color: #fff !important; }
.gra-stratchips .gra-chip em { font-style: normal; font-size: 11px; font-weight: 800; background: var(--gra-tint); color: var(--gra-coral-d); border-radius: 10px; padding: 1px 7px; }
.gra-stratchips .gra-chip.on em { background: rgba(255, 255, 255, .25); color: #fff; }
.gra-stratgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0 0 18px; }
.gra-stratcard { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 92px; padding: 13px 14px 12px; border-radius: 16px; border: 1px solid var(--gra-line); background: #fff; text-decoration: none !important; color: var(--gra-ink) !important; }
.gra-stratcard b { font-family: var(--gra-display); font-weight: 600; font-size: 15.5px; color: var(--gra-navy); line-height: 1.25; padding-right: 22px; }
.gra-stratcard i { font-style: normal; font-size: 12.5px; color: var(--gra-muted); font-weight: 600; }
.gra-stratgo { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 800; color: var(--gra-coral); }
.gra-stratbulb { position: absolute; top: 11px; right: 12px; font-size: 16px; }
.gra-stratcard.has { border-color: var(--gra-soft); background: linear-gradient(180deg, #fff, var(--gra-tint)); }
.gra-stratcard.has:hover { border-color: var(--gra-coral); box-shadow: 0 6px 16px rgba(218, 92, 48, .12); }
.gra-stratcard.empty { background: #F3EFE7; border-style: dashed; cursor: default; }
.gra-stratcard.empty b { color: #9a958a; }
.gra-stratcard.empty i, .gra-stratcard.empty .gra-stratgo { color: #b3ad9f; }
.gra-stratcard.empty.editable { cursor: pointer; }
.gra-stratcard.empty.editable .gra-stratgo { color: var(--gra-coral); }
.gra-stratcard.empty.editable:hover { border-color: var(--gra-coral); }

/* ===== Feedback-Knopf (alle App-Seiten, js/feedback.js) =====
   Dezent unten rechts; auf dem Handy über der Bottom-Nav, nur als Symbol. */
.gra-fb { position: fixed; right: 22px; bottom: 22px; z-index: 60; font-family: var(--gra-body); }
.gra-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  height: 42px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--gra-navy);
  color: var(--gra-cream);
  font: 700 13px/1 var(--gra-body);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  opacity: .88;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.gra-fb-btn:hover,
.gra-fb.open .gra-fb-btn { opacity: 1; }
.gra-fb-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.gra-fb-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gra-coral);
  color: #fff;
  font-size: 11px;
  line-height: 19px;
  text-align: center;
}
.gra-fb-panel {
  position: absolute;
  right: 0;
  bottom: 54px;
  width: min(340px, calc(100vw - 28px));
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--gra-ink);
  border: 1px solid var(--gra-line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}
.gra-fb-panel[hidden] { display: none; }
.gra-fb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gra-fb-head b { font-family: var(--gra-display); font-weight: 600; font-size: 17px; color: var(--gra-navy); }
.gra-fb-close { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--gra-muted); cursor: pointer; padding: 0 4px; }
.gra-fb-kinds { display: flex; gap: 6px; margin-bottom: 10px; }
.gra-fb-kinds label { flex: 1; margin: 0; cursor: pointer; }
.gra-fb-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.gra-fb-kinds span {
  display: block;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1.5px solid var(--gra-line);
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--gra-navy);
  background: var(--gra-cream);
}
.gra-fb-kinds input:checked + span { border-color: var(--gra-coral); background: var(--gra-tint); color: var(--gra-coral-d); }
.gra-fb-kinds input:focus-visible + span { outline: 2px solid var(--gra-coral); outline-offset: 2px; }
.gra-fb-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 92px;
  padding: 10px 11px;
  border-radius: 11px;
  border: 1.5px solid var(--gra-line);
  font: 600 16px/1.35 var(--gra-body); /* 16px: kein Auto-Zoom auf dem iPhone */
  resize: vertical;
}
.gra-fb-form textarea:focus { outline: none; border-color: var(--gra-coral); }
.gra-fb-note { margin: 6px 0 10px; font-size: 11.5px; color: var(--gra-muted); }
.gra-fb-actions { display: flex; justify-content: flex-end; }
.gra-fb-msg { margin: 8px 0 0; font-size: 13px; font-weight: 700; min-height: 1em; }
.gra-fb-msg.ok { color: var(--gra-good); }
.gra-fb-msg.err { color: var(--gra-coral-d); }
.gra-fb-inbox { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--gra-coral-d) !important; }
@media (max-width: 899px) {
  .gra-fb { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .gra-fb-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .gra-fb-btnlbl { display: none; }
  .gra-fb-panel { bottom: 54px; }
  .gra-nv-feedback { display: none !important; }
}
@media print { .gra-fb { display: none; } }

/* ===== Feedback-Eingang (/app/feedback-eingang) ===== */
.gra-nvbadge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--gra-coral);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.gra-fb-filter .gra-fb-sep { width: 1px; background: var(--gra-line); margin: 0 4px; }
.gra-fb-list { display: grid; gap: 12px; }
.gra-fb-item {
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--gra-line);
  border-left: 5px solid var(--gra-coral);
}
.gra-fb-item.gra-fb-lob { border-left-color: var(--gra-good); }
.gra-fb-item.gra-fb-idee { border-left-color: var(--gra-star); }
.gra-fb-item.done { opacity: .6; }
.gra-fb-item header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gra-fb-kind { font-family: var(--gra-display); font-weight: 600; color: var(--gra-navy); }
.gra-fb-date { font-size: 12px; color: var(--gra-muted); }
.gra-fb-item .gra-fb-msg { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: var(--gra-ink); white-space: normal; }
.gra-fb-meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 12px; font-size: 13px; }
.gra-fb-meta dt { color: var(--gra-muted); font-weight: 700; }
.gra-fb-meta dd { margin: 0; overflow-wrap: anywhere; }
.gra-fb-mail,
.gra-fb-path { color: var(--gra-muted); font-size: 12px; }