/* Vorlage H · Indigo-Arbeitsplatz: Bauteile
   Reihenfolge der Einbindung: schriften.css → tokens.css → komponenten.css.
   Diese Datei bringt ihre Grundlage selbst mit (statt ../_basis.css), damit der Ordner H
   allein weitergegeben werden kann. Nur Token-Namen verwenden, keine freien Hex-Werte. */

/* Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); font-size: var(--text-m); color: var(--text); background: var(--grund);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Schrift und Grundelemente */
html, body { height: 100%; }
body { line-height: 1.66; text-rendering: optimizeLegibility; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.22; text-wrap: balance; }
h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-l); } h3 { font-size: 16px; }
p { margin: 0 0 .72em; }
a { color: var(--akzent-text); text-underline-offset: 2px; text-decoration-thickness: 1px; }
::selection { background: color-mix(in srgb, var(--akzent) 26%, transparent); }
:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 18%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--linie) transparent; }
@keyframes ankunft { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Kleine Schriftmarken: Monospace, Versalien, gesperrt. Nur für Kennungen, Zeiten, Überschriften von Gruppen */
.marke-zeile, .nachricht__wer, .leiste__gruppenkopf, .neben__kopf, .tabelle thead th, .abzeichen {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-schwach); font-variant-numeric: tabular-nums; }
.mono, .kennwert { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kennwert { font-size: var(--text-s); color: var(--text-schwach); }
.leise { color: var(--text-leise); }

.rahmen { height: 100%; display: flex; flex-direction: column; }

/* Kopfleiste: Glas über der Fläche */
.kopfleiste { height: var(--leiste-hoch); flex: 0 0 auto; display: flex; align-items: center; gap: 18px;
  padding: 0 16px; background: var(--glas-grund); backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--linie-leise); position: relative; z-index: 10; }
.kopfleiste__marke { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.kopfleiste__mitte { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.kopfleiste__rechts { display: flex; align-items: center; gap: 8px; }

.kopfmarke { display: inline-flex; align-items: center; gap: 9px; padding: 4px 10px 4px 5px; min-width: 0;
  border: 1px solid var(--akzent-rand); border-radius: var(--r-m); background: var(--akzent-flaeche);
  color: var(--text); cursor: pointer; transition: background-color var(--takt-lang) var(--kurve); }
.kopfmarke:hover { background: color-mix(in srgb, var(--akzent) 14%, var(--flaeche-hoch)); }
.kopfmarke__name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kuerzel { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 24px;
  border-radius: var(--r-s); background: linear-gradient(155deg, color-mix(in srgb, var(--akzent) 88%, #fff), var(--akzent));
  color: var(--auf-akzent); font-family: var(--mono); font-size: 12px; font-weight: 500; }

/* Knöpfe: eckig (6px), 32px hoch */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 13px;
  border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche-hoch); color: var(--text);
  font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--takt-kurz) var(--kurve), border-color var(--takt-kurz) var(--kurve), transform 90ms var(--kurve-schnapp); }
.knopf:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, var(--flaeche-hoch)); border-color: var(--akzent-rand); }
.knopf:active:not(:disabled) { transform: translateY(1px); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf--haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); box-shadow: var(--hebung); }
.knopf--haupt:hover:not(:disabled) { background: color-mix(in srgb, var(--akzent) 86%, var(--text)); border-color: color-mix(in srgb, var(--akzent) 86%, var(--text)); }
.knopf--nackt { border-color: transparent; background: transparent; color: var(--text-leise); height: 28px; padding: 0 8px; box-shadow: none; }
.knopf--nackt:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); border-color: transparent; }
.knopf svg { width: 16px; height: 16px; flex: 0 0 auto; }

.abzeichen { font-size: 11px; letter-spacing: .07em; border: 1px solid var(--linie); border-radius: var(--r-s); padding: 1px 7px; color: var(--text-leise); white-space: nowrap; }
.abzeichen--ok   { border-color: var(--ok); color: var(--ok); background: var(--ok-flaeche); }
.abzeichen--warn { border-color: var(--warn); color: var(--warn); background: var(--warn-flaeche); }

/* Hinweisleiste unter der Kopfleiste */
.hinweisleiste { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 7px 16px; font-size: 13.5px;
  border-bottom: 1px solid var(--linie-leise); border-left: 4px solid var(--warn-punkt); background: var(--warn-flaeche); }
.hinweisleiste .knopf--nackt { margin-left: auto; }

/* Drei Spalten: Leiste | Arbeitsbereich | Nebenspalte */
.flaeche { flex: 1 1 auto; display: grid; grid-template-columns: var(--spalte-links) minmax(0,1fr) var(--spalte-rechts); min-height: 0; }

.leiste { border-right: 1px solid var(--linie-leise); background: var(--flaeche); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.leiste__rolle { flex: 1 1 auto; overflow-y: auto; padding: 12px 9px 26px; }
.leiste__gruppe { margin-bottom: 16px; }
.leiste__gruppenkopf { display: flex; align-items: center; gap: 6px; padding: 4px 7px 7px; font-size: 11px; letter-spacing: .11em; }
.leiste__unterbau { padding-left: 11px; margin-left: 8px; border-left: 1px solid var(--linie-leise); }
.leiste__fuss { border-top: 1px solid var(--linie-leise); padding: 10px 12px; display: flex; gap: 8px; }
.leiste__fuss .knopf { flex: 1; }
.projektkopf { display: flex; align-items: center; gap: 7px; padding: 7px 9px; font-size: 13.5px; font-weight: 500; }
.eintrag { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 9px; border: 1px solid transparent;
  border-radius: var(--r-m); background: transparent; color: var(--text-leise); cursor: pointer; text-align: left; font-size: 13.5px;
  transition: background-color var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve); }
.eintrag:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.eintrag[aria-current="true"] { background: var(--flaeche-hoch); border-color: var(--linie-leise); color: var(--text); box-shadow: var(--hebung); }
.eintrag__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag__zahl { font-family: var(--mono); font-size: 11.5px; color: var(--text-schwach); }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--farbe, var(--akzent)); flex: 0 0 auto; }

/* Arbeitsbereich */
.mitte { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.bahn { flex: 1 1 auto; overflow-y: auto; padding: 32px 28px 16px; }
.bahn__innen { max-width: 740px; margin: 0 auto; }
.seitenkopf { margin-bottom: 28px; }
.seitenkopf p { color: var(--text-leise); margin-top: 6px; }

.nachricht { padding: 0 0 28px; animation: ankunft .2s var(--kurve) backwards; }
.nachricht__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.nachricht--fachkopf .nachricht__wer { color: var(--akzent-text); }
.nachricht__zeit { font-family: var(--mono); font-size: 11.5px; color: var(--text-schwach); margin-left: auto; }
.nachricht--nutzer .nachricht__koerper { background: var(--flaeche); border-left: 3px solid var(--akzent-rand);
  border-radius: 0 var(--r-m) var(--r-m) 0; padding: 11px 16px; max-width: var(--lesebreite); white-space: pre-wrap; }
.nachricht__werkzeuge { display: flex; gap: 2px; margin-top: 6px; }

.fliess { font-size: 15.5px; line-height: 1.72; overflow-wrap: anywhere; max-width: var(--lesebreite); }
.fliess h3 { margin: 22px 0 8px; }
.fliess ul { margin: 0 0 .75em; padding-left: 23px; } .fliess li { margin-bottom: 5px; }
.zitat-marke { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px;
  margin: 0 1px; vertical-align: 2px; border: 1px solid var(--akzent-rand); border-radius: var(--r-s); background: var(--akzent-flaeche);
  color: var(--akzent-text); font-family: var(--mono); font-size: 11px; line-height: 1; text-decoration: none; }
.zitat-marke:hover { background: var(--akzent); color: var(--auf-akzent); }

.tabellen-huelle { overflow-x: auto; margin: 6px 0 14px; }
.tabelle { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabelle th, .tabelle td { border-bottom: 1px solid var(--linie-leise); padding: 7px 12px; text-align: left; white-space: nowrap; }
.tabelle thead th { border-bottom-color: var(--linie); font-size: 11px; letter-spacing: .08em; color: var(--text-leise); font-weight: 500; }
.tabelle td.zahl, .tabelle th.zahl { font-family: var(--mono); text-align: right; }
.tabelle tbody tr:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }

.verfassen { flex: 0 0 auto; padding: 10px 28px 18px; }
.verfassen__innen { max-width: 740px; margin: 0 auto; }
.verfassen__kasten { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--linie); border-radius: var(--r-m);
  background: var(--flaeche-hoch); padding: 9px; transition: border-color var(--takt-kurz) var(--kurve), box-shadow var(--takt-kurz) var(--kurve); }
.verfassen__kasten:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); }
.verfassen__eingabe { flex: 1 1 auto; border: 0; background: transparent; font: inherit; color: var(--text); font-size: 15.5px; line-height: 1.55; resize: none; padding: 4px 0; max-height: 220px; outline: none; min-width: 0; }
.verfassen__eingabe::placeholder { color: var(--text-schwach); }
.verfassen__zeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 9px; color: var(--text-schwach); font-size: 12.5px; }

/* Startansicht: Fachbereich wählen. Jede Karte bringt ihre Farbe als --akzent mit */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.karte { --akzent: var(--karten-farbe); --akzent-text: var(--karten-farbe);
  --akzent-flaeche: color-mix(in srgb, var(--akzent) 9%, var(--flaeche-hoch)); --akzent-rand: color-mix(in srgb, var(--akzent) 42%, var(--linie));
  position: relative; display: flex; flex-direction: column; gap: 13px; text-align: left; padding: 19px 19px 17px;
  background: var(--flaeche-hoch); border: 1px solid var(--linie-leise); border-radius: var(--r-m); cursor: pointer; color: inherit;
  box-shadow: var(--hebung); animation: ankunft .2s var(--kurve) backwards;
  transition: border-color var(--takt) var(--kurve), background-color var(--takt) var(--kurve), box-shadow var(--takt) var(--kurve), transform var(--takt) var(--kurve); }
.karte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--akzent);
  border-radius: 0 0 var(--r-s) var(--r-s); transform: scaleX(0); transform-origin: left; transition: transform var(--takt) var(--kurve); }
.karte:hover, .karte:focus-visible { border-color: var(--akzent-rand); background: var(--akzent-flaeche); transform: translateY(-3px);
  box-shadow: var(--hebung-stark), 0 12px 30px -10px color-mix(in srgb, var(--akzent) 34%, transparent); }
.karte:hover::after, .karte:focus-visible::after { transform: scaleX(1); }
.karte:nth-child(2) { animation-delay: 30ms; } .karte:nth-child(3) { animation-delay: 60ms; }
.karte:nth-child(4) { animation-delay: 90ms; } .karte:nth-child(5) { animation-delay: 120ms; }
.karte__kopf { display: flex; align-items: flex-start; gap: 11px; }
.karte__name { font-size: 16.5px; font-weight: 600; letter-spacing: -.014em; }
.karte__titel { font-size: 13.5px; color: var(--text-leise); margin-top: 2px; }
.karte__beschreibung { font-size: 14px; line-height: 1.58; color: var(--text-leise); margin: 0; }
.karte__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--linie-leise); padding-top: 12px; margin-top: auto; }

/* Nebenspalte: Belege */
.neben { border-left: 1px solid var(--linie-leise); background: var(--flaeche); overflow-y: auto; padding: 16px 16px 24px; }
.neben__kopf { font-size: 11px; letter-spacing: .11em; margin: 4px 2px 10px; display: block; }
.quelle { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; padding: 11px 12px; margin-bottom: 8px;
  background: var(--flaeche-hoch); border: 1px solid var(--linie-leise); border-radius: var(--r-m); box-shadow: var(--hebung); }
.quelle[data-gewaehlt="true"] { border-color: var(--akzent-rand); box-shadow: inset 3px 0 0 var(--akzent), var(--hebung); }
.quelle__nr { font-family: var(--mono); font-size: 12px; color: var(--akzent-text); padding-top: 1px; }
.quelle__titel { font-size: 14px; font-weight: 500; line-height: 1.4; }
.quelle__auszug { grid-column: 2; font-size: 13px; color: var(--text-leise); line-height: 1.5; margin: 0; }
.quelle__herkunft { grid-column: 2; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--text-schwach); }
.balken { height: 6px; width: 100%; background: var(--flaeche-tief); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; border-radius: 3px; }
.balken > span { display: block; height: 100%; background: var(--akzent); border-radius: 3px; }
.quelle__herkunft .balken { width: 56px; }
.last { display: grid; gap: 6px; margin-top: 22px; }
.last__zeile { display: flex; justify-content: space-between; font-size: 13px; }

/* Dialog */
.dialog__grund { position: fixed; inset: 0; background: color-mix(in srgb, var(--flaeche-tief) 62%, transparent);
  display: flex; align-items: flex-start; justify-content: center; padding: clamp(24px, 10vh, 100px) 16px; z-index: 40; overflow-y: auto; }
.dialog__grund[hidden] { display: none; }
.dialog { width: 100%; max-width: 560px; background: var(--flaeche-hoch); border: 1px solid var(--linie-leise); border-radius: var(--r-l);
  box-shadow: var(--hebung-blatt); padding: 26px 30px 24px; animation: ankunft .22s var(--kurve); }
.dialog__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dialog__fuss { display: flex; gap: 10px; margin-top: 18px; }
.wahlfeld { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.wahlfeld__zeile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-m);
  background: var(--flaeche-hoch); cursor: pointer; transition: border-color var(--takt-kurz) var(--kurve), background-color var(--takt-kurz) var(--kurve); }
.wahlfeld__zeile:has(input:checked) { border-color: var(--akzent-rand); background: var(--akzent-flaeche); }
.wahlfeld__zeile--aus { cursor: not-allowed; border-style: dashed; background: var(--flaeche); color: var(--text-leise); }
.wahlfeld__zeile input { accent-color: var(--akzent); margin: 0; }
.wahlfeld__name { font-weight: 500; flex: 1 1 auto; }
.wahlfeld__satz { display: block; font-weight: 400; font-size: 13px; color: var(--text-leise); }

.knopf.nur-schmal { display: none; }
[data-ansicht="start"] .nur-gespraech, [data-ansicht="gespraech"] .nur-start { display: none; }

@media (max-width: 1080px) {
  .flaeche { grid-template-columns: 236px minmax(0,1fr); }
  .neben { display: none; }
}
@media (max-width: 720px) {
  .flaeche { grid-template-columns: minmax(0,1fr); position: relative; }
  .leiste { display: none; }
  [data-leiste="auf"] .leiste { display: flex; position: absolute; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 20; box-shadow: var(--hebung-blatt); }
  .knopf.nur-schmal { display: inline-flex; }
  .kopfleiste { gap: 8px; padding: 0 10px; }
  .kopfleiste__marke .marke-zeile, .menue__name, .weit { display: none; }
  .bahn { padding: 22px 16px 12px; } .verfassen { padding: 8px 16px 14px; }
  .dialog { padding: 22px 18px 20px; }
}