/* Asset-Portal — Verwaltung

   Die Werte unten sind die VORGABE. index.php gibt vor dieser Datei einen
   zweiten :root-Block aus, der aus config/marke.vorgabe.json und
   config/marke.json kommt (lib/Marke.php) — dort steht das Erscheinungsbild
   der Installation. Wird der Block nicht ausgegeben, sieht die Verwaltung
   aus wie hier; die Datei bleibt also fuer sich allein lesbar.

   Anders als das Portal hat die Verwaltung keinen Bau-Schritt, deshalb
   Variablen statt fester Werte. Im Portal geht das nicht: Tailwinds
   Deckkraft-Schreibweise braucht die Farbe als festen Wert.

   Die Hausschrift des Portals ist lizenzpflichtig und liegt hier nicht bei;
   --schrift ist deshalb eine Systemschriftfolge mit passender Anmutung. */

:root {
  --blau:    #00AACE;
  --dunkel:  #0088A8;
  --hell:    #E6F7FB;
  --text:    #1a2226;
  --leise:   #667079;
  --linie:   #dde3e7;
  --grund:   #ffffff;
  --flaeche: #f6f8f9;
  --gut:     #2e7d32;
  --gutbg:   #edf7ee;
  --warn:    #b26a00;
  --warnbg:  #fff6e6;
  --fehl:    #b3261e;
  --fehlbg:  #fdeceb;
  --verlauf: linear-gradient(90deg, #00AACE, #76B729);
  --schrift: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 var(--schrift);
  color: var(--text);
  background: var(--flaeche);
}

/* --- Kopfzeile ---------------------------------------------------------
   Verlaufsleiste und weisse Kopfzeile wie im Portal. Vorher war der ganze
   Balken blau - dann waere ein Logo, das die Akzentfarbe auf durchsichtig
   verwendet, darauf unsichtbar. Weiss ist ausserdem die Anmutung von erbe-med.com. */

.verlauf { height: 6px; background: var(--verlauf); }
.kopf {
  background: var(--grund); color: var(--text);
  border-bottom: 1px solid var(--linie); box-shadow: 0 1px 3px rgba(0,0,0,.05);
  position: sticky; top: 0; z-index: 20;
}
.kopf-innen {
  max-width: 1280px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-height: 60px;
}
.marke { display: flex; align-items: center; }
.marke img { height: 24px; width: auto; display: block; }
.kopf .titel {
  font-size: 13px; color: var(--leise);
  padding-left: 20px; border-left: 1px solid var(--linie);
}
.kopf nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.kopf nav a {
  color: var(--text); text-decoration: none; font-size: 14px;
  padding: 18px 12px; border-bottom: 3px solid transparent;
}
.kopf nav a:hover { color: var(--dunkel); border-bottom-color: var(--hell); }
.kopf nav a.aktiv { color: var(--dunkel); border-bottom-color: var(--blau); font-weight: 600; }
.benutzer { font-size: 13px; color: var(--leise); }
.benutzer a { color: var(--dunkel); }

main { max-width: 1280px; margin: 0 auto; padding: 24px 20px 56px; }

/* --- Text -------------------------------------------------------------- */

h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 32px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--hell); }
h1 .unter, .unter { color: var(--leise); font-size: 13px; font-weight: 400; }
p.unter { margin: 2px 0 14px; max-width: 68ch; }
.klein { font-size: 13px; }
.leer { color: var(--leise); font-style: italic; }
.nein { color: var(--fehl); }
code { font-family: "SF Mono", Consolas, "Liberation Mono", monospace; font-size: .92em; background: var(--flaeche); padding: 1px 5px; border-radius: 3px; }
a { color: var(--dunkel); }
.zurueck { margin: 0 0 12px; }

/* --- Hinweise ---------------------------------------------------------- */

.hinweis { padding: 11px 14px; border-radius: 5px; margin: 0 0 18px; border-left: 4px solid; }
.hinweis.gut     { background: var(--gutbg);  border-color: var(--gut);  color: #1b5e20; }
.hinweis.schlecht{ background: var(--fehlbg); border-color: var(--fehl); color: #8c1d18; }
.hinweis.warn    { background: var(--warnbg); border-color: var(--warn); color: var(--text); }

/* --- Eingabefelder je Sprache ------------------------------------------
   Ein Feld je eingerichteter Sprache, untereinander, mit dem Kuerzel davor.
   Bewusst keine Reiter: die CSP dieses Bereichs laesst kein eingebettetes
   JavaScript zu, und bei zwei bis drei Sprachen waeren Reiter mehr
   Bedienoberflaeche als Nutzen. */
.sprachfeld { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; min-width: 0; }
.karte-form .voll .sprachfeld { margin-bottom: 0; }
.sprachfeld-titel { font-size: 13px; color: var(--leise); }
.sprachzeile { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.sprachzeile input, .sprachzeile textarea { flex: 1 1 auto; min-width: 0; width: 100%; margin-top: 0; }
.sprachzeile textarea { font: inherit; padding: 6px 10px; border: 1px solid var(--linie);
                        border-radius: 4px; resize: vertical; }
.sprachzeile textarea:focus, .sprachzeile input:focus { outline: 2px solid var(--blau); outline-offset: -1px; }
.sprachmarke {
  flex: 0 0 auto; margin-top: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--dunkel); background: var(--hell);
  border-radius: 3px; padding: 2px 6px; min-width: 26px; text-align: center;
}
.warnung { background: var(--warnbg); border-left: 4px solid var(--warn); padding: 11px 14px; border-radius: 5px; max-width: 76ch; }

/* --- Kacheln ----------------------------------------------------------- */

.kacheln {
  display: grid; gap: 12px; margin: 18px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.kachel {
  display: block; text-decoration: none; color: inherit;
  background: var(--grund); border: 1px solid var(--linie); border-top: 3px solid var(--blau);
  border-radius: 5px; padding: 14px 18px; min-width: 118px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
/* Anklickbar heisst: es muss sich auch so anfuehlen. Vorher waren die
   Kacheln <div>s und die Uebersicht damit eine Sackgasse - man sah eine
   Zahl und musste sich selbst zusammensuchen, wo sie herkommt. */
a.kachel:hover {
  border-color: var(--blau); box-shadow: 0 2px 10px rgba(0,0,0,.07); transform: translateY(-1px);
}
a.kachel:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.kachel.achtung  { border-top-color: var(--warn); }
.kachel.gutstand { border-top-color: var(--gut); }
.kachel.still    { border-top-color: var(--linie); }
.kacheln.klein .kachel { padding: 9px 14px; min-width: 92px; border-top-width: 2px; }
.kachel .zahl { display: block; font-size: 28px; font-weight: 600; line-height: 1.1; }
.kacheln.klein .kachel .zahl { font-size: 19px; }
.kachel .was { display: block; font-size: 13px; margin-top: 2px; }
.kachel .fussnote { display: block; font-size: 11.5px; color: var(--leise); margin-top: 5px; }

.filter .schalter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--leise); white-space: nowrap;
}

/* --- Handlungsaufforderung --------------------------------------------- */

.ruf {
  display: block; margin: 16px 0 0; padding: 12px 16px; border-radius: 5px;
  background: var(--warnbg); border-left: 4px solid var(--warn);
  color: var(--text); text-decoration: none;
}
/* Aufhellungen und Abdunklungen der Markenfarben: color-mix rechnet sie aus
   der Farbe aus, statt sie ein zweites Mal festzuschreiben. Der Wert davor
   ist der Rueckfall fuer Browser ohne color-mix. */
.ruf:hover { background: #fff0d6; background: color-mix(in srgb, var(--warn) 12%, #fff); }

/* --- Verteilungen (Balken) ---------------------------------------------
   Ohne Diagrammbibliothek: ein Balken IST eine Breite in Prozent. Der
   Adminbereich laeuft ohne Build-Schritt, und die CSP laesst keine fremden
   Skripte zu - beides Absicht. */

.spalten { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .spalten { grid-template-columns: 1fr 1fr; } }

.verteilung { list-style: none; margin: 0; padding: 0; }
.verteilung li + li { margin-top: 3px; }
.verteilung a {
  display: grid; grid-template-columns: minmax(96px, 22%) 1fr 46px;
  align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 4px; text-decoration: none; color: inherit;
}
.verteilung a:hover { background: var(--hell); }
.verteilung a:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.verteilung .etikett { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verteilung .spur { height: 16px; background: var(--flaeche); border-radius: 3px; overflow: hidden; }
.verteilung .fuellung {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--dunkel), var(--blau));
  min-width: 2px;
}
/* Null ist eine Aussage und kein fehlender Balken - deshalb ein sichtbarer
   Strich in Warnfarbe statt gar nichts. */
.verteilung .fuellung.nichts { background: var(--warn); width: 3px !important; }
.verteilung .wert { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--leise); }

/* --- Zeitreihe ---------------------------------------------------------- */

.zeitreihe {
  display: flex; align-items: flex-end; gap: 6px;
  height: 150px; padding: 12px 14px 0;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 5px;
  text-decoration: none; color: inherit;
}
.zeitreihe:hover { border-color: var(--blau); }
.zeitreihe .tag { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.zeitreihe .saeule {
  flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 1px;
}
.zeitreihe .teil { display: block; width: 100%; border-radius: 2px 2px 0 0; min-height: 0; }
.zeitreihe .teil.ansicht  { background: #9fdcea; background: color-mix(in srgb, var(--blau) 45%, #fff); border-radius: 2px 2px 0 0; }
.zeitreihe .teil.download { background: var(--blau); border-radius: 0 0 2px 2px; }
.zeitreihe .tag:hover .teil { filter: brightness(.92); }
.zeitreihe .datum { font-size: 10.5px; color: var(--leise); padding: 6px 0 8px; white-space: nowrap; }

/* Vierzehn Datumsangaben nebeneinander passen auf ein Telefon nicht - die
   Saeulen koennen nicht schmaler werden als ihre Beschriftung, und die Seite
   scrollt dann seitwaerts. Gemessen: 516 statt 390 px. Unterhalb von 700 px
   traegt deshalb nur jeder zweite Tag ein Datum; die Saeule bleibt. */
@media (max-width: 700px) {
  .zeitreihe { gap: 3px; padding: 12px 8px 0; }
  .zeitreihe .tag { min-width: 0; }
  .zeitreihe .tag:nth-child(even) .datum { visibility: hidden; }
  .zeitreihe .datum { font-size: 9.5px; }
}

.legende { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--leise); margin: 8px 2px 0; flex-wrap: wrap; }
.legende .punkt { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legende .punkt.ansicht  { background: #9fdcea; background: color-mix(in srgb, var(--blau) 45%, #fff); }
.legende .punkt.download { background: var(--blau); }
.legende .unter { margin-left: auto; }

/* --- Importlauf --------------------------------------------------------- */

.lauf { background: var(--grund); border: 1px solid var(--linie); border-radius: 5px; overflow: hidden; }
.lauf-erfolgreich { border-left: 4px solid var(--gut); }
.lauf-abgelehnt, .lauf-fehler { border-left: 4px solid var(--fehl); }
.laufkopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
.laufkopf code { font-size: 12.5px; }
.laufkopf .weiter { margin-left: auto; font-size: 13px; white-space: nowrap; }
.meldungen { list-style: none; margin: 0; padding: 0 16px 12px; }
.meldungen li { font-size: 13px; color: var(--leise); padding: 2px 0; }

/* --- Tabellen ---------------------------------------------------------- */

table { border-collapse: collapse; width: 100%; background: var(--grund); }
.liste { border: 1px solid var(--linie); border-radius: 5px; overflow: hidden; }
.liste th {
  background: var(--hell); text-align: left; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--dunkel);
  padding: 8px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.liste td { padding: 9px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste tbody tr:last-child td { border-bottom: none; }
.liste tbody tr:hover { background: #fbfdfe; }
.liste tr.still td { opacity: .55; }
/* Angeheftete Zeile in der Highlight-Liste: erkennbar, ohne zu schreien.
   Ein linker Balken statt einer Flaechenfarbe - so bleibt die Tabelle
   lesbar, auch wenn mehrere Zeilen angeheftet sind. */
.liste tr.hervor td { background: var(--hell); }
.liste tr.hervor td:first-child { box-shadow: inset 3px 0 0 var(--blau); }
.liste td.leer { text-align: center; padding: 24px; }

.daten { border: 1px solid var(--linie); border-radius: 5px; max-width: 900px; }
.daten th {
  text-align: left; font-weight: 600; color: var(--leise); font-size: 13px;
  padding: 7px 14px; width: 190px; border-bottom: 1px solid var(--linie);
  vertical-align: top; background: #fafcfd;
}
.daten td { padding: 7px 14px; border-bottom: 1px solid var(--linie); }
.daten tr:last-child th, .daten tr:last-child td { border-bottom: none; }
.daten .zeile { padding: 1px 0; }

/* Zustandsmarken */
[class^="marke-"] {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 11px;
  background: var(--flaeche); color: var(--leise);
}
.marke-erfolgreich { background: var(--gutbg);  color: var(--gut); }
.marke-abgelehnt   { background: var(--fehlbg); color: var(--fehl); }
.marke-fehler      { background: var(--fehlbg); color: var(--fehl); }
.marke-wartend     { background: var(--warnbg); color: var(--warn); }

/* --- Formulare --------------------------------------------------------- */

button, .filter a, .blaettern a {
  font: inherit; font-size: 14px;
}
button {
  background: var(--blau); color: #fff; border: none; padding: 7px 16px;
  border-radius: 4px; cursor: pointer;
}
button:hover { background: var(--dunkel); }
button.ernst { background: var(--warn); font-weight: 600; padding: 10px 22px; }
button.ernst:hover { background: #8f5500; background: color-mix(in srgb, var(--warn) 82%, #000); }

input[type=text], input[type=password], input[type=search], select, input[type=file] {
  font: inherit; padding: 6px 10px; border: 1px solid var(--linie);
  border-radius: 4px; background: var(--grund); max-width: 100%;
}
input:focus, select:focus, button:focus { outline: 2px solid var(--blau); outline-offset: 1px; }

.filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.filter a { padding: 4px 10px; border-radius: 12px; text-decoration: none; }
.filter a.aktiv { background: var(--hell); }
.upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.liste form { margin: 0; }
.blaettern { display: flex; gap: 16px; align-items: center; margin: 14px 0; color: var(--leise); font-size: 14px; }

/* --- Prüfbericht ------------------------------------------------------- */

.bericht {
  background: var(--grund); border: 1px solid var(--linie); border-left: 5px solid var(--blau);
  border-radius: 5px; padding: 18px 22px; margin-bottom: 26px;
}
.bericht.gut      { border-left-color: var(--gut); }
.bericht.schlecht { border-left-color: var(--fehl); }
.bericht h2 { margin-top: 0; border: none; padding: 0; }
.bericht .pfad { color: var(--leise); font-size: 13px; margin: 0 0 12px; }
.befunde { margin: 12px 0; padding-left: 20px; }
.befunde li { color: var(--fehl); margin-bottom: 3px; font-size: 14px; }

/* --- Anmeldung --------------------------------------------------------- */

.anmeldeseite {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--hell), #ffffff 65%);
  padding: 20px;
}
.anmeldekarte {
  background: var(--grund); border: 1px solid var(--linie); border-top: 4px solid var(--blau);
  border-radius: 7px; padding: 34px 36px; width: 100%; max-width: 380px;
  box-shadow: 0 6px 26px rgba(0,0,0,.07);
}
.anmeldekarte .marke { display: block; margin-bottom: 16px; }
.anmeldekarte .marke img { height: 26px; width: auto; display: block; }
.anmeldekarte h1 { font-size: 19px; }
.anmeldekarte label { display: block; margin: 16px 0 0; font-size: 13px; color: var(--leise); }
.anmeldekarte input { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; font-size: 15px; }
.anmeldekarte button { width: 100%; margin-top: 22px; padding: 10px; font-size: 15px; }

/* --- Eigene Inhalte ----------------------------------------------------- */

.karte-form {
  background: var(--grund); border: 1px solid var(--linie); border-radius: 5px;
  padding: 18px 20px; max-width: 900px;
}
.karte-form label, .feldgruppe label { display: block; font-size: 13px; color: var(--leise); }
.karte-form input[type=text], .karte-form select { display: block; margin-top: 4px; }
.karte-form label.voll, .karte-form div.voll { margin-top: 14px; display: block; }
.karte-form label.voll input { width: 100%; }
.karte-form fieldset {
  border: 1px solid var(--linie); border-radius: 4px; margin: 18px 0 16px; padding: 10px 14px 14px;
}
.karte-form legend { font-size: 13px; color: var(--leise); padding: 0 6px; }

/* Ein Link, der wie ein Knopf aussieht - fuer den Vorlagendownload. */
.knopf {
  display: inline-block; padding: 8px 16px; border-radius: 4px;
  background: var(--blau); color: #fff; text-decoration: none; font-size: 14px;
}
.knopf:hover { background: var(--dunkel); }

/* Modenwahl im Tabellenimport: Die Erklaerung steht neben dem Knopf, nicht
   in einer Fussnote - sie entscheidet ueber den halben Bestand. */
label.wahl {
  display: grid !important; grid-template-columns: 22px 1fr; gap: 4px;
  align-items: start; margin-top: 10px; font-size: 13.5px; color: var(--text) !important;
  line-height: 1.5;
}
label.wahl input { margin-top: 3px; }
label.wahl strong { color: var(--dunkel); }

/* Hinweise im Pruefbericht: kein Fehler, aber etwas zum Nachtragen. */
.hinweise { list-style: none; margin: 10px 0 0; padding: 0; }
.hinweise li {
  font-size: 13px; color: var(--leise); padding: 3px 0 3px 18px; position: relative;
}
.hinweise li::before { content: "i"; position: absolute; left: 2px; font-weight: 700; color: var(--blau); }

.feldgruppe { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.feldgruppe > label, .feldgruppe > .sprachfeld { flex: 1 1 190px; }
/* Eine Feldgruppe richtet ihre Felder sonst an der Unterkante aus. Steht eine
   Sprachgruppe darin, ist sie mehrere Felder hoch - dann gehoeren "Art" und
   "Gueltig bis" nach OBEN, auf Hoehe des ersten Sprachfelds, und nicht ans
   untere Ende. Ohne :has() bleibt es beim bisherigen Verhalten; das sieht
   ungewohnt aus, aber nichts fehlt. */
.feldgruppe > .sprachfeld { align-self: flex-start; }
.feldgruppe:has(.sprachfeld) { align-items: flex-start; }
.feldgruppe input[type=text], .feldgruppe select { display: block; margin-top: 4px; width: 100%; }

.haken { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.haken .hak { display: flex; align-items: baseline; gap: 6px; color: var(--text); font-size: 14px; }

/* Ablegeflaeche fuer Drag and Drop */
.ablegeflaeche {
  border: 2px dashed var(--blau); border-radius: 8px; background: var(--hell);
  padding: 30px 20px; text-align: center; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ablegeflaeche:hover { background: #d8f2f9; background: color-mix(in srgb, var(--blau) 16%, #fff); }
.ablegeflaeche.aktiv { background: #c9edf7; background: color-mix(in srgb, var(--blau) 24%, #fff);
                       border-color: var(--dunkel); border-style: solid; }
.ablegeflaeche:focus { outline: 2px solid var(--dunkel); outline-offset: 2px; }
/* p.unter traegt global eine max-width und linksbuendige Raender - in einer
   zentrierten Flaeche sieht das nach einem Fehler aus. */
.ablegeflaeche p { margin: 0 auto 4px; max-width: 62ch; }
.ablegeflaeche .gross { font-size: 17px; font-weight: 600; color: var(--dunkel); }

.warteschlange { list-style: none; margin: 16px 0 0; padding: 0; max-width: 900px; }
.warteschlange li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center;
  background: var(--grund); border: 1px solid var(--linie); border-left: 4px solid var(--linie);
  border-radius: 4px; padding: 8px 12px; margin-bottom: 6px; font-size: 14px;
}
.warteschlange .name { overflow-wrap: anywhere; }
.warteschlange .stand { font-size: 13px; color: var(--leise); white-space: nowrap; }
.warteschlange .balken {
  grid-column: 1 / -1; height: 3px; background: var(--flaeche); border-radius: 2px; overflow: hidden;
}
.warteschlange .balken i { display: block; height: 100%; width: 0; background: var(--blau); transition: width .15s; }
.warteschlange li.laeuft   { border-left-color: var(--blau); }
.warteschlange li.gut      { border-left-color: var(--gut); background: var(--gutbg); }
.warteschlange li.gut .stand { color: var(--gut); }
.warteschlange li.schlecht { border-left-color: var(--fehl); background: var(--fehlbg); }
.warteschlange li.schlecht .stand { color: var(--fehl); }

/* Verdichtete Assetliste: eine Zeile je Asset, aufklappbar.
   <details> statt eigener Klapplogik - das kann der Browser besser, es
   funktioniert ohne JavaScript, und die Tastaturbedienung stimmt von selbst. */
.werkzeugleiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.werkzeugleiste input[type=search] { min-width: 260px; }
.werkzeugleiste .schub { flex: 1 1 auto; }
button.leise {
  background: var(--grund); color: var(--dunkel); border: 1px solid var(--linie);
  padding: 5px 12px; font-size: 13px;
}
button.leise:hover { background: var(--hell); }

.assetliste { border: 1px solid var(--linie); border-radius: 5px; overflow: hidden; background: var(--grund); }
.azeile { border-bottom: 1px solid var(--linie); }
.azeile:last-child { border-bottom: none; }
.azeile[open] { background: #fbfdfe; }
.azeile > summary {
  display: grid; grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1.4fr);
  gap: 14px; align-items: center; padding: 8px 14px; cursor: pointer;
  list-style: none;
}
.azeile > summary::-webkit-details-marker { display: none; }
.azeile > summary:hover { background: var(--hell); }
.azeile > summary:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.azeile .wer { min-width: 0; overflow-wrap: anywhere; }
.azeile .was { text-align: right; color: var(--text); overflow-wrap: anywhere; }

.mini {
  width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px;
  overflow: hidden;
}
.mini .minibild { width: 100%; height: 100%; object-fit: contain; }
.mini .minitext { font-size: 11px; font-weight: 600; color: var(--leise); letter-spacing: .04em; }

.afach { padding: 4px 14px 16px 84px; }
.akopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 10px; }
.afach .sicht { font-size: 13.5px; }
.afach .sicht td { padding: 5px 10px; }
.afach .sicht th { padding: 6px 10px; }
.afach .sicht input[type=text] { padding: 4px 8px; font-size: 13.5px; }

@media (max-width: 760px) {
  .azeile > summary { grid-template-columns: 44px minmax(0, 1fr); }
  .azeile .was { grid-column: 1 / -1; text-align: left; }
  .mini { width: 44px; height: 44px; }
  .afach { padding-left: 14px; }
}

footer {
  max-width: 1280px; margin: 0 auto; padding: 18px 20px 32px;
  color: var(--leise); font-size: 12.5px; border-top: 1px solid var(--linie);
}

@media (max-width: 720px) {
  .kopf-innen { padding: 8px 14px; }
  .kopf nav { margin-left: 0; width: 100%; }
  main { padding: 16px 14px 40px; }
  .liste { display: block; overflow-x: auto; }
}

/* --- Geteilte Links -----------------------------------------------------
   Die Adresse wird genau EINMAL angezeigt und danach nie wieder (sie steht
   in der Datenbank, gehoert aber nicht in eine Liste, die man beim
   Vorfuehren aufmacht). Deshalb darf dieser Kasten nicht zu uebersehen
   sein - er ist die einzige Gelegenheit. */
.linkkasten {
  background: var(--gutbg); border-left: 4px solid var(--gut);
  padding: 14px 16px; border-radius: 5px; margin: 0 0 22px; max-width: 80ch;
}
.linkzeile { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; }
.linkzeile input[type=text] {
  flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; background: var(--grund);
}

/* Ein Link, der wie ein zurueckhaltender Knopf aussieht - fuer Wege, die
   nichts veraendern und deshalb kein Formular brauchen. */
.knopfleise {
  display: inline-block; background: var(--grund); color: var(--dunkel);
  border: 1px solid var(--linie); border-radius: 4px;
  padding: 5px 12px; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.knopfleise:hover { background: var(--hell); text-decoration: none; }

/* Mehrere Handlungen je Zeile nebeneinander statt untereinander. */
.tatspalte { white-space: nowrap; }
.tatspalte form { display: inline-block; margin: 0 0 0 6px; }
.tatspalte > :first-child { margin-left: 0; }

/* Kaestchen mit Beschriftung ausserhalb der Filterleiste. */
.schalter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--leise);
}

/* Herkunftsvermerk in einer Liste - inline, nicht als eigene Zeile. */
.zettel {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px;
  background: var(--flaeche); color: var(--leise);
}

/* Formate als Mehrfachauswahl statt Textfeld. Sie stehen nebeneinander,
   weil es je Asset selten mehr als drei sind - eine Liste untereinander
   machte die Zeile dreimal so hoch. */
.formathaken { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.formathaken .hak {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13px; white-space: nowrap; color: var(--text);
}

/* Vorfuehrung einer Umrechnungskette. Der Kasten hat einen karierten Grund,
   damit man Transparenz von Weiss unterscheiden kann - genau daran haengt,
   ob "Hintergrund: transparent" das tut, was gemeint war. */
.probe {
  border: 1px solid var(--linie); border-radius: 5px; padding: 12px 14px;
  margin: 0 0 22px; background: var(--grund); max-width: 900px;
}
.probe strong { display: block; }
.probe img {
  display: block; margin-top: 10px; max-width: 100%; height: auto;
  border: 1px solid var(--linie);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef3f6 25%, transparent 25%, transparent 75%, #eef3f6 75%),
    linear-gradient(45deg, #eef3f6 25%, transparent 25%, transparent 75%, #eef3f6 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.kettentabelle td { vertical-align: middle; }
.kettentabelle select, .kettentabelle input { font-size: 13px; padding: 4px 7px; }

/* Die Schritttabelle auf einem Telefon.
   Gemessen: bei 412 px Fensterbreite war sie 938 px breit - man scrollte
   seitlich und sah dabei nie die ganze Zeile. Unter 760 px wird deshalb
   jede Zeile zu einer Karte, und die Spaltenueberschrift steht als
   Beschriftung vor dem Feld (data-spalte). */
@media (max-width: 760px) {
  .kettentabelle, .kettentabelle tbody, .kettentabelle tr, .kettentabelle td { display: block; width: auto; }
  .kettentabelle thead { display: none; }
  .kettentabelle tr {
    border: 1px solid var(--linie); border-radius: 5px;
    padding: 8px 12px; margin: 0 0 10px; background: var(--grund);
  }
  .kettentabelle td {
    border: none; padding: 4px 0;
    display: flex; align-items: center; gap: 10px;
  }
  .kettentabelle td::before {
    content: attr(data-spalte);
    flex: 0 0 92px; font-size: 12px; color: var(--leise);
  }
  .kettentabelle td[data-spalte="#"] {
    font-weight: 600; color: var(--dunkel); padding-bottom: 6px;
  }
  .kettentabelle td[data-spalte="#"]::before { content: "Schritt"; }
  .kettentabelle input, .kettentabelle select { flex: 1 1 auto; width: auto !important; max-width: 260px; }
}

/* Fokuspunkt: das Bild ist die Bedienflaeche. */
.fokusform { max-width: 640px; }
.fokusbild {
  position: relative; display: inline-block; cursor: crosshair;
  border: 1px solid var(--linie); border-radius: 5px; overflow: hidden;
  background: var(--flaeche); line-height: 0;
}
.fokusbild img { display: block; max-width: 100%; max-height: 340px; width: auto; }
/* Ein Ring, kein Punkt: Ein gefuellter Kreis verdeckt genau die Stelle, die
   man treffen will. */
.fokusmarke {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid #fff; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.55);
}

/* Ein Befehl zum Abschreiben. Umbruch erlaubt: Ein waagerechter Rollbalken
   in einer zweizeiligen Kachel findet niemand. */
.befehl {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 5px;
  padding: 10px 14px; margin: 0; max-width: 78ch;
  font-family: "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}