/* organisms.css — Kopf, Navigation, Übersicht, Prüfliste. */

.kopf {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--pipe-header-h);
  display: flex; align-items: center; gap: var(--space-5);
  padding: 0 var(--space-5);
  background: var(--nav-surface);
  border-bottom: 1px solid var(--border-structural);
}
/* Der Nordlicht-Verlauf gehört laut Handoff aufs Markenzeichen und
   nicht auf Knöpfe. Als 2 px schmaler Streifen über der ganzen Breite
   ist er Markenpräsenz, ohne irgendetwas einzufärben. */
.kopf::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--brand-gradient);
}
.kopf__rest { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.navi { display: flex; gap: 2px; }
.navi__eintrag {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--nav-inactive-fg); font-size: 14px; font-weight: 500;
  transition: color var(--duration-quick) var(--ease-standard),
              background var(--duration-quick) var(--ease-standard);
}
.navi__eintrag:hover { color: var(--text-primary); background: var(--surface-sunken); }
.navi__eintrag.is-aktiv { color: var(--nav-active-fg);
                          background: color-mix(in srgb, var(--sky-500) 10%, transparent); }

/* Unten auf dem Telefon, oben am Schreibtisch — dieselbe Navigation. */
.navi--unten { display: none; }

.kopfzeile { display: flex; align-items: baseline; gap: var(--space-3);
             margin-bottom: var(--space-4); flex-wrap: wrap; }
.kopfzeile h1 { margin-right: auto; font-size: 1.75rem; }

/* Der Titel einer Inhaltsart trägt sein Icon in einem Feld aus dem
   Markenverlauf — die einzige Stelle neben dem Kopfstreifen, an der
   der Verlauf auftaucht. */
.kartentitel { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; }
.kartentitel .icon {
  box-sizing: content-box; padding: 8px; border-radius: var(--radius-md);
  color: var(--sky-600);
  background: color-mix(in srgb, var(--sky-500) 12%, transparent);
}

.uebersicht { display: grid; gap: var(--space-3);
              grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

.werkzeugleiste {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.werkzeugleiste .feld { width: auto; flex: 1 1 12rem; }
.werkzeugleiste .reiter { flex: 0 0 auto; }

.pruefliste { display: flex; flex-direction: column; }

/* Jede Stimme bekommt dieselbe feste Breite, damit „anhören" in allen
   Zeilen an derselben Stelle steht — sonst zielt man bei jeder Zeile
   neu. Die Liste ist eine Tabelle, auch wenn sie keine ist. */
.stimmspalte {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  flex: 0 0 auto; width: 10.5rem;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-structural);
}
.stimmspalte:first-child { border-left: 0; }
.stimmspalte__name { display: none; }

/* Der Spaltenkopf nennt die Stimmen einmal und bleibt beim Blättern
   stehen — bei 179 Zeilen weiß man sonst nach dem dritten Bildschirm
   nicht mehr, welche Spalte welche Stimme ist. */
.zeile--kopf {
  position: sticky; top: var(--pipe-header-h); z-index: 5;
  background: var(--surface-sunken);
  padding-top: 8px; padding-bottom: 8px;
}
.zeile--kopf::before { display: none; }
.zeile--kopf:hover { background: var(--surface-sunken); }
.zeile--kopf .stimmspalte { justify-content: center; }

.zeile__marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.marke-hinweis {
  font-size: 11px; border-radius: var(--radius-xs);
  padding: 1px 6px; white-space: nowrap;
}
.marke-hinweis--neu {
  color: var(--sky-600);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky-500) 40%, transparent);
}
.marke-hinweis--verdacht {
  color: var(--fn-warning);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fn-warning) 40%, transparent);
}

.anmeldung {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5);
}
.anmeldung__karte { width: min(24rem, 100%); text-align: center; }

/* Fortschritt — bei 358 Aufnahmen die wichtigste Zahl der Seite. */
.fortschritt { margin-bottom: var(--space-4); }
.fortschritt__text {
  font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.fortschritt__schiene {
  height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden;
}
.fortschritt__fuellung {
  height: 100%; border-radius: 999px; background: var(--brand-gradient);
  transition: width var(--duration-slow) var(--ease-standard);
}

/* Der Tastenhinweis: leise, aber immer sichtbar. */
.tasten {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3); font-size: 12px; color: var(--text-faint);
}
.tasten__paar { display: inline-flex; align-items: center; gap: 5px; }
.tasten kbd {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--radius-xs);
  background: var(--surface-card-raised); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border-structural), 0 1px 0 var(--border-structural);
}

/* Die Zelle, auf der die Tastatur gerade steht. Kein Rahmen um den
   Knopf — der Ring liegt um die ganze Stimme, damit sichtbar bleibt,
   worauf sich „G" bezieht. */
.stimmspalte.is-zelle {
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 2px var(--sky-500);
}