/*
 * TEAMLOG Extranet: Produktschicht auf @npm-packages/design-system 0.4.0.
 * Nur Variablen aus vendor/design-system/0.4.0/tokens.css, keine Farbwerte (R-3.1).
 * Vorlage: docs/superpowers/specs/2026-10-21-klickdummy/Main.dc.html (Spec 6b).
 */

/* --- Grundlage ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--space-layout-topbar-height) + var(--space-4));
}

body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--typography-fontFamily-sans);
  font-size: var(--typography-density-body);
  line-height: var(--typography-lineHeight-normal);
}

a { color: var(--color-text-link); text-underline-offset: var(--space-0-5); }
a:hover { color: var(--color-action-primary-bg-hover); }

/* R-11.6: 2 px Ring in Arbeitsfarbe, 2 px Abstand */
:focus-visible {
  outline: var(--space-0-5) solid var(--color-border-focus);
  outline-offset: var(--space-0-5);
}

h1 {
  margin: 0;
  font-family: var(--typography-fontFamily-display);
  font-size: var(--typography-fontSize-2xl);
  line-height: var(--typography-lineHeight-tight);
  font-weight: var(--typography-fontWeight-semibold);
}

h2 {
  margin: 0;
  font-size: var(--typography-fontSize-lg);
  line-height: var(--typography-lineHeight-snug);
  font-weight: var(--typography-fontWeight-semibold);
}

p { margin: 0; }
.text { color: var(--color-text-secondary); }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: var(--space-px);
  height: var(--space-px);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon { display: block; flex: none; }
.icon-muted { color: var(--color-text-muted); }

.sprungmarke {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  border: var(--space-px) solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.sprungmarke:focus { top: var(--space-2); }

/* --- Rahmen ------------------------------------------------------------- */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.markenstreifen {
  height: var(--space-layout-accent-stripe);
  background: var(--color-accent-fill);
}

.kopf {
  background: var(--color-bg-surface);
  border-bottom: var(--space-px) solid var(--color-border-default);
}

.kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  min-height: var(--space-layout-topbar-height);
  padding: 0 var(--space-6);
}

.kopf-logo {
  display: inline-flex;
  align-items: center;
  height: var(--space-layout-topbar-height);
  border-radius: var(--radius-md);
}
.kopf-logo img { display: block; height: var(--space-6); width: auto; }
.kopf-logo:focus-visible { outline-offset: calc(-1 * var(--space-1)); }

.kopf-produkt {
  font-weight: var(--typography-fontWeight-semibold);
  font-size: var(--typography-fontSize-lg);
}

.kopf-luecke { flex: 1 1 var(--space-6); }

.kopf-nav { display: flex; flex-wrap: wrap; align-items: center; }

.navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: var(--space-layout-topbar-height);
  padding: 0 var(--space-3);
  color: var(--color-text-secondary);
  font-weight: var(--typography-fontWeight-medium);
  text-decoration: none;
  border-top: var(--space-layout-accent-stripe) solid transparent;
  border-bottom: var(--space-layout-accent-stripe) solid transparent;
}
.navlink:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.navlink:focus-visible { outline-offset: calc(-1 * var(--space-1)); }
/* Aktiver Punkt: Auswahlflaeche + Schrift + Markierung in Markenfarbe (R-2.3, R-2.5) */
.navlink[aria-current] {
  color: var(--color-text-primary);
  background: var(--color-bg-selected);
  border-bottom-color: var(--color-accent-fill);
}

.kopf-benutzer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--space-layout-control-height-sm);
  padding-left: var(--space-3);
  border-left: var(--space-px) solid var(--color-border-default);
}
.kopf-name { font-size: var(--typography-fontSize-sm); color: var(--color-text-secondary); }
.kopf-abmelden { display: contents; }

.arbeitsflaeche {
  flex: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fuss {
  min-height: var(--space-layout-footer-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  border-top: var(--space-px) solid var(--color-border-default);
  background: var(--color-bg-surface);
  font-size: var(--typography-fontSize-xs);
  color: var(--color-text-muted);
}

.seitenkopf { display: flex; flex-direction: column; gap: var(--space-1-5); }
.seitenkopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--typography-fontSize-sm);
  color: var(--color-text-muted);
}
.crumbs a { color: var(--color-text-link); }

/* --- Bausteine ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  min-height: var(--space-density-control-height);
  padding: 0 var(--space-3);
  border: var(--space-px) solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: var(--typography-fontWeight-medium);
  line-height: var(--typography-lineHeight-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary { background: var(--color-action-primary-bg); color: var(--color-action-primary-fg); }
.btn-primary:hover { background: var(--color-action-primary-bg-hover); color: var(--color-action-primary-fg); }
.btn-secondary {
  background: var(--color-action-secondary-bg);
  color: var(--color-action-secondary-fg);
  border-color: var(--color-action-secondary-border);
}
.btn-secondary:hover { background: var(--color-action-secondary-bg-hover); color: var(--color-action-secondary-fg); }
.btn-danger { background: var(--color-action-danger-bg); color: var(--color-action-danger-fg); }
.btn-danger:hover { background: var(--color-action-danger-bg-hover); color: var(--color-action-danger-fg); }
.btn-danger-outline {
  background: var(--color-action-secondary-bg);
  color: var(--color-action-danger-bg);
  border-color: var(--color-action-danger-bg);
}
.btn-ghost {
  background: transparent;
  color: var(--color-text-link);
  border: none;
  padding: 0 var(--space-2);
}
.btn-ghost:hover { background: var(--color-bg-hover); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}
.btn-sm {
  min-height: var(--space-layout-control-height-sm);
  padding: 0 var(--space-2);
  font-size: var(--typography-fontSize-sm);
}
.btn-voll { width: 100%; margin-top: var(--space-1); }

.knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.formular { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.lbl {
  font-size: var(--typography-fontSize-sm);
  font-weight: var(--typography-fontWeight-medium);
  color: var(--color-text-secondary);
}
.hint { font-size: var(--typography-fontSize-xs); color: var(--color-text-muted); }
.hint-md { font-size: var(--typography-fontSize-md); }
.ferr { font-size: var(--typography-fontSize-xs); color: var(--color-feedback-error-fg); }

.inp {
  height: var(--space-density-control-height);
  padding: 0 var(--space-2);
  border: var(--space-px) solid var(--color-field-border);
  border-radius: var(--radius-md);
  background: var(--color-field-bg);
  color: var(--color-text-primary);
  font: inherit;
  min-width: 0;
}
.inp::placeholder { color: var(--color-field-placeholder); }
.inp[aria-invalid="true"] { border-color: var(--color-border-invalid); }
.inp:disabled { background: var(--color-bg-disabled); border-color: var(--color-border-disabled); color: var(--color-text-disabled); }
.inp[readonly] { background: var(--color-bg-readonly); }
textarea.inp { height: auto; min-height: calc(2 * var(--space-density-control-height)); padding: var(--space-2); resize: vertical; }
select.inp { padding-right: var(--space-6); }
.inp-mono { font-family: var(--typography-fontFamily-mono); }

.pwwrap { position: relative; display: flex; }
.pwwrap .inp { flex: 1; padding-right: calc(var(--space-16) + var(--space-8)); }
.pwwrap .btn-ghost {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  min-height: var(--space-layout-control-height-sm);
  font-size: var(--typography-fontSize-sm);
}

.chk { display: flex; align-items: center; gap: var(--space-2); min-height: var(--space-layout-control-height-sm); }
.chk input { width: var(--space-4); height: var(--space-4); margin: 0; accent-color: var(--color-action-primary-bg); }

.card {
  background: var(--color-bg-surface);
  border: var(--space-px) solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--space-px) solid;
  border-radius: var(--radius-md);
}
.banner-err { color: var(--color-feedback-error-fg); background: var(--color-feedback-error-bg); border-color: var(--color-feedback-error-border); }
.banner-ok { color: var(--color-feedback-success-fg); background: var(--color-feedback-success-bg); border-color: var(--color-feedback-success-border); }
.banner-warn { color: var(--color-feedback-warning-fg); background: var(--color-feedback-warning-bg); border-color: var(--color-feedback-warning-border); }
.banner-info { color: var(--color-feedback-info-fg); background: var(--color-feedback-info-bg); border-color: var(--color-feedback-info-border); }

/* Umgebungsschild (R-4.4): Warnfarben, nie Markenfarbe */
.env {
  display: inline-flex;
  align-items: center;
  height: calc(var(--space-5) + var(--space-0-5));
  padding: 0 var(--space-2);
  border: var(--space-px) solid var(--color-feedback-warning-border);
  border-radius: var(--radius-sm);
  background: var(--color-feedback-warning-bg);
  color: var(--color-feedback-warning-fg);
  font-size: var(--typography-fontSize-xs);
  font-weight: var(--typography-fontWeight-semibold);
  letter-spacing: var(--typography-letterSpacing-caps);
}

/* --- Status (R-8.1 bis R-8.3) ---------------------------------------------
 * Alias-Tabelle: einzige Stelle, an der Status-Tokens stehen. Die Zuordnung
 * Fachstatus → Ton steht im PHP-Aufruf status_badge($ton, $text).
 */
.badge {
  --badge-fg: var(--color-status-neutral-fg);
  --badge-bg: var(--color-status-neutral-bg);
  --badge-border: var(--color-status-neutral-border);
  --badge-solid: var(--color-status-neutral-solid);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: calc(var(--space-5) + var(--space-0-5));
  padding: 0 var(--space-2);
  border: var(--space-px) solid var(--badge-border);
  border-radius: var(--radius-sm);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--typography-fontSize-xs);
  font-weight: var(--typography-fontWeight-medium);
  white-space: nowrap;
}
.badge i {
  display: inline-block;
  width: calc(var(--space-2) - var(--space-px));
  height: calc(var(--space-2) - var(--space-px));
  border-radius: var(--radius-full);
  background: var(--badge-solid);
}
.badge-neutral { --badge-fg: var(--color-status-neutral-fg); --badge-bg: var(--color-status-neutral-bg); --badge-border: var(--color-status-neutral-border); --badge-solid: var(--color-status-neutral-solid); }
.badge-yellow { --badge-fg: var(--color-status-yellow-fg); --badge-bg: var(--color-status-yellow-bg); --badge-border: var(--color-status-yellow-border); --badge-solid: var(--color-status-yellow-solid); }
.badge-blue { --badge-fg: var(--color-status-blue-fg); --badge-bg: var(--color-status-blue-bg); --badge-border: var(--color-status-blue-border); --badge-solid: var(--color-status-blue-solid); }
.badge-green { --badge-fg: var(--color-status-green-fg); --badge-bg: var(--color-status-green-bg); --badge-border: var(--color-status-green-border); --badge-solid: var(--color-status-green-solid); }
.badge-olive { --badge-fg: var(--color-status-olive-fg); --badge-bg: var(--color-status-olive-bg); --badge-border: var(--color-status-olive-border); --badge-solid: var(--color-status-olive-solid); }
.badge-orange { --badge-fg: var(--color-status-orange-fg); --badge-bg: var(--color-status-orange-bg); --badge-border: var(--color-status-orange-border); --badge-solid: var(--color-status-orange-solid); }
.badge-red { --badge-fg: var(--color-status-red-fg); --badge-bg: var(--color-status-red-bg); --badge-border: var(--color-status-red-border); --badge-solid: var(--color-status-red-solid); }
.badge-violet { --badge-fg: var(--color-status-violet-fg); --badge-bg: var(--color-status-violet-bg); --badge-border: var(--color-status-violet-border); --badge-solid: var(--color-status-violet-solid); }

/* --- Listen (R-5.7, R-5.8, R-5.10) ---------------------------------------- */

.tablebox {
  overflow-x: auto;
  background: var(--color-bg-surface);
  border: var(--space-px) solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

table.list {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--typography-density-table);
  line-height: var(--typography-lineHeight-snug);
}
table.list th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--space-density-row-height);
  padding: 0 var(--space-2);
  background: var(--color-bg-surface-sunken);
  border-bottom: var(--space-px) solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-weight: var(--typography-fontWeight-semibold);
  text-align: left;
  white-space: nowrap;
}
table.list th:has(> .sort) { padding: 0; }
table.list th .sort {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  height: var(--space-density-row-height);
  padding: 0 var(--space-2);
  cursor: pointer;
}
table.list th .sort:hover { background: var(--color-bg-hover); }
table.list th .sort:focus-visible { outline: var(--space-0-5) solid var(--color-border-focus); outline-offset: calc(-1 * var(--space-0-5)); }
table.list th.num { font-family: inherit; text-align: right; }
table.list th.num .sort { justify-content: flex-end; }
table.list th .sort::after { content: ''; min-width: var(--space-2); color: var(--color-text-muted); }
table.list th[aria-sort="ascending"] .sort::after { content: '\25B2'; }
table.list th[aria-sort="descending"] .sort::after { content: '\25BC'; }
table.list td {
  height: var(--space-density-row-height);
  padding: 0 var(--space-2);
  border-bottom: var(--space-px) solid var(--color-border-subtle);
  white-space: nowrap;
}
table.list td.umbruch { white-space: normal; min-width: calc(var(--space-16) * 3.5); }
table.list tbody tr:last-child td { border-bottom: none; }
table.list tbody tr:hover td { background: var(--color-bg-hover); }
table.list tr.sel td { background: var(--color-bg-selected); }
table.list tfoot td { background: var(--color-bg-surface-sunken); font-weight: var(--typography-fontWeight-semibold); border-top: var(--space-px) solid var(--color-border-default); }

.num { text-align: right; font-family: var(--typography-fontFamily-mono); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--typography-fontFamily-mono); }
.negativ { color: var(--color-data-negative); }

.statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-0-5);
  color: var(--color-text-muted);
  font-size: var(--typography-fontSize-sm);
  font-variant-numeric: tabular-nums;
}
.statusline .mono { color: var(--color-text-primary); }

.stapel { display: flex; flex-direction: column; gap: var(--space-2); }

.suchleiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.suchleiste .field { flex: 0 1 360px; }

.leer {
  padding: var(--space-10) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.rowlink {
  color: var(--color-text-link);
  font-family: var(--typography-fontFamily-mono);
  text-decoration: underline;
}

/* --- Hauptmenue ----------------------------------------------------------- */

.kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.menue-karte { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.menue-eintraege { display: flex; flex-direction: column; gap: var(--space-0-5); margin: var(--space-1) calc(-1 * var(--space-1-5)) 0; }

.menu-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: calc(var(--space-8) + var(--space-1));
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-link);
  font-weight: var(--typography-fontWeight-medium);
  text-decoration: none;
}
.menu-entry:hover { background: var(--color-bg-selected); color: var(--color-text-link); }
.menu-entry:focus-visible { outline-offset: 0; }

/* --- Formularseiten ------------------------------------------------------- */

.formular-karte { max-width: var(--space-layout-dialog-width-sm); padding: var(--space-5); }

.pw-regeln {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  font-size: var(--typography-fontSize-sm);
  color: var(--color-text-muted);
}
.pw-regeln li { display: flex; align-items: center; gap: var(--space-1-5); }
.pw-regeln li[data-erfuellt="ja"] { color: var(--color-feedback-success-fg); }

.fehler-karte {
  max-width: var(--space-layout-dialog-width-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Abruf erfassen (Spec 6b, Klickdummy isAbrufNeu) ------------------------- */

.abruf-raster { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.abruf-haupt { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.abruf-abschnitt { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.abruf-referenz { max-width: 360px; }
.abruf-felder { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.abruf-feld-art { flex: 1 1 200px; }
.abruf-feld-menge { flex: 0 1 140px; }
.abruf-feld-bemerkung { flex: 1 1 100%; }
.abruf-hinweis {
  flex: 1 1 280px;
  max-width: 344px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-bg-surface-sunken);
}
.abruf-hinweis p { margin: 0; color: var(--color-text-secondary); }
.abruf-hinweis p.hint { color: var(--color-text-muted); }
table.list td.aktion { text-align: right; }
.pdf-rahmen { display: block; width: 100%; height: calc(var(--space-16) * 11); border: none; }

/* --- Benutzerverwaltung (Spec 6a, Klickdummy isBenutzer) ----------------- */

.verwaltung { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.verwaltung-liste { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.verwaltung-panel {
  flex: 1 1 300px;
  max-width: 344px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.panel-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.panel-kopf h2 { overflow-wrap: anywhere; }
.menue-auswahl {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--space-px) solid var(--color-border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.menue-auswahl legend { padding: 0 var(--space-1); }
.panel-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--space-px) solid var(--color-border-default);
}
.rueckfrage { flex-direction: column; gap: var(--space-2); }
.passwort-anzeige {
  font-size: var(--typography-fontSize-lg);
  font-weight: var(--typography-fontWeight-semibold);
  color: var(--color-text-primary);
  user-select: all;
  overflow-wrap: anywhere;
}

/* --- Anmeldung (Kapitel 17) ----------------------------------------------- */

.anmeldung {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-4);
}
.anmeldung .fehler-karte { width: 100%; }

.anmeldung-karte {
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.anmeldung-inhalt {
  padding: var(--space-6) var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.anmeldung-marke { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.anmeldung-logo { display: block; height: var(--space-8); width: auto; }
.anmeldung-titel { font-size: var(--typography-fontSize-xl); }
.stapel-eng { display: flex; flex-direction: column; gap: var(--space-0-5); }
.link-klein { font-size: var(--typography-fontSize-sm); align-self: flex-start; }
.anmeldung-fuss { display: flex; gap: var(--space-2); }

/* --- Schmale Breiten (R-3.16) --------------------------------------------- */

@media (max-width: 767px) {
  .kopf-zeile, .arbeitsflaeche, .fuss { padding-left: var(--space-4); padding-right: var(--space-4); }
  .kopf-benutzer { border-left: none; padding-left: 0; }
  .anmeldung-inhalt { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: var(--motion-duration-instant) !important; animation-duration: var(--motion-duration-instant) !important; }
}