/*
 * Stammatlas Schaltzentrale - Bausteine (nur Tokens aus variables.css)
 * Zweck:   Aussehen der Bausteine aus includes/render-*.php; Muster aus der
 *          Mustertafel W0 (abgenommen 26.10.2026). Keine Farben, keine
 *          Pixelwerte ausser 1px/2px-Linien (Wache C01).
 * Version: stammatlas-admin 0.1.1
 */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-base);
  line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: var(--underline-offset); }
a:hover { text-decoration-color: var(--ink); }
code, pre { font-family: var(--font-mono); font-size: var(--fs-sm); }

.icon { font-family: var(--font-icon); font-weight: 300; font-style: normal; font-size: var(--fs-icon); line-height: 1;
  display: inline-block; vertical-align: middle; letter-spacing: normal; text-transform: none; white-space: nowrap;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; }

/* --- Seitenrahmen ------------------------------------------------------- */
.rahmen { display: grid; grid-template-columns: var(--nav-width) 1fr; min-height: 100vh; }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--rule); grid-column: 1 / -1;
  position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg); }
.marke { display: flex; align-items: baseline; gap: var(--space-3); text-decoration: none; }
.marke-name { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-xl); letter-spacing: var(--track-tight); }
.marke-zusatz, .label { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-soft); }
.kopf-rechts { display: flex; align-items: center; gap: var(--space-4); color: var(--ink-soft); font-size: var(--fs-sm); }
.nav { border-right: 1px solid var(--rule); padding: var(--space-6) var(--space-4); }
.nav ul { list-style: none; display: grid; gap: var(--space-1); }
.nav a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); text-decoration: none;
  color: var(--ink-soft); border-left: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-left-color: var(--brand-gold); background: var(--bg-soft); }
.inhalt { padding: var(--space-8) var(--space-9) var(--space-10); max-width: var(--page-wide); width: 100%; min-width: 0; }

/* --- Titel und Text ----------------------------------------------------- */
.seitentitel { margin-bottom: var(--space-7); }
.seitentitel h1 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--track-tight); margin-top: var(--space-2); }
.untertitel { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lg); color: var(--ink-soft); margin-top: var(--space-3); }
h2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-2xl); color: var(--ink-soft);
  line-height: var(--lh-head); margin-bottom: var(--space-4); }
p { margin-bottom: var(--space-3); }
.leise { color: var(--ink-soft); }
.klein { font-size: var(--fs-sm); }

/* --- Karten, Abschnitte, Kennzahlen ------------------------------------- */
.abschnitt { margin-bottom: var(--space-9); }
.karte { background: var(--surface); border: 1px solid var(--rule); padding: var(--space-6); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr)); gap: var(--space-5); }
.kennzahl { font-family: var(--font-serif); font-size: var(--fs-3xl); line-height: 1; margin-bottom: var(--space-3); letter-spacing: -0.01em; }
.kennzahl-text { font-family: var(--font-serif); font-size: var(--fs-xl); line-height: var(--lh-head); margin-bottom: var(--space-2); }
.trenner { border: 0; border-top: 1px solid var(--rule); margin: var(--space-8) 0; }

/* --- Knoepfe ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; cursor: pointer;
  border-radius: var(--radius-0); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; padding: var(--space-3) var(--space-5); min-height: var(--control-height);
  border: 1px solid transparent; background: transparent; color: var(--ink);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.btn--primary { background: var(--ink); color: var(--ink-on-ink); }
.btn--primary:hover { background: var(--ink-strong); transform: translateY(-1px); }
.btn--secondary { border-color: var(--line-control); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--danger { color: var(--danger); border-color: var(--danger); }
.btn--klein { min-height: 0; padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); gap: var(--space-2); }
.btn--klein .icon { font-size: var(--fs-md); }
.btn--link { border: 0; padding: 0; min-height: 0; text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: inherit; text-decoration: underline; text-decoration-color: var(--rule); }
.reihe { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.reihe--weit { gap: var(--space-5); }
.inline-form { display: inline; }

/* --- Pillen (StatusPill) ------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 2px var(--space-3); border: 1px solid currentColor;
  border-radius: var(--radius-pill); white-space: nowrap; }
.pill--ok { color: var(--ok); }
.pill--warn { color: var(--warn); }
.pill--danger { color: var(--danger); }
.pill--info { color: var(--info); }
.pill--neutral { color: var(--ink-soft); }

/* --- Formulare ---------------------------------------------------------- */
.formular { display: grid; gap: var(--space-5); max-width: var(--field-narrow); }
.formular--breit { max-width: none; grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr)); align-items: end; }
.feld label, .feld .label { display: block; margin-bottom: var(--space-2); }
.eingabe { width: 100%; font: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-control); border-radius: var(--radius-1); padding: var(--space-3); min-height: var(--control-height); }
.eingabe--code { font-family: var(--font-mono); letter-spacing: 0.3em; font-size: var(--fs-xl); text-align: center; }
.hinweis { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: var(--space-1); }
.auswahl { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); }
.auswahl input { width: var(--space-4); height: var(--space-4); accent-color: var(--accent); }

/* --- Meldungen ---------------------------------------------------------- */
.meldung { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--info); background: var(--surface); margin-bottom: var(--space-6); }
.meldung--ok { border-left-color: var(--ok); }
.meldung--fehler { border-left-color: var(--danger); }
.meldung--warn { border-left-color: var(--warn); }
.meldung .icon { color: var(--ink-soft); }

/* --- Tabellen (Ausrichtung nur ueber Spaltenart, L-52) ------------------ */
.tabelle-huelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tabelle th { text-align: left; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-soft); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tabelle td { padding: var(--space-3); border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.col-text { text-align: left; }
.col-num, .col-date { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-action { text-align: right; width: 1%; white-space: nowrap; }
.tabelle th.col-num, .tabelle th.col-date, .tabelle th.col-action { text-align: right; }
.leer { color: var(--ink-soft); font-style: italic; font-family: var(--font-serif); padding: var(--space-5) 0; }

/* --- Protokoll ---------------------------------------------------------- */
.protokoll { background: var(--bg-soft); border: 1px solid var(--rule); padding: var(--space-4); white-space: pre-wrap;
  overflow-x: auto; line-height: var(--lh-head); }
.zeile-ok { color: var(--ok); }
.zeile-rot { color: var(--danger); font-weight: 600; }

/* --- Anmeldung ---------------------------------------------------------- */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: var(--space-8) var(--space-4); }
.anmeldung-box { width: 100%; max-width: var(--field-narrow); }
.anmeldung-box .seitentitel h1 { font-size: var(--fs-3xl); }
.qr { background: var(--qr-hell); border: 1px solid var(--rule); padding: var(--space-4); display: inline-block; }
.qr svg { display: block; width: calc(var(--space-10) * 3); height: calc(var(--space-10) * 3); }
.qr rect { fill: var(--qr-dunkel); }
.qr .qr-grund { fill: var(--qr-hell); }
.geheimnis { font-family: var(--font-mono); overflow-wrap: anywhere; background: var(--bg-soft); padding: var(--space-2) var(--space-3); }
.fuss { margin-top: var(--space-9); padding-top: var(--space-5); border-top: 1px solid var(--rule); font-size: var(--fs-sm);
  color: var(--ink-soft); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.fuss em { font-family: var(--font-serif); }

/* --- Schmal ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .inhalt { padding: var(--space-7) var(--space-6) var(--space-9); }
}
@media (max-width: 720px) {
  .rahmen { grid-template-columns: 1fr; }
  .nav { border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--space-2) var(--space-4); overflow-x: auto; }
  .nav ul { display: flex; gap: var(--space-2); }
  .nav a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav a[aria-current="page"] { border-bottom-color: var(--brand-gold); background: transparent; }
  .kopf { padding: var(--space-4); }
  .kopf-rechts .kopf-name { display: none; }
  .inhalt { padding: var(--space-6) var(--space-4) var(--space-9); }
}

/* --- Schrittfolge (Einrichtung) ------------------------------------------ */
.schritte { padding-left: var(--space-5); display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.schritte p { margin-bottom: var(--space-2); }

/* --- Marke (Corporate Design v2) ------------------------------------------ */
.marke { align-items: center; }
.marke-signet { width: var(--signet-kopf); height: auto; display: block; }
.anmeldung-marke { text-align: center; margin-bottom: var(--space-8); }
.anmeldung-logo { width: 100%; height: auto; display: block; }
/* Original-Logo je Darstellung: hell/dunkel als eigene Datei, auch bei fester Wahl im Konto */
.logo-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-hell { display: none; }
  :root:not([data-theme="light"]) .logo-dunkel { display: block; }
}
:root[data-theme="dark"] .logo-hell { display: none; }
:root[data-theme="dark"] .logo-dunkel { display: block; }
.marke-name { color: var(--brand-ink); }
.sig-buch, .sig-stamm { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sig-linie { stroke: var(--marke-linie); }
.sig-blatt { fill: var(--marke-blatt); stroke: var(--marke-blatt-rand); stroke-width: 2px; }
.sig-gold-1 { stop-color: var(--marke-gold-1); }
.sig-gold-2 { stop-color: var(--marke-gold-2); }
.sig-gold-3 { stop-color: var(--marke-gold-3); }
.sig-stamm-1 { stop-color: var(--marke-stamm-1); }
.sig-stamm-2 { stop-color: var(--marke-stamm-2); }
.sig-stamm-3 { stop-color: var(--marke-stamm-3); }
@media (max-width: 720px) {
  .marke-zusatz { display: none; }
}