/* =====================================================================================
   LizenzWERK — Verwaltungsoberfläche
   -------------------------------------------------------------------------------------
   Alle Farben, Abstände, Radien und Schriftgrößen kommen aus den Core-Tokens
   (bauwerk-core-tokens.css). Hier steht kein einziger fester Farbwert, der
   nicht aus einem Token käme — mit einer benannten Ausnahme: die vier
   Standfarben unten. Sie sind Zustände, keine Marken.

   LizenzWERK trägt bewusst das Hausblau des Core und keine eigene Leitfarbe:
   ADR-008 vergibt Leitfarben an die zehn Fach-Apps, und dies ist Verwaltung.
   ===================================================================================== */

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bw-color-canvas);
  color:var(--bw-color-text);
  font-family:var(--bw-font-ui);
  font-weight:var(--bw-font-weight-base);
  font-size:var(--bw-type-body);
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
.nurLeser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Wortmarke (ADR-010) ------------------------------------------------ */
.bw-wortmarke{display:inline-flex;align-items:center;align-self:center;flex:0 0 auto;line-height:0}
.bw-wortmarke svg{display:block;height:var(--bw-wortmarke-hoehe,30px);width:auto}
.bw-wortmarke--klein{--bw-wortmarke-hoehe:22px}
.karte .bw-wortmarke{justify-content:center;margin:0 auto var(--bw-space-4)}

/* ---- Kopf --------------------------------------------------------------- */
header{
  display:flex;align-items:center;gap:var(--bw-space-4);
  padding:var(--bw-space-3) var(--bw-space-5);
  background:var(--bw-color-surface);
  border-bottom:1px solid var(--bw-color-line);
  position:sticky;top:0;z-index:20;
}
header .name{font-size:var(--bw-type-section);letter-spacing:.02em;color:var(--bw-color-accent);font-weight:var(--bw-font-weight-emphasis)}
header .rechts{margin-left:auto;display:flex;align-items:center;gap:var(--bw-space-4)}
header .wer{color:var(--bw-color-text-muted);font-size:var(--bw-type-meta)}

/* ---- Reiter ------------------------------------------------------------- */
nav.reiter{
  display:flex;gap:var(--bw-space-1);padding:0 var(--bw-space-5);
  background:var(--bw-color-surface);border-bottom:1px solid var(--bw-color-line);
  position:sticky;top:53px;z-index:19;overflow-x:auto;
}
nav.reiter button{
  border:0;background:none;font:inherit;cursor:pointer;color:var(--bw-color-text-muted);
  padding:var(--bw-space-3) var(--bw-space-4);
  border-bottom:2px solid transparent;white-space:nowrap;
}
nav.reiter button:hover{color:var(--bw-color-text)}
nav.reiter button[aria-current=page]{color:var(--bw-color-accent);border-bottom-color:var(--bw-color-accent);font-weight:var(--bw-font-weight-emphasis)}
nav.reiter button:focus-visible{outline:2px solid var(--bw-color-focus);outline-offset:-2px}

main{padding:var(--bw-space-5);max-width:1240px;margin:0 auto}
h2.blattkopf{margin:0 0 var(--bw-space-4);font-size:var(--bw-type-section);font-weight:var(--bw-font-weight-base);color:var(--bw-color-text-muted)}

/* ---- Knöpfe ------------------------------------------------------------- */
button{
  font:inherit;cursor:pointer;
  border:1px solid var(--bw-color-line-strong);
  background:var(--bw-color-surface);color:var(--bw-color-text);
  border-radius:var(--bw-radius-sm);
  padding:var(--bw-space-2) var(--bw-space-4);
  transition:background var(--bw-motion-fast);
}
button:hover{background:var(--bw-color-surface-subtle)}
button.haupt{background:var(--bw-color-accent);border-color:var(--bw-color-accent);color:#fff;font-weight:var(--bw-font-weight-emphasis)}
button.haupt:hover{background:var(--bw-color-accent-hover)}
button.klein{padding:2px var(--bw-space-2);font-size:var(--bw-type-meta)}
button.still{border-color:transparent;background:none;color:var(--bw-color-accent);text-decoration:underline}
button:focus-visible{outline:2px solid var(--bw-color-focus);outline-offset:2px}
button[disabled]{opacity:.5;cursor:default}

/* ---- Felder ------------------------------------------------------------- */
label{display:block;margin-bottom:var(--bw-space-4)}
label > span{display:block;margin-bottom:var(--bw-space-1);font-size:var(--bw-type-meta);color:var(--bw-color-text-muted)}
input,select,textarea{
  width:100%;font:inherit;
  padding:var(--bw-space-2) var(--bw-space-3);
  border:1px solid var(--bw-color-line-strong);
  border-radius:var(--bw-radius-sm);
  background:var(--bw-color-surface);color:var(--bw-color-text);
}
textarea{min-height:70px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--bw-color-focus);outline-offset:1px;border-color:var(--bw-color-focus)}

/* ---- Anmeldung ---------------------------------------------------------- */
#anmeldung{min-height:100vh;display:grid;place-items:center;padding:var(--bw-space-5)}
.karte{
  width:min(360px,100%);
  background:var(--bw-color-surface);
  border:1px solid var(--bw-color-line);
  border-radius:var(--bw-radius-lg);
  box-shadow:var(--bw-shadow-raised);
  padding:var(--bw-space-6);
}
.karte h1{margin:0 0 var(--bw-space-2);font-size:var(--bw-type-title);font-weight:var(--bw-font-weight-base);text-align:center}
.karte h1 b{font-weight:var(--bw-font-weight-emphasis)}
.karte p.unterzeile{margin:0 0 var(--bw-space-5);color:var(--bw-color-text-muted);font-size:var(--bw-type-meta);text-align:center}

/* ---- Meldungen ---------------------------------------------------------- */
.meldung{
  margin-top:var(--bw-space-4);padding:var(--bw-space-3);
  border-radius:var(--bw-radius-sm);font-size:var(--bw-type-meta);line-height:1.45;
  background:var(--bw-color-danger-surface);color:var(--bw-color-danger);
}
.meldung.gut{background:var(--bw-color-success-surface);color:var(--bw-color-success)}
.meldung.hinweis{background:var(--bw-color-warning-surface);color:var(--bw-color-warning)}

/* ---- Kennzahlen --------------------------------------------------------- */
.kennzahlen{display:grid;gap:var(--bw-space-4);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:var(--bw-space-5)}
.zahl{
  background:var(--bw-color-surface);border:1px solid var(--bw-color-line);
  border-radius:var(--bw-radius-md);padding:var(--bw-space-4) var(--bw-space-5);
  border-left:4px solid var(--markierung,var(--bw-color-line-strong));
}
.zahl .wert{font-size:28px;line-height:1.1;font-weight:var(--bw-font-weight-emphasis);font-variant-numeric:tabular-nums}
.zahl .was{margin-top:var(--bw-space-1);font-size:var(--bw-type-meta);color:var(--bw-color-text-muted)}

/* ---- Tabellen ----------------------------------------------------------- */
.tabellenrahmen{overflow-x:auto;background:var(--bw-color-surface);border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-md)}
table{width:100%;border-collapse:collapse}
th,td{padding:var(--bw-space-2) var(--bw-space-4);text-align:left;border-bottom:1px solid var(--bw-color-line);vertical-align:top}
th{font-weight:var(--bw-font-weight-emphasis);font-size:var(--bw-type-meta);color:var(--bw-color-text-muted);white-space:nowrap;position:sticky;top:0;background:var(--bw-color-surface)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bw-color-surface-subtle)}
td.zahlen{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td .neben{display:block;color:var(--bw-color-text-muted);font-size:var(--bw-type-meta)}
td.tun{white-space:nowrap;text-align:right}
code.schluessel{font-family:var(--bw-font-mono);font-size:var(--bw-type-meta);letter-spacing:.04em;white-space:nowrap}

/* ---- Stand einer Lizenz -------------------------------------------------
   Vier Zustände. Nie nur über Farbe: jeder trägt sein Wort mit sich, die
   Farbe ist die Zugabe (PRODUCT.md, Barrierefreiheit). */
.stand{
  display:inline-block;padding:1px var(--bw-space-2);border-radius:var(--bw-radius-pill);
  font-size:var(--bw-type-meta);white-space:nowrap;border:1px solid transparent;
}
.stand-aktiv     {background:var(--bw-color-success-surface);color:var(--bw-color-success);border-color:var(--bw-color-success)}
.stand-neu       {background:var(--bw-color-accent-surface); color:var(--bw-color-accent); border-color:var(--bw-color-accent)}
.stand-abgelaufen{background:var(--bw-color-warning-surface);color:var(--bw-color-warning);border-color:var(--bw-color-warning)}
.stand-gesperrt  {background:var(--bw-color-danger-surface); color:var(--bw-color-danger); border-color:var(--bw-color-danger)}

/* ---- Werkzeugzeile über einer Liste ------------------------------------- */
.werkzeuge{display:flex;flex-wrap:wrap;gap:var(--bw-space-3);align-items:flex-end;margin-bottom:var(--bw-space-4)}
.werkzeuge label{margin:0}
.werkzeuge .weit{flex:1 1 220px}
.werkzeuge .schmal{flex:0 0 170px}
.werkzeuge .schieber{margin-left:auto}

/* ---- Kasten ------------------------------------------------------------- */
.kasten{
  background:var(--bw-color-surface);border:1px solid var(--bw-color-line);
  border-radius:var(--bw-radius-md);padding:var(--bw-space-5);margin-bottom:var(--bw-space-5);
}
.kasten h3{margin:0 0 var(--bw-space-4);font-size:var(--bw-type-section);font-weight:var(--bw-font-weight-base)}
.reihe{display:flex;flex-wrap:wrap;gap:var(--bw-space-4)}
.reihe label{flex:1 1 200px;margin-bottom:0}

.leer{
  padding:var(--bw-space-6);text-align:center;color:var(--bw-color-text-muted);
  border:1px dashed var(--bw-color-line-strong);border-radius:var(--bw-radius-md);line-height:1.5;
}

/* ---- Blende ------------------------------------------------------------- */
dialog.blende{
  border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-lg);
  box-shadow:var(--bw-shadow-raised);padding:0;
  width:min(560px,calc(100vw - 32px));background:var(--bw-color-surface);color:var(--bw-color-text);
}
dialog.blende::backdrop{background:rgb(23 26 29 / 45%)}
dialog.blende .kopf{
  display:flex;align-items:center;gap:var(--bw-space-4);
  padding:var(--bw-space-4) var(--bw-space-5);border-bottom:1px solid var(--bw-color-line);
}
dialog.blende .kopf h3{margin:0;font-size:var(--bw-type-section);font-weight:var(--bw-font-weight-base)}
dialog.blende .koerper{padding:var(--bw-space-5);max-height:70vh;overflow:auto}
dialog.blende .fuss{
  display:flex;gap:var(--bw-space-2);justify-content:flex-end;
  padding:var(--bw-space-4) var(--bw-space-5);border-top:1px solid var(--bw-color-line);
  background:var(--bw-color-surface-subtle);
}

/* Der erzeugte Schlüssel — das Einzige auf dieser Seite, was zum Abschreiben
   gedacht ist. Deshalb groß, monospaced und in einem Feld, das sich in einem
   Zug markieren lässt. */
.schluesselfeld{
  display:flex;gap:var(--bw-space-2);align-items:center;
  background:var(--bw-color-success-surface);border:1px solid var(--bw-color-success);
  border-radius:var(--bw-radius-sm);padding:var(--bw-space-3);margin-bottom:var(--bw-space-3);
}
.schluesselfeld input{
  font-family:var(--bw-font-mono);font-size:var(--bw-type-section);letter-spacing:.06em;
  border-color:var(--bw-color-success);
}

@media (max-width:640px){
  main{padding:var(--bw-space-4) var(--bw-space-3)}
  th,td{padding:var(--bw-space-2)}

  /* Die Kopfzeile passt auf einem Telefon nicht in eine Reihe. Ohne Umbruch
     schiebt sie die ganze Seite in die Breite, und dann wandert alles beim
     Wischen mit — nicht nur die Kopfzeile. Deshalb umbrechen statt kürzen:
     Wortmarke und Name bleiben oben, angemeldete Person und Abmelden gehen
     in die zweite Reihe. Die Reiter darunter scrollen ohnehin für sich. */
  header{flex-wrap:wrap;gap:var(--bw-space-2) var(--bw-space-3);position:static}
  header .rechts{gap:var(--bw-space-3)}
  nav.reiter{position:static}
}