/* ==========================================================================
   KYTH.Kladde: Bausteine der App-Oberfläche auf den Tokens des CI-Kits (kyth-tokens.css).
   Dunkles Thema, einziges Thema. Kopfzeile, Navigation, Formularfeld, Schaltfläche,
   Hinweisband, Tabelle, Leerzustand und das Band der Testumgebung. Das Kit kennt diese
   Bausteine nicht; sie gehen als Kandidaten an die CI-Sitzung.
   Textfarben stehen auf --surface oder (--black) auf --green und --blue; der Test der
   Gestaltung rechnet den Kontrast nach.
   ========================================================================== */

/* Ein Element mit hidden bleibt verborgen, auch wenn seine Klasse display setzt. */
[hidden] { display: none !important; }

/* Rand der Eingabefelder: 0.35 Deckkraft ergibt gegen --surface-2 3,22:1 und gegen --surface 3,42:1
   (WCAG 1.4.11, mindestens 3:1). --white-20 des Kits erreicht nur etwa 2:1. */
:root { --feldrand: rgba(255,255,255,0.35); }

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

main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 16px;
}

main h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; }
main h2 { font-size: clamp(20px, 3vw, 28px); margin-bottom: 8px; }

/* --- Testumgebung -------------------------------------------------------- */
.testband {
  background: var(--blue);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 16px;
}

/* --- Kopfzeile und Navigation ------------------------------------------- */
.kopfzeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.kopfkonto { margin-left: auto; }
.wortmarke { font-size: 22px; color: var(--white); border-radius: var(--radius-control); }
.bereichsname { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-60); }

.navigation ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.navigation a {
  display: block;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  color: var(--white-80);
  transition: background 0.2s, color 0.2s;
}
.navigation a:hover { background: var(--white-08); color: var(--white); }
/* Die aktuelle Seite trägt einen grünen unteren Rand von 2px; Schweben färbt nur den Grund. Der Rand bleibt
   im Kontrastmodus (forced-colors) erhalten, ein Grund fiele dort weg. */
.navigation a[aria-current="page"],
.unternavigation a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--green);
}

/* Kopf: Name, Rolle, Mandant oder Mandantenwahl, Abmelden. Die Meldung bricht in eine eigene Zeile. */
.kopfkonto-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.kopfname { color: var(--white); font-weight: 600; }
.kopfmandant { color: var(--white-80); }
.kopfmandantgruppe { display: flex; align-items: center; gap: 12px; }
/* Betrieb und Person sind zwei Gruppen: etwas mehr Luft zwischen ihnen als innerhalb. */
.kopfmandantgruppe + .kopfname { margin-left: 16px; }
/* Logos sind für weißes Papier gemacht: Auf dem dunklen Grund steht das Logo auf einer hellen Bildfläche. */
.kopflogo { display: block; height: 32px; max-width: 128px; padding: 4px 8px; object-fit: contain; background: var(--white); border-radius: var(--radius-control); }
.kopfwahl { display: flex; align-items: center; gap: 8px; }
.kopfwahl label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-60); }
.kopfkonto-inhalt .hinweisband { flex-basis: 100%; }
/* Die Meldung der Kopfzeile steht unter ihr, nicht in ihr (huelle.js setzt sie hinter die Kopfzeile). */
.kopfzeile + .hinweisband { padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.kopfkonto-inhalt .btn-secondary { padding: 8px 16px; }

/* --- Karte und Formularfeld --------------------------------------------- */
.karte {
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
/* Ohne sichtbares Formular bleibt von der Karte nur Überschrift und ein Satz: kein Kasten um einzelne Sätze;
   der Innenabstand bleibt, damit die Überschrift nicht nach links springt. */
.karte:not(:has(form:not([hidden]))) { background: none; border: none; }
.hilfetext { color: var(--white-60); margin-bottom: 24px; }
.karte > :last-child { margin-bottom: 0; }
.formular + .hilfetext { margin-top: 16px; }
/* Verweise im Text sind unterstrichen wie in der Fußzeile; Navigation und Schaltflächen bleiben ohne. */
.tabelle a, .hilfetext a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.tabelle a:hover, .hilfetext a:hover { color: var(--green-light); }

.formular { display: flex; flex-direction: column; gap: 24px; max-width: 36rem; }
/* Der Behälter mehrerer Felder, den ein Skript baut: gleicher Abstand wie im Formular. */
.felder { display: flex; flex-direction: column; gap: 24px; max-width: 36rem; }
.felder h2 { margin-bottom: 0; }
.formularfeld { display: flex; flex-direction: column; gap: 6px; }
.formularfeld label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-60); }
.formularfeld input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--white);
  background: var(--surface-2);
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-control);
  transition: border-color 0.2s;
}
.formularfeld select,
.kopfwahl select {
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--white);
  background: var(--surface-2);
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-control);
}
.kopfwahl select { padding: 8px 12px; }
.formularfeld select:focus-visible,
.kopfwahl select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green); }
.formularfeld input:hover,
.formularfeld select:hover,
.kopfwahl select:hover,
.tabelle td select:hover { border-color: var(--white-60); }
.formularfeld input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green); }
/* Gesperrte Felder: anderer Grund (--surface-3), gedämpfte Schrift, gesperrter Zeiger. Unter forced-colors
   fällt der Grund weg; dort zeigt ein gepunkteter Rand den Zustand. */
.formularfeld input:disabled,
.formularfeld select:disabled,
.kopfwahl select:disabled,
.tabelle td select:disabled {
  color: var(--white-60);
  background: var(--surface-3);
  cursor: not-allowed;
}
.formularfeld input:disabled:hover,
.formularfeld select:disabled:hover,
.kopfwahl select:disabled:hover,
.tabelle td select:disabled:hover { border-color: var(--feldrand); }
/* Ungültige Angabe: lila Rand, die Warnfarbe des Kits (.note.warn); der Fokusring bleibt grün. */
.formularfeld input[aria-invalid="true"],
.formularfeld select[aria-invalid="true"],
.tabelle td select[aria-invalid="true"] { border-color: var(--purple); }

/* Zustimmung: ein Häkchen mit dem Satz des Servers daneben. */
.haken { display: flex; align-items: flex-start; gap: 12px; }
.haken input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green); }
.haken label { color: var(--white-80); line-height: 1.5; }
.dokumente { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dokumente a { color: var(--white-80); text-decoration: underline; text-underline-offset: 3px; }
.dokumente a:hover { color: var(--white); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Startseite: die Lücken der Einrichtung als Liste, darunter der Weg weiter. */
.luecken { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 16px 0; color: var(--white-80); }

/* --- Schaltflächen ------------------------------------------------------- */
/* Die Hauptaktion ist .btn-primary des Kits (Normal, Schweben, Fokus); der Fokusring ist der grüne des Kits.
   Im Formular steht sie links statt gestreckt. */
main .btn-primary { align-self: flex-start; }
/* Gesperrt: gedämpfte Schrift auf --surface-3 (6,6:1), kein Anheben, gesperrter Zeiger. Nur Deckkraft
   machte die Schrift kaum lesbar. */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-primary:disabled:hover,
.btn-secondary:disabled:hover {
  color: var(--white-60);
  background: var(--surface-3);
  border-color: transparent;
  transform: none;
  cursor: not-allowed;
}

/* --- Hinweisband --------------------------------------------------------- */
.hinweisband {
  margin: 0;
  color: var(--white-80);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}
/* Eine sichtbare Statuszeile hat 16px Abstand zum Folgenden. Wo ein gap den Abstand regelt, gibt es keinen
   zusätzlichen Rand. */
main .hinweisband:not([hidden]), main .leerzustand { margin-bottom: 16px; }
.formular .hinweisband, .formular .leerzustand,
.felder .hinweisband, .felder .leerzustand,
.kopfkonto-inhalt .hinweisband, .kopfkonto-inhalt .leerzustand,
.supportband .hinweisband, .supportband .leerzustand,
.zweite-stufe .hinweisband, .zweite-stufe .leerzustand { margin-bottom: 0; }

/* --- Tabelle ------------------------------------------------------------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-60);
  border-bottom: 1px solid var(--white-20);
}
.tabelle td { padding: 12px; color: var(--white-80); border-bottom: 1px solid var(--border); }

/* --- Leerzustand --------------------------------------------------------- */
.leerzustand {
  margin: 0;
  color: var(--white-60);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Fußzeile ------------------------------------------------------------ */
.fusszeile {
  padding: 24px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.fusszeile ul { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; }
.fusszeile a { color: var(--white-60); text-decoration: underline; text-underline-offset: 3px; }
.fusszeile a:hover { color: var(--white); }
.fusshinweis { margin-top: 12px; color: var(--white-60); }

/* --- Fokus und Bewegung -------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .navigation a, .formularfeld input { transition: none; }
}

/* --- Einstellungen: Unternavigation, Gruppen, Fassungen, Kopfliste, Logo ---------------------- */
.unternavigation { margin-bottom: 24px; }
.unternavigation ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.unternavigation a {
  display: block;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  color: var(--white-80);
}
.unternavigation a:hover { background: var(--white-08); color: var(--white); }

.formulargruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 16px;
  padding: 16px 0 24px;
  border: none;
  border-top: 1px solid var(--border);
}
.formulargruppe legend {
  padding: 0 8px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-60);
}
.formulargruppe .haken,
.formulargruppe .logovorschau { grid-column: 1 / -1; }
.formularfeld input[type="file"] { width: 100%; padding: 8px 0; border: none; background: none; color: var(--white-80); }
/* Der Knopf der Dateiauswahl gleicht dem Zweitknopf des Kits; der Dateiname steht daneben in --white-80. */
input[type="file"]::file-selector-button {
  margin-right: 16px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--border-hover); background: var(--white-05); }

.kopfliste { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.kopfliste > li { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.kopfzeile-eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Das Kit setzt für jedes section den Abstand der Website; in der App steht ein Abschnitt im Fluss der Seite. */
main section { padding: 0; max-width: none; margin: 0; }
.kopfbearbeitung, .fassungen { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.fassungsliste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; }

/* Logos sind für weißes Papier gemacht: Die Vorschau steht auf weißem Grund, ein dunkles Logo bleibt lesbar. */
.logovorschau {
  max-width: 240px;
  max-height: 96px;
  padding: 8px;
  background: var(--white);
  border: none;
  border-radius: var(--radius-control);
  object-fit: contain;
}

/* --- Benutzer, Support-Zugang, Protokoll, Mein Konto ---------------------------------------- */
#liste, #protokollinhalt { overflow-x: auto; margin-bottom: 24px; }
main h3 { font-size: 18px; margin: 24px 0 12px; }
.tabelle td.datum, .tabelle td .btn-secondary, .tabelle td .badge, .tabelle td a { white-space: nowrap; }
/* Name, Funktion und Adresse stehen in einer Zelle untereinander, Einladung offen unter dem Status; so passt die
   Benutzerliste bei 1280px ohne seitliches Blättern. Die Zelle der Handlungen bricht zwischen den Knöpfen um. */
/* Die Adresse bricht nur, wenn sie allein breiter ist als die Zelle; sonst wird die Spalte so breit wie sie. */
.tabelle td .einzelheiten { overflow-wrap: break-word; }
.tabelle td .btn-secondary { margin: 0 8px 4px 0; padding: 6px 12px; }
.tabelle td select {
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--white);
  background: var(--surface-2);
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-control);
}
.tabelle td select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green); }
.einzelheiten {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white-60);
}
.blaetterleiste { margin-top: 16px; }
.mandantenliste { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 16px 0 24px; }
.mandantenliste li { display: flex; align-items: center; gap: 12px; }
#kontoangaben p { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
/* Mein Konto: Beschriftung und Wert als zwei Spalten; die Absätze lösen sich in ihre Zellen auf. */
.angabenraster { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; align-items: baseline; margin-bottom: 24px; }
#kontoangaben .angabenraster p { display: contents; }
.abschnitt { margin-top: 40px; }
.mandantkopf { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.mandantkopf h2 { margin-bottom: 0; }
.mandantname { margin: 0 0 24px; font-size: 20px; color: var(--white); }
#kontoangaben strong { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-60); font-weight: 500; }
/* --- Betreiberbereich: Support-Band, Geheimnis der zweiten Stufe, Nachfragen ----------------- */
/* Das feste Band der Support-Ansicht liegt als voller Streifen über der Kopfzeile des Mandantenbereichs
   und bleibt beim Blättern stehen; wie das Band der Testumgebung ist es kein Kasten. */
.supportband {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 6px 16px;
  background: var(--blue);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.supportband .btn-secondary { padding: 4px 12px; color: var(--black); border-color: var(--black); }
/* Ein Satz im Band steht in Satzschreibung: das Band setzt Großbuchstaben und Sperrung nur für seine Kennzeichnung. */
.supportband .hinweisband {
  flex-basis: 100%;
  text-align: center;
  color: var(--black);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
/* Auf Blau trägt der grüne Ring des Kits nicht (1,6:1); im Band ist er schwarz (5,4:1). */
.supportband :focus-visible { outline-color: var(--black); }

.angabe { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-60); }
.geheimnis { font-family: var(--font-mono); font-size: 14px; color: var(--white); overflow-wrap: anywhere; user-select: all; }
.geheimnis-adresse { font-size: 12px; line-height: 1.5; color: var(--white-60); }
.zweite-stufe { display: flex; flex-direction: column; gap: 20px; }
.zweite-stufe h2 { margin-bottom: 0; }
/* Der QR-Code bringt seinen weißen Grund mit Ruhezone selbst mit; auf dem dunklen Grund braucht er keinen Rahmen. */
.qr { display: block; width: 224px; max-width: 100%; height: auto; border-radius: var(--radius-control); }
.frage { color: var(--white-80); align-self: center; }
#kontoangaben, #ansicht, #aktionen { margin-bottom: 24px; }

/* --- Handybreite: Logo, Mandant und Abmelden in einer Zeile; Name und Rolle stehen auf Mein Konto -------- */
@media (max-width: 640px) {
  .kopfname, .kopfkonto-inhalt .badge { display: none; }
  .kopfzeile { gap: 8px 12px; }
  .navigation a, .unternavigation a { padding: 8px; }
  /* Zeile 1: Wortmarke und Navigation; Zeile 2: Mandant und Abmelden. Der Mandant gibt Platz ab (ein langer Name
     wird gekürzt), damit Abmelden nie in eine dritte Zeile fällt. */
  .kopfkonto { flex: 1 1 100%; min-width: 0; }
  .kopfkonto-inhalt { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .kopfmandantgruppe { flex: 1 1 0; min-width: 0; gap: 8px; }
  .kopfmandant { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kopfwahl { flex: 1 1 0; min-width: 0; }
  .kopfwahl select { flex: 1 1 0; min-width: 0; max-width: 100%; }
  .kopflogo { max-width: 64px; flex: none; }
  /* Beim Betreiber stehen Wortmarke, Kennzeichen und Abmelden in Zeile 1, die Navigation in Zeile 2. */
  .kopfzeile[data-bereich="betreiber"] .kopfkonto { order: 2; flex: 0 0 auto; margin-left: auto; }
  .kopfzeile[data-bereich="betreiber"] .navigation { order: 3; flex: 1 1 100%; }
  .kopfkonto-inhalt .btn-secondary { padding: 6px 12px; }
  main { padding-inline: 16px; }
  .formularfeld select, .formularfeld input { max-width: 100%; }
}

/* --- Windows-Kontrastmodus (forced-colors) ------------------------------ */
/* Der Grund der aktuellen Seite fiele weg; der untere Rand bleibt und nimmt die Systemfarbe der Auswahl, die
   übrigen Verweise behalten keinen Rand. */
@media (forced-colors: active) {
  .navigation a, .unternavigation a { border-bottom-color: Canvas; }
  .navigation a[aria-current="page"],
  .unternavigation a[aria-current="page"] { border-bottom-color: Highlight; }
  .formularfeld input:disabled, .formularfeld select:disabled { border-style: dotted; }
  .formularfeld input[aria-invalid="true"], .formularfeld select[aria-invalid="true"] { border-color: Mark; border-width: 2px; }
}