/*
 * Erscheinungsbild von SkillDB — EVVA CI in der Formsprache des Skills
 * „evva-ci-modern“.
 *
 * ── Woher die Werte kommen ─────────────────────────────────────────────────
 * Diese Datei enthält KEINEN einzigen Farb-, Radius- oder Schriftwert. Alles
 * steht in evva-modern.css, einem Erzeugnis von scripts/build_tokens.py des
 * Skills, und wird hier nur über var(--evva-*) gelesen. Wer einen Wert ändern
 * will, ändert ihn dort in der Tokenquelle und erzeugt die Datei neu — nicht
 * hier. Das ist harte Regel 10 des Skills und zugleich der Grund, warum das
 * helle und das dunkle Bild nicht auseinanderlaufen können.
 *
 * Die Marken- und Kontrastregeln des CD Manuals gelten unverändert; sie
 * stecken in den Tokens. Die drei, die man beim Schreiben im Kopf haben muss:
 *
 *   1. Gelb ist Fläche, nie Text und nie Linie. #FFE500 auf Weiß sind 1.28:1.
 *      Der Text steht IM Gelb (--evva-fg-on-yellow), nie in Gelb.
 *   2. Eine gelbe Fläche ohne Textlabel braucht eine Kante auf --evva-line-strong.
 *      Jede gelbe Fläche hier trägt ein Wort, deshalb kommt keine vor.
 *   3. Status ist eine gefüllte Pille mit dunklem Text, nie eingefärbter Text.
 *
 * ── Was die Formsprache ausmacht ───────────────────────────────────────────
 * Schrift Quicksand (SIL OFL, unten lokal eingebunden). Rahmenlose Karten mit
 * Radius 20 und weichem Schatten statt Kästen mit 1-px-Rand. Tabellen ohne
 * senkrechte Linien, Zeilenhöhe 48. Knöpfe pillenförmig, 48 hoch. Der
 * Anwendungsrahmen — dunkle Kopfleiste, weiße Seitenleiste, grau eingesetzte
 * Arbeitsfläche — kommt vollständig aus .evva-app in evva-modern.css; hier
 * steht nur, was SkillDB darüber hinaus braucht.
 *
 * ── Erscheinungsbilder ─────────────────────────────────────────────────────
 * Drei Zustände, nicht zwei: ohne Wahl folgt die Seite dem System, mit Wahl
 * trägt <html> ein data-theme. Beides bedient evva-modern.css. Hier steht
 * dazu nichts mehr — genau das ist der Gewinn.
 *
 * Kein Framework, kein Build: die Datei wird direkt ausgeliefert.
 */

/* ── Schrift ──────────────────────────────────────────────────────────────
 * Quicksand wird mitgeliefert, nicht nachgeladen: Die Anwendung muss ohne
 * Internetzugang laufen, und ohne die Datei fiele die Seite still auf Open
 * Sans beziehungsweise Verdana zurück. Zwei Schnitte genügen, weil die
 * variable Fassung 400–700 in einer Datei trägt. Die Lizenz liegt daneben in
 * fonts/OFL.txt.
 *
 * Die Adressen sind relativ zu dieser Datei, nicht absolut: Nur so läuft die
 * Oberfläche auch unter einem Präfix wie /skilldb hinter nginx.
 */
@font-face {
  font-family: Quicksand;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/quicksand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Quicksand;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/quicksand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Feste Schrift für Slugs, Versionsnummern und Quelltext. Eine eigene Variable,
 * damit sie an einer Stelle steht; die Tokendatei führt keine mit, weil das
 * Rezept für die Zeichenbreite nichts vorschreibt. Nur generische Familien,
 * also nichts, was auf einem System fehlen könnte.
 */
:root {
  --schrift-fest: ui-monospace, monospace;
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */

/*
 * body-Grund, -Schrift und -Farbe setzt evva-modern.css. Hier bleibt nur der
 * Grund des Rahmens: .evva-shell trägt ihn weiter, wenn die Seite höher wird
 * als die Anwendung.
 */
body {
  font-family: var(--evva-font-family);
}

/*
 * Der Fokusring kommt global aus evva-modern.css (2 px auf --evva-fg-default).
 * Gelb ist als Fokusring gesperrt — 1.28:1. Ergänzt wird hier nur, was die
 * Tokendatei nicht kennt: der Ring auf der dunklen Kopfleiste, wo die dortige
 * Textfarbe den Kontrast trägt.
 */
.evva-topbar :focus-visible {
  outline-color: var(--evva-fg-on-topbar);
}

/*
 * Die Sprungmarke steht ausserhalb des Sichtfelds statt an einer ausgedachten
 * Koordinate weit links: verschoben wird nur mit transform, und animiert wird
 * ohnehin nur transform und opacity.
 */
.sprungmarke {
  position: absolute;
  top: 0;
  left: var(--evva-space-3);
  z-index: 10;
  padding: var(--evva-space-3) var(--evva-space-4);
  border-radius: var(--evva-radius-sm);
  background: var(--evva-accent);
  color: var(--evva-fg-on-yellow);
  font: var(--evva-font-body);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--evva-duration-base) var(--evva-ease-out);
}

.sprungmarke:focus {
  transform: translateY(0);
}

.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Symbole: Strichzeichnung in der geerbten Textfarbe, nie als Symbolschrift
 * und nie als Emoji. 20 px bei 40 px Trefferfläche, Strichstärke 1.5 —
 * so schreibt es der Skill für runde Icon-Knöpfe und Navigationseinträge.
 */
.ico {
  flex: none;
  width: var(--evva-size-icon);
  height: var(--evva-size-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Kopfleiste ──────────────────────────────────────────────────────────── */

.marke {
  display: flex;
  align-items: baseline;
  gap: var(--evva-space-2);
  margin-inline-end: auto;
  text-decoration: none;
  color: var(--evva-fg-on-topbar);
}

.marke-name {
  font: var(--evva-font-subheadline);
  font-weight: 600;
}

.marke-zusatz {
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-on-topbar-muted);
}

.kopf-werkzeuge {
  display: flex;
  align-items: center;
  gap: var(--evva-space-4);
}

/*
 * Runde Icon-Knöpfe auf der Kopfleiste: Die Füllung aus --evva-bg-sunken wäre
 * dort ein heller Fleck. --evva-bg-topbar-sunken ist die Fläche, die die
 * Tokendatei für genau diesen Fall führt.
 */
.evva-topbar .evva-icon-btn {
  background: var(--evva-bg-topbar-sunken);
  color: var(--evva-fg-on-topbar);
}

.evva-topbar .evva-icon-btn:hover {
  background: var(--evva-bg-shell);
}

/* Der Knopf zeigt das Bild, in das er wechselt — nie das gerade gültige. */
.bildwechsel .ico-dunkel {
  display: none;
}

.bildwechsel[aria-pressed="true"] .ico-hell {
  display: none;
}

.bildwechsel[aria-pressed="true"] .ico-dunkel {
  display: block;
}

/*
 * Das Logo steht oben rechts und wird nie umrahmt oder hinterlegt.
 *
 * Schutzzone (CD Manual S. 24): Nach links hält .kopf-werkzeuge sie über den
 * Abstand zum Nachbarn frei. Nach oben und unten wird sie unterschritten — die
 * Kopfleiste des Anwendungsrahmens ist mit 64 px fest, und die Schutzzone von
 * 0.76 Logohöhen ließe darin nur noch 25 px Logo zu, womit der Claim
 * unleserlich würde. Bewusster Unterschnitt zugunsten der Lesbarkeit; oben und
 * unten grenzt ohnehin kein fremdes Element an, sondern der Rand der Leiste.
 */
.kopf-logo {
  display: flex;
  align-items: center;
}

/*
 * Negativ-Variante (CD Manual S. 21): Die Kopfleiste ist immer dunkel, also
 * steht das Logo immer weiß und ohne gefüllten Grund — der schwarze Claim
 * unter der Ellipse verlöre dort jeden Kontrast. Genau die Datei
 * evva-logo-weiss.svg, nur inline.
 */
.evva-logo {
  display: block;
  height: 40px;
  width: auto;
  fill: var(--evva-fg-on-topbar);
}

.evva-logo-grund {
  fill: none;
}

/* ── Seitenleiste ────────────────────────────────────────────────────────── */

/*
 * Die Einträge bringt .evva-nav-item mit. Hier steht nur die Kennzeichnung des
 * angemeldeten Schlüssels, die im eingeklappten Zustand mitverschwindet.
 */
.evva-nav-item .marker {
  margin-inline-start: auto;
}

/* ── Arbeitsfläche ───────────────────────────────────────────────────────── */

/*
 * Fließtext bleibt bei rund 70 Zeichen lesbar; Tabellen und Raster dürfen die
 * volle Breite nehmen. Deshalb begrenzt nicht die Arbeitsfläche, sondern der
 * Absatz sich selbst (.einleitung, .hinweisliste).
 */
.evva-main > h1:first-child,
.evva-main > .brotkrumen:first-child {
  margin-top: 0;
}

.fuss {
  margin-top: var(--evva-space-16);
  padding-top: var(--evva-space-5);
  border-top: 1px solid var(--evva-line-subtle);
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
}

.fuss p {
  margin: 0 0 var(--evva-space-2);
}

.fuss p:last-child {
  margin-bottom: 0;
}

/* ── Text ────────────────────────────────────────────────────────────────── */

/*
 * Größen aus der Typo-Skala des Skills: h1 = 40, h2 = 30, h3 = 23. Das ist
 * eine Stufe größer als die frühere CD-Digitalskala — die Überschrift trägt in
 * dieser Formsprache mehr Gewicht, weil die Flächen darunter rahmenlos sind.
 */
h1 {
  font: var(--evva-font-h1);
  letter-spacing: var(--evva-tracking-h1);
  color: var(--evva-fg-strong);
  margin: 0 0 var(--evva-space-2);
}

h2 {
  font: var(--evva-font-h2);
  letter-spacing: var(--evva-tracking-h2);
  color: var(--evva-fg-strong);
  margin: 0 0 var(--evva-space-3);
}

h3 {
  font: var(--evva-font-h3);
  color: var(--evva-fg-strong);
  margin: var(--evva-space-8) 0 var(--evva-space-2);
}

h4 {
  font: var(--evva-font-subheadline);
  margin: var(--evva-space-5) 0 var(--evva-space-2);
}

code {
  font-family: var(--schrift-fest);
  font-size: 0.9em;
}

.einleitung {
  font: var(--evva-font-body-lg);
  color: var(--evva-fg-muted);
  margin: 0 0 var(--evva-space-6);
  max-width: 70ch;
}

/*
 * Leerbefund: eingesenkte Fläche statt gestricheltem Kasten. Die Aussage steht
 * im Text, nicht im Rand.
 */
.leer {
  margin: 0;
  padding: var(--evva-space-8);
  border-radius: var(--evva-radius-card);
  background: var(--evva-bg-sunken);
  color: var(--evva-fg-muted);
  text-align: center;
}

.hinweis {
  color: var(--evva-fg-muted);
}

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--evva-space-2);
  margin-bottom: var(--evva-space-4);
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
}

.titelzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--evva-space-3);
  margin-bottom: var(--evva-space-2);
}

.titelzeile h1,
.titelzeile h2 {
  margin: 0;
}

/* ── Flächen ─────────────────────────────────────────────────────────────── */

/*
 * Karte: rahmenlos, Radius 20, weicher Schatten — dieselbe Regel wie
 * .evva-card. Die Trennung zur Arbeitsfläche trägt die Fläche selbst, nicht
 * eine 1-px-Linie. Verschachtelt gilt innen = außen − Padding, deshalb sitzen
 * eingesenkte Flächen in einer Karte auf Radius 12.
 */
.karte,
.filter,
.variantenformular {
  background: var(--evva-bg-surface);
  border-radius: var(--evva-radius-card);
  box-shadow: var(--evva-shadow-card);
  padding: var(--evva-space-5);
  margin-bottom: var(--evva-space-5);
}

/* ── Formulare ───────────────────────────────────────────────────────────── */

/*
 * Oben ausgerichtet, nicht unten: Das Einheiten-Feld trägt einen Hinweis unter
 * sich, und bei Ausrichtung an der Unterkante zöge der die Eingabe gegenüber
 * den Nachbarfeldern nach oben.
 */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--evva-space-4);
  align-items: flex-start;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--evva-space-1);
  min-width: 10rem;
}

.feld-weit {
  flex: 1 1 18rem;
}

/* Ohne Beschriftung stünden die Schaltflächen in der oben ausgerichteten
   Filterleiste über den Eingabefeldern. */
.filter .feld-aktionen {
  align-self: flex-end;
}

/* CD S. 110: Mindestabstand zwischen Knöpfen ist die halbe Knopfhöhe. */
.feld-aktionen {
  flex-direction: row;
  align-items: center;
  gap: var(--evva-space-6);
}

/*
 * Beschriftungen im Label-Stil: 12 px, Versalien, gesperrt, gedämpft. Das ist
 * der Gegenpol zur großen Überschrift und derselbe Stil wie in Tabellenköpfen.
 */
label,
legend,
.feldname {
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  text-transform: uppercase;
  color: var(--evva-fg-muted);
}

/*
 * Eingabefelder sind Bedienelemente — hier greift WCAG 1.4.11: Die Kante liegt
 * auf --evva-line-strong (Grau 60, 3.60:1). Grau 40 reißt mit 2.12:1 und ist
 * dafür gesperrt.
 */
input,
select,
textarea {
  font: var(--evva-font-body);
  color: var(--evva-fg-default);
  background: var(--evva-bg-surface);
  border: 1px solid var(--evva-line-strong);
  border-radius: var(--evva-radius-md);
  padding: 0 var(--evva-space-3);
  width: 100%;
}

input,
select {
  height: var(--evva-size-control-lg);
}

textarea {
  resize: vertical;
  padding: var(--evva-space-3);
  line-height: 1.5;
}

/*
 * Der Browser setzt Platzhalter je nach Plattform sehr blass. Hier tragen sie
 * im Varianten-Editor den geerbten Wert und müssen lesbar bleiben.
 */
::placeholder {
  color: var(--evva-fg-muted);
  opacity: 1;
}

.quelltextfeld {
  font-family: var(--schrift-fest);
}

.feldhilfe {
  margin: 0;
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
}

/*
 * Feldgruppe als eingesenkte Fläche statt als umrandeter Kasten: Sie liegt in
 * der Regel auf einer Karte, und zwei Rahmen ineinander sind genau das, was
 * die Formsprache vermeidet.
 */
fieldset {
  border: none;
  border-radius: var(--evva-radius-card);
  background: var(--evva-bg-surface);
  box-shadow: var(--evva-shadow-card);
  padding: var(--evva-space-5);
  margin: 0 0 var(--evva-space-5);
  display: grid;
  gap: var(--evva-space-4);
}

/*
 * Gesperrte Felder bleiben in --evva-fg-muted statt in --evva-fg-disabled: Der
 * Editor zeigt darin den echten Inhalt einer unveränderlichen Version, und der
 * soll lesbar bleiben.
 */
fieldset:disabled input,
fieldset:disabled select,
fieldset:disabled textarea {
  background: var(--evva-bg-sunken);
  color: var(--evva-fg-muted);
}

/*
 * Ohne Rahmen hat <legend> nichts mehr, worüber es sitzen könnte: Der Browser
 * setzt es trotzdem auf die obere Kante des Rahmenkastens und damit halb neben
 * die Karte. Ein Float nimmt es aus dieser Sonderbehandlung heraus; im
 * Rasterkasten wird der Float dann ignoriert und die Beschriftung steht als
 * erste Rasterzeile sauber in der Karte.
 */
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  font: var(--evva-font-h3);
  text-transform: none;
  letter-spacing: normal;
  color: var(--evva-fg-strong);
}

/*
 * Knöpfe sind formal vom EVVA-Logo abgeleitet (CD S. 109): Pillenform, Höhe 48.
 * Der Primärknopf ist gelb mit dunkler Schrift (6.95:1) und braucht in dieser
 * Formsprache keine Kante mehr — er trägt immer ein Wort, und ohne Kante liest
 * sich die Fläche als das, was sie ist.
 */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--evva-space-2);
  height: var(--evva-size-control-lg);
  padding: 0 var(--evva-space-5);
  font: var(--evva-font-body);
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: var(--evva-radius-pill);
  background: var(--evva-accent);
  color: var(--evva-fg-on-yellow);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--evva-duration-fast) var(--evva-ease-out);
}

.knopf:hover {
  background: var(--evva-accent-hover);
  color: var(--evva-fg-on-yellow);
}

.knopf:active {
  background: var(--evva-accent-active);
}

.knopf:disabled {
  background: var(--evva-accent-disabled);
  color: var(--evva-fg-disabled);
  cursor: default;
}

/* Sekundärknopf: Flächenfarbe, Kante in Grau 60 als eingesetzter Ring — so
   wächst der Knopf nicht um eine Randbreite gegenüber dem Primärknopf. */
.knopf-leise {
  background: var(--evva-bg-surface);
  color: var(--evva-fg-default);
  box-shadow: inset 0 0 0 1px var(--evva-line-strong);
  font-weight: 400;
}

.knopf-leise:hover,
.knopf-leise:active {
  background: var(--evva-bg-hover);
  color: var(--evva-fg-default);
}

.knopf-klein {
  height: var(--evva-size-control);
  padding: 0 var(--evva-space-4);
  font: var(--evva-font-body-sm);
  font-weight: 600;
}

/*
 * Löschen trägt die Signalfarbe für kritische Aktionen, nicht das Standardgelb:
 * Es ist die einzige Aktion auf dieser Seite, die Daten entfernt. Als gefüllte
 * Fläche mit dunklem Text — die Signalfarbe selbst trägt keinen Text.
 */
.knopf-gefahr {
  background: var(--evva-status-error-bg);
  color: var(--evva-fg-on-status-bg);
  box-shadow: inset 0 0 0 1px var(--evva-status-error);
}

.knopf-gefahr:hover,
.knopf-gefahr:active {
  background: var(--evva-status-error-bg);
  color: var(--evva-fg-on-status-bg);
  box-shadow: inset 0 0 0 2px var(--evva-status-error);
}

.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--evva-space-6);
  margin: 0 0 var(--evva-space-5);
}

.ladeanzeige {
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
  opacity: 0;
  transition: opacity var(--evva-duration-base) var(--evva-ease-out);
}

.htmx-request .ladeanzeige,
.ladeanzeige.htmx-request {
  opacity: 1;
}

/* ── Tabellen ────────────────────────────────────────────────────────────── */

/*
 * Keine senkrechten Linien, kein Außenrahmen, Zeilentrenner auf --line-subtle,
 * Kopfzeile im Label-Stil, Zeilenhöhe 48 statt 32. Die Tabelle steht als
 * eigene weiße Fläche auf der grauen Arbeitsfläche.
 *
 * border-collapse: separate statt collapse — nur so greift der Radius, und mit
 * border-spacing: 0 sitzen die Zellen trotzdem auf Kante.
 */
.tabelle,
.difftabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--evva-bg-surface);
  border-radius: var(--evva-radius-card);
  box-shadow: var(--evva-shadow-card);
}

/*
 * Steht die Tabelle schon auf einer Karte, gibt sie ihre eigene Fläche ab:
 * Verschachtelt gilt innen = außen − Padding, und eine Karte mit 20 px Padding
 * lässt innen keinen Radius mehr zu. Die Zellen rücken zugleich auf die Kante
 * der Karte, damit ihre erste Spalte unter der Überschrift steht.
 */
.karte .tabelle,
.karte .difftabelle {
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.karte .tabelle th,
.karte .tabelle td,
.karte .difftabelle th,
.karte .difftabelle td {
  padding-inline: 0 var(--evva-space-5);
}

.karte .tabelle tr > :last-child,
.karte .difftabelle tr > :last-child {
  padding-inline-end: 0;
}

/* Die Beschriftung steht über der Fläche, nicht darin: Sie zählt Treffer und
   gehört damit zur Seite, nicht zur Tabelle. */
.tabelle caption {
  text-align: left;
  padding: 0 0 var(--evva-space-3);
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  text-transform: uppercase;
  color: var(--evva-fg-muted);
}

.tabelle th,
.tabelle td {
  text-align: left;
  vertical-align: top;
  padding: var(--evva-space-3) var(--evva-space-5);
  border-bottom: 1px solid var(--evva-line-subtle);
}

.tabelle thead th {
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  text-transform: uppercase;
  color: var(--evva-fg-muted);
  background: var(--evva-bg-surface);
  white-space: nowrap;
}

.tabelle tbody th,
.tabelle tbody td {
  min-height: var(--evva-size-row);
}

.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td {
  border-bottom: none;
}

.tabelle tbody tr:hover {
  background: var(--evva-bg-hover);
}

.tabelle tbody th {
  font-weight: 600;
  max-width: 30rem;
}

.slug,
.beschreibung {
  display: block;
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
}

.slug {
  font-family: var(--schrift-fest);
}

.beschreibung {
  margin-top: var(--evva-space-1);
}

.zellwert {
  max-width: 22rem;
  overflow-wrap: anywhere;
}

.stammdaten {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--evva-space-2) var(--evva-space-5);
  margin: 0;
}

.stammdaten dt {
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  text-transform: uppercase;
  color: var(--evva-fg-muted);
}

.stammdaten dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── Marker ──────────────────────────────────────────────────────────────
 * Status ist eine gefüllte Pille mit dunklem Text — nie eingefärbter Text und
 * nie ein Farbpunkt allein. Das Wort steht immer dabei, Farbe ist nach WCAG
 * nie alleiniger Träger.
 */

.marker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px var(--evva-space-2);
  border-radius: var(--evva-radius-pill);
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  white-space: nowrap;
  background: var(--evva-bg-sunken);
  color: var(--evva-fg-default);
}

/* Art und Organisationseinheit tragen keinen Zustand, sondern eine Einordnung:
   eingesenkte Fläche, kein Signal. */
.marker-art {
  box-shadow: inset 0 0 0 1px var(--evva-line-strong);
}

/* Tags sind technische Schlüssel und stehen deshalb in der festen Schrift; die
   Versalien der Label-Stufe würden sie verfälschen. */
.marker-tag {
  font-family: var(--schrift-fest);
  letter-spacing: normal;
  text-transform: none;
}

.marker-einheit {
  color: var(--evva-fg-muted);
}

/*
 * Versionszustände: Farbe ist nur einer von drei Trägern. Dazu kommen ein
 * eigenes Symbol und die Beschriftung, damit Entwurf, Veröffentlicht und
 * Veraltet auch ohne Farbwahrnehmung auseinandergehen. Die Schreibweise
 * content: "○" / "" hängt an das Symbol einen leeren Alternativtext — der
 * Screenreader liest die Beschriftung daneben, nicht das Zeichen.
 */
.marker-draft::before,
.marker-published::before,
.marker-active::before,
.marker-deprecated::before,
.marker-archived::before,
.marker-archiviert::before {
  margin-right: var(--evva-space-1);
}

.marker-draft {
  background: var(--evva-bg-surface);
  box-shadow: inset 0 0 0 1px var(--evva-line-strong);
}

.marker-draft::before {
  content: "○" / "";
}

/* Gelb markiert den gültigen Zustand (CD: Gelb = aktiv). Die Pille trägt ein
   Wort, also steht der Text IM Gelb und nicht in Gelb. */
.marker-published,
.marker-active {
  background: var(--evva-accent-tint);
  color: var(--evva-fg-on-yellow);
}

.marker-published::before,
.marker-active::before {
  content: "●" / "";
}

/*
 * Veraltet ist die zurückgenommene Stufe: gefüllt wie „Veröffentlicht“, aber
 * grau und gedämpft. Zusammen mit dem weiß umrissenen Entwurf und der gelben
 * Fläche stehen damit drei unterscheidbare Füllungen nebeneinander — nicht
 * --evva-bg-raised, das im hellen Bild Weiß ist und auf der Karte verschwände.
 */
.marker-deprecated,
.marker-archived,
.marker-archiviert {
  background: var(--evva-bg-sunken);
  color: var(--evva-fg-muted);
}

.marker-deprecated::before,
.marker-archived::before,
.marker-archiviert::before {
  content: "■" / "";
}

/* Vergleichsmarker: Die Beschriftung nennt die Änderung im Klartext, die
   Fläche verstärkt sie nur. */
.marker-added,
.marker-hinzu {
  background: var(--evva-status-success-bg);
  color: var(--evva-fg-on-status-bg);
}

.marker-removed,
.marker-entfernt {
  background: var(--evva-status-error-bg);
  color: var(--evva-fg-on-status-bg);
}

.marker-changed {
  background: var(--evva-status-warning-bg);
  color: var(--evva-fg-on-status-bg);
}

.versionsnummer {
  font-family: var(--schrift-fest);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Detailansicht ───────────────────────────────────────────────────────── */

.versionsraster {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 2.2fr);
  gap: var(--evva-space-5);
  align-items: start;
}

@media (max-width: 900px) {
  .versionsraster {
    grid-template-columns: 1fr;
  }
}

.versionsliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--evva-space-2);
}

.versionsliste li {
  border-radius: var(--evva-radius-md);
  padding: var(--evva-space-3) var(--evva-space-4);
  background: var(--evva-bg-surface);
  box-shadow: var(--evva-shadow-card);
}

/*
 * Der aktive Eintrag steht auf der gelben Auswahlfläche — dieselbe Lösung wie
 * beim aktiven Navigationseintrag. Eine gelbe Linie käme nicht in Frage: Gelb
 * trägt mit 1.28:1 keine 3:1-Grenze. Im Markup steht zusätzlich aria-current.
 */
.versionsliste li.aktiv {
  background: var(--evva-bg-selected);
}

.versionsliste a {
  display: flex;
  align-items: center;
  gap: var(--evva-space-2);
  text-decoration: none;
}

.versionsliste a:hover .versionsnummer {
  text-decoration: underline;
}

.versionsmeta,
.changelog {
  margin: var(--evva-space-1) 0 0;
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
}

/* Quelltext sitzt eingesenkt in der Karte: Radius 12, weil die Karte mit 20
   und 20 px Padding nach innen nichts Größeres zulässt. */
.quelltext {
  background: var(--evva-bg-sunken);
  border-radius: var(--evva-radius-md);
  padding: var(--evva-space-4);
  overflow-x: auto;
  font-family: var(--schrift-fest);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

/* ── Meldungen ───────────────────────────────────────────────────────────
 * Gefüllte Fläche in der Semantik-Tönung, Text in --evva-fg-on-status-bg und
 * davor ein Symbol. Der frühere Balken in der reinen Signalfarbe entfällt: Die
 * Fläche trägt die Aussage jetzt selbst, und der Text darauf ist gemessen.
 */

.meldungsbereich:empty {
  display: none;
}

.meldung {
  margin: 0 0 var(--evva-space-5);
  padding: var(--evva-space-3) var(--evva-space-4);
  border-radius: var(--evva-radius-md);
  background: var(--evva-bg-sunken);
  color: var(--evva-fg-default);
}

.meldung::before {
  margin-right: var(--evva-space-2);
  font-weight: 700;
}

.meldung-fehler {
  background: var(--evva-status-error-bg);
  color: var(--evva-fg-on-status-bg);
}

.meldung-fehler::before {
  content: "✕" / "";
}

.meldung-erfolg {
  background: var(--evva-status-success-bg);
  color: var(--evva-fg-on-status-bg);
}

.meldung-erfolg::before {
  content: "✓" / "";
}

.meldung-warnung {
  background: var(--evva-status-warning-bg);
  color: var(--evva-fg-on-status-bg);
}

.meldung-warnung::before {
  content: "!" / "";
}

.meldung a {
  color: inherit;
}

/* ── Vergleich ───────────────────────────────────────────────────────────── */

.vergleichskopf {
  display: flex;
  gap: var(--evva-space-3);
  margin: 0 0 var(--evva-space-4);
}

.diffzaehler {
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
  margin: 0 0 var(--evva-space-3);
}

.difftabelle {
  font-family: var(--schrift-fest);
  font-size: 14px;
}

.difftabelle thead th {
  text-align: left;
  padding: var(--evva-space-3) var(--evva-space-4);
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  text-transform: uppercase;
  color: var(--evva-fg-muted);
  border-bottom: 1px solid var(--evva-line-subtle);
}

.difftabelle td {
  padding: 0 var(--evva-space-4);
  vertical-align: top;
}

.zeilennummer {
  width: 4rem;
  text-align: right;
  color: var(--evva-fg-muted);
  user-select: none;
}

.diffzeile code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Das Vorzeichen steht im Markup und trägt die Aussage ohne Farbe. */
.diffzeichen {
  display: inline-block;
  width: 1ch;
  font-weight: 700;
}

.diff-added {
  background: var(--evva-status-success-bg);
  color: var(--evva-fg-on-status-bg);
}

.diff-removed {
  background: var(--evva-status-error-bg);
  color: var(--evva-fg-on-status-bg);
}

/* ── Varianten-Editor und Export-Vorschau ────────────────────────────────── */

.variantenraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--evva-space-6);
  align-items: start;
}

@media (max-width: 60rem) {
  .variantenraster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.variantenleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--evva-space-3);
  align-items: center;
  margin: 0 0 var(--evva-space-5);
}

.variantenleiste-titel {
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  text-transform: uppercase;
  color: var(--evva-fg-muted);
}

/* Die gewählte Plattform ist der aktive Zustand: gelbe Fläche, dunkle Schrift
   (6.95:1), zusätzlich fett. */
.variantenleiste a[aria-current="page"] {
  background: var(--evva-accent);
  color: var(--evva-fg-on-yellow);
  box-shadow: none;
  font-weight: 600;
}

.vorschau {
  position: sticky;
  top: 0;
}

.dateizaehler {
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
  margin: 0 0 var(--evva-space-4);
}

.exportdatei {
  margin: 0 0 var(--evva-space-5);
}

.exportdatei:last-child {
  margin-bottom: 0;
}

/*
 * Pfadzeile und Quelltext sind ein Block: Die Zeile sitzt auf der eingesenkten
 * Fläche und schließt sie oben ab, deshalb nur oben gerundet.
 */
.dateipfad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--evva-space-2);
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: var(--evva-space-2) var(--evva-space-4);
  background: var(--evva-bg-sunken);
  border-radius: var(--evva-radius-md) var(--evva-radius-md) 0 0;
  font: var(--evva-font-body-sm);
  font-weight: 600;
}

.dateipfad code {
  overflow-wrap: anywhere;
}

.dateigroesse {
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
}

.exportdatei .quelltext {
  border-radius: 0 0 var(--evva-radius-md) var(--evva-radius-md);
  max-height: 22rem;
  overflow-y: auto;
}

/* ── Begleitdateien ──────────────────────────────────────────────────────── */

.dateiliste {
  list-style: none;
  margin: 0 0 var(--evva-space-5);
  padding: 0;
  overflow: hidden;
  background: var(--evva-bg-surface);
  border-radius: var(--evva-radius-card);
  box-shadow: var(--evva-shadow-card);
}

.dateiliste li + li {
  border-top: 1px solid var(--evva-line-subtle);
}

.dateiliste a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--evva-space-1) var(--evva-space-3);
  align-items: baseline;
  justify-content: space-between;
  min-height: var(--evva-size-row);
  padding: var(--evva-space-3) var(--evva-space-4);
  text-decoration: none;
}

.dateiliste a code {
  overflow-wrap: anywhere;
}

.dateiliste a:hover {
  background: var(--evva-bg-hover);
}

.dateiliste a:hover code {
  text-decoration: underline;
}

/* Wie in der Versionsliste: die gelbe Auswahlfläche markiert den aktiven
   Eintrag, nicht eine gelbe Linie. */
.dateiliste li.aktiv a {
  background: var(--evva-bg-selected);
}

.dateiliste .dateiordner {
  padding: var(--evva-space-2) var(--evva-space-4);
  font-family: var(--schrift-fest);
  font-size: 13px;
  color: var(--evva-fg-muted);
  background: var(--evva-bg-sunken);
}

/* Befunde des Dateidienstes zählen je beanstandeter Datei eine Zeile auf. */
.befundtext {
  white-space: pre-line;
}

.dateiinhalt {
  max-height: 70vh;
  overflow-y: auto;
}

/* Dateien eines Entwurfs pflegen: aufklappbar wie „Neue Version“. */
.dateipflege-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--evva-space-3);
  align-items: flex-start;
  margin-top: var(--evva-space-4);
}

.dateipflege-leiste .dateipflege {
  flex: 1 1 16rem;
}

.dateipflege,
.neue-version,
.freigabe {
  margin-top: var(--evva-space-4);
}

.dateipflege > summary,
.neue-version > summary,
.freigabe > summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.dateipflege > summary::-webkit-details-marker,
.neue-version > summary::-webkit-details-marker,
.freigabe > summary::-webkit-details-marker {
  display: none;
}

.dateipflege > summary::before,
.neue-version > summary::before {
  content: "＋";
  margin-right: var(--evva-space-2);
  font-weight: 700;
}

.dateipflege[open] > summary::before,
.neue-version[open] > summary::before {
  content: "−";
}

.dateipflege[open] > form,
.neue-version[open] > form {
  margin-top: var(--evva-space-3);
  padding: var(--evva-space-4);
  border-radius: var(--evva-radius-md);
  background: var(--evva-bg-sunken);
}

.dateipflege form h4 {
  margin: 0;
  width: 100%;
}

.dateipflege-leiste + .hinweis,
.dateiliste + .hinweis {
  margin-top: var(--evva-space-3);
}

.dateibild {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--evva-radius-md);
  background: var(--evva-bg-sunken);
}

/* ── Import ──────────────────────────────────────────────────────────────── */

/* Die beiden Wege, wenn es den Skill schon gibt: eingesenkte Fläche statt
   Rahmen — der frühere gelbe Balken links trüge als Linie keinen Kontrast. */
.importwahl {
  margin: var(--evva-space-5) 0 0;
  padding: var(--evva-space-4) var(--evva-space-5);
  border: none;
  border-radius: var(--evva-radius-md);
  background: var(--evva-bg-sunken);
  box-shadow: none;
  display: grid;
  gap: var(--evva-space-3);
}

.importwahl legend {
  padding: 0;
  font: var(--evva-font-subheadline);
}

.auswahlgruppe {
  display: grid;
  gap: var(--evva-space-1);
}

/* Auswahlknöpfe und Haken stehen vor ihrer Beschriftung, in deren Schrift —
   nicht im Label-Stil, sie sind hier der Fließtext der Entscheidung. */
.auswahl {
  display: flex;
  align-items: center;
  gap: var(--evva-space-2);
  min-height: var(--evva-size-control);
  font: var(--evva-font-body);
  text-transform: none;
  letter-spacing: normal;
  color: var(--evva-fg-default);
}

.auswahl input {
  flex: none;
  width: var(--evva-space-5);
  height: var(--evva-space-5);
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* Ein Hinweis mit mehreren Absätzen: Das Zeichen steht links daneben. */
div.meldung {
  display: flex;
  align-items: baseline;
}

.meldung p {
  margin: 0;
}

.meldung p + p {
  margin-top: var(--evva-space-2);
}

.hinweisliste {
  margin: 0 0 var(--evva-space-5);
  padding-left: var(--evva-space-5);
  max-width: 70ch;
  color: var(--evva-fg-muted);
}

.hinweisliste li::marker {
  color: var(--evva-fg-muted);
}

.hinweisliste li {
  margin-bottom: var(--evva-space-1);
}

input[type="file"] {
  width: 100%;
  height: auto;
  padding: var(--evva-space-2);
  background: var(--evva-bg-surface);
  border: 1px dashed var(--evva-line-strong);
  border-radius: var(--evva-radius-md);
  color: var(--evva-fg-default);
  font: var(--evva-font-body);
}

/*
 * Ohne diese Regel malt der Browser den Auswahlknopf in seinen eigenen
 * Systemfarben — im dunklen Erscheinungsbild ein heller Fleck.
 */
input[type="file"]::file-selector-button {
  margin-right: var(--evva-space-3);
  height: var(--evva-size-control);
  padding: 0 var(--evva-space-4);
  background: var(--evva-bg-sunken);
  color: var(--evva-fg-default);
  border: none;
  box-shadow: inset 0 0 0 1px var(--evva-line-strong);
  border-radius: var(--evva-radius-pill);
  font: var(--evva-font-body-sm);
  font-weight: 600;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--evva-accent);
  color: var(--evva-fg-on-yellow);
  box-shadow: none;
}

/* ── Organisationsstruktur ──────────────────────────────────────────────────
   Der Baum steht als verschachtelte Liste; die Einrückung übernimmt das
   Listenelement, nicht ein Abstand je Ebene. So bleibt die Verschachtelung
   auch für Vorlesewerkzeuge eine Verschachtelung und nicht nur ein Bild. */

.org-baum {
  list-style: none;
  margin: 0;
  padding: 0;
}

.org-baum .org-baum {
  margin-left: var(--evva-space-5);
  padding-left: var(--evva-space-4);
  border-left: 2px solid var(--evva-line-subtle);
}

.org-baum-wurzel > li + li {
  margin-top: var(--evva-space-2);
}

.org-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--evva-space-2);
  min-height: var(--evva-size-row);
  padding: var(--evva-space-1) 0;
}

.org-name {
  min-width: 14rem;
  font-weight: 600;
  color: var(--evva-fg-default);
}

.org-form {
  display: flex;
  align-items: center;
  gap: var(--evva-space-2);
  margin: 0;
}

.org-form input[type="text"],
.org-form select {
  height: var(--evva-size-control);
  max-width: 16rem;
}

/* ── Auswahl von Organisationseinheiten in Formularen ─────────────────────── */

.org-auswahl {
  display: flex;
  flex-direction: column;
  gap: var(--evva-space-1);
  max-height: 18rem;
  overflow-y: auto;
  padding: var(--evva-space-2);
  border-radius: var(--evva-radius-md);
  background: var(--evva-bg-sunken);
}

.org-auswahl label {
  display: flex;
  align-items: center;
  gap: var(--evva-space-2);
  min-height: var(--evva-size-control);
  font: var(--evva-font-body);
  text-transform: none;
  letter-spacing: normal;
  color: var(--evva-fg-default);
}

.org-auswahl input[type="checkbox"] {
  flex: none;
  width: var(--evva-space-5);
  height: var(--evva-space-5);
}

/* Die Ebene wird als Einzug gezeigt; der Pfad steht zusätzlich im title, weil
   der Einzug allein bei tiefen Bäumen mehrdeutig wird. */
.org-auswahl .org-ebene-1 { padding-left: var(--evva-space-5); }
.org-auswahl .org-ebene-2 { padding-left: var(--evva-space-10); }
.org-auswahl .org-ebene-3 { padding-left: var(--evva-space-16); }
.org-auswahl .org-ebene-4 { padding-left: 5rem; }
.org-auswahl .org-ebene-5 { padding-left: 6.25rem; }

/* Zuordnung eines Skills, angezeigt auf der Detailseite. */
.org-marker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px var(--evva-space-2);
  margin: 0 var(--evva-space-1) var(--evva-space-1) 0;
  border-radius: var(--evva-radius-pill);
  background: var(--evva-bg-sunken);
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  color: var(--evva-fg-muted);
}

/* ── Version freigeben ───────────────────────────────────────────────────────
   Wie .neue-version aufgeklappt, aber mit dem vollen Knopfgewicht in der
   Zusammenfassung: Es ist der einzige unumkehrbare Vorgang der Oberfläche und
   soll nicht wie eine Nebensache aussehen. */

.freigabe[open] > form {
  margin-top: var(--evva-space-3);
  padding: var(--evva-space-4);
  /* Die Kante in der Signalfarbe trennt den unumkehrbaren Vorgang sichtbar von
     den übrigen Formularen auf der Seite. */
  box-shadow: inset 0 0 0 2px var(--evva-status-warning);
  border-radius: var(--evva-radius-md);
  background: var(--evva-bg-surface);
}

/* ── Erklärung der Artefakt-Typen ────────────────────────────────────────── */

/* Am Anlegeformular: alle Typen auf einmal, weil die Wahl einmalig ist. */
.typhilfe {
  margin: var(--evva-space-2) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--evva-space-1) var(--evva-space-3);
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
}

.typhilfe dt {
  font-weight: 600;
  white-space: nowrap;
}

.typhilfe dd {
  margin: 0;
}

/* Auf der Stammdatenseite: nur der Typ, den dieser Skill hat. */
.typerklaerung {
  margin: 0 0 var(--evva-space-4);
  font: var(--evva-font-body-sm);
  color: var(--evva-fg-muted);
}

/* ── Schmale Fenster ─────────────────────────────────────────────────────── */

/*
 * Unter 1024 px baut evva-modern.css den Rahmen selbst auf eine Spalte um. Hier
 * bleibt nur die Typografie: Die Überschrift der Skala fällt eine Stufe
 * zurück, damit sie nicht über zwei Zeilen bricht.
 */
@media (max-width: 640px) {
  h1 {
    font: var(--evva-font-h2);
    letter-spacing: var(--evva-tracking-h2);
  }

  h2,
  legend {
    font: var(--evva-font-h3);
  }

  .einleitung {
    font: var(--evva-font-body);
  }

  .versionsraster,
  .variantenraster {
    grid-template-columns: minmax(0, 1fr);
  }
}