/* jaco/edo service – Finder-Ansicht. Drei Schriftgrößen, Raster 4/8 px, keine Schatten, Radien, Verläufe, Icons. */
:root {
  --text: #000;
  --grund: #fff;
  --linie: #e5e7eb;
  --neben: #6b7280;
  --blau: #0000ff;
  --achtung: #d97706;
  --kritisch: #dc2626;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s24: 96px;
  --zeile: 28px;
  --leiste: 56px;
  --b1: 240px;
  --b2: 280px;
  --wort: 64px;
  --datum: 120px;
  --schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --dauer: 200ms;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 500; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }

/* Schriftgrößen: genau drei */
.titel { font-size: 22px; line-height: 30px; }
.spalte-kopf, .dok h2 { font-size: 16px; line-height: 24px; }

.neben { color: var(--neben); }
.z-achtung { color: var(--achtung); }
.z-kritisch { color: var(--kritisch); }
.link { color: var(--blau); }
.link:hover { text-decoration: underline; }

.knopf {
  background: none;
  border: 0;
  color: var(--blau);
  height: 20px;
  cursor: pointer;
  white-space: nowrap;
}
.knopf:hover { text-decoration: underline; }
.knopf:focus-visible { outline-offset: 2px; }

/* ---------- Start, Anmeldung, Einrichtung ---------- */
.start-seite { overflow-y: auto; scrollbar-gutter: stable; }
.start { width: 320px; max-width: calc(100% - 2 * var(--s4)); margin: 0 auto; padding: var(--s24) 0 var(--s12); }
.start-breit { width: 384px; }
.start .titel { margin-bottom: var(--s6); }
.formular { display: flex; flex-direction: column; gap: var(--s4); }
.feld { display: flex; flex-direction: column; gap: var(--s1); }
.feld input {
  height: var(--s8);
  padding: 0 var(--s2);
  border: 1px solid var(--linie);
  border-radius: 0;
  background: var(--grund);
  appearance: none;
}
.feld input:focus-visible { outline: 2px solid var(--blau); outline-offset: -1px; }
.wert { min-height: 20px; overflow-wrap: anywhere; }
.geheimnis { letter-spacing: 0.04em; }
.uri { color: var(--neben); }
.qr-feld { align-items: flex-start; }
.qr { display: block; width: 228px; height: auto; }
.meldung { min-height: 20px; }
.haupt {
  height: var(--s8);
  padding: 0 var(--s4);
  border: 0;
  border-radius: 0;
  background: var(--blau);
  color: #fff;
  cursor: pointer;
  align-self: flex-start;
}
.haupt:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* ---------- App ---------- */
.app {
  display: grid;
  grid-template-rows: var(--leiste) auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.kopf {
  display: flex;
  align-items: baseline;
  gap: var(--s8);
  height: var(--leiste);
  padding: var(--s3) var(--s4) 0;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.marke { flex: none; }
.umschalter { display: flex; gap: var(--s4); }
.umschalt { color: var(--neben); }
.umschalt.aktiv { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.umschalt:hover { color: var(--text); }
.umschalt:focus-visible { outline-offset: 2px; }
.abmelden { display: flex; gap: var(--s3); margin-left: auto; }

.kritisch-zeile {
  display: flex;
  gap: var(--s4);
  height: calc(var(--zeile) + 1px);
  padding: var(--s1) var(--s4) 0;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
  overflow: hidden;
}
.kritisch-liste { display: flex; gap: var(--s4); overflow: hidden; text-overflow: ellipsis; }

.spalten {
  display: grid;
  grid-template-columns: var(--b1) var(--b2) minmax(0, 1fr);
  min-height: 0;
}
.spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--linie);
}
.spalte:last-child { border-right: 0; }
.spalte-kopf {
  display: flex;
  gap: var(--s3);
  flex: none;
  height: 41px;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
  overflow: hidden;
}
.kopf-text { overflow: hidden; text-overflow: ellipsis; }
.zurueck { display: none; color: var(--blau); }
.spalte-inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: var(--s1) 0;
}
.spalte.neu .spalte-inhalt { animation: einblenden var(--dauer) ease-out both; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

/* Zeilen: feste Höhe, gemeinsame Grundlinie in allen Spalten */
.zeile {
  display: grid;
  align-items: start;
  column-gap: var(--s2);
  height: var(--zeile);
  padding: var(--s1) var(--s3);
  white-space: nowrap;
}
a.zeile { cursor: default; }
a.zeile:focus-visible { outline-offset: -2px; }
.zeile.ausgewaehlt { background: var(--blau); color: #fff; }
.zeile.ausgewaehlt .neben, .zeile.ausgewaehlt .z-achtung, .zeile.ausgewaehlt .z-kritisch { color: #fff; }
.zeile.ausgewaehlt:focus-visible { outline-color: #fff; outline-offset: -4px; }
.zelle { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.zahl-links { font-variant-numeric: tabular-nums; }
.wort { text-align: left; }

.gruppe { grid-template-columns: minmax(0, 1fr); }
.z1, .z2 { grid-template-columns: minmax(0, 1fr) var(--wort); }
.z2.mit-zahl { grid-template-columns: minmax(0, 1fr) var(--s8) var(--wort); }
.nz { grid-template-columns: var(--wort) var(--s12); }
.mz { grid-template-columns: var(--datum) minmax(0, 1fr); }
.bz { grid-template-columns: var(--datum) var(--wort) minmax(0, 1fr); }
.ez { grid-template-columns: minmax(0, 1fr); }
.oz { grid-template-columns: var(--s8) minmax(0, 1fr) var(--wort) auto; }
.oz.zweit { grid-template-columns: var(--s8) minmax(0, 1fr); }
.vz { grid-template-columns: var(--datum) minmax(0, 1fr) 160px; }
.verz { grid-template-columns: var(--s8) var(--datum) 96px minmax(0, 1fr); }
.dz { grid-template-columns: var(--s8) var(--s8) var(--s3) minmax(0, 1fr); }
.dz.gleich { color: var(--neben); }
.dz .code { font-family: var(--mono); white-space: pre; }
.zeichen { text-align: center; }
.aktionen { display: flex; gap: var(--s3); }
.aktion { display: flex; gap: var(--s3); }
.tabs { display: flex; gap: var(--s4); }
.vergleich-form { display: flex; gap: var(--s3); }
.vergleich-form select {
  height: 20px;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  background: var(--grund);
  appearance: none;
  padding: 0 var(--s1);
}

/* Bearbeiten: Textbereich füllt die Spalte, keine Größenänderung */
.spalte-inhalt:has(.bearbeiten) { display: flex; flex-direction: column; }
.bearbeiten { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bearbeiten textarea {
  flex: 1 1 auto;
  min-height: 240px;
  margin: 0 var(--s3);
  padding: var(--s2);
  border: 1px solid var(--linie);
  border-radius: 0;
  resize: none;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  white-space: pre;
  overflow: auto;
}
.bearbeiten textarea:focus-visible { outline-offset: -1px; }

/* Dokument-Ansicht: Markdown sicher dargestellt */
.dok { padding: var(--s2) var(--s3) var(--s8); max-width: 880px; overflow-wrap: anywhere; }
.dok h1 { font-size: 22px; line-height: 30px; margin: var(--s4) 0 var(--s2); }
.dok h2 { margin: var(--s4) 0 var(--s2); }
.dok h3, .dok h4, .dok h5, .dok h6 { font-size: 13px; line-height: 20px; margin: var(--s3) 0 var(--s1); }
.dok p, .dok ul, .dok ol, .dok pre, .dok table, .dok blockquote { margin: 0 0 var(--s2); }
.dok ul, .dok ol { padding-left: var(--s6); }
.dok ul ul, .dok ol ol, .dok ul ol, .dok ol ul { margin: 0; }
.dok strong { font-weight: 700; }
.dok code { font-family: var(--mono); font-size: inherit; line-height: inherit; }
.dok pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--s2) 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.dok blockquote { padding-left: var(--s3); border-left: 1px solid var(--linie); color: var(--neben); }
.dok hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s4) 0; }
.dok table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.dok th, .dok td { border: 1px solid var(--linie); padding: var(--s1) var(--s2); text-align: left; vertical-align: top; }
.pruefsumme { font-family: var(--mono); }

/* ---------- schmal: eine Spalte nach der anderen ---------- */
@media (max-width: 899px) {
  .app { grid-template-rows: 84px auto minmax(0, 1fr); }
  .kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 30px 28px;
    row-gap: var(--s1);
    height: 84px;
    padding: var(--s3) var(--s4) 0;
    gap: var(--s1) var(--s4);
  }
  .umschalter { grid-column: 1 / -1; grid-row: 2; padding-top: var(--s1); }
  .abmelden { grid-column: 2; grid-row: 1; align-self: end; }
  .abmelden .neben { display: none; }
  .spalten { grid-template-columns: minmax(0, 1fr); }
  .spalte { display: none; border-right: 0; }
  .spalten[data-tiefe="1"] .s1, .spalten[data-tiefe="2"] .s2, .spalten[data-tiefe="3"] .s3 { display: flex; }
  .zurueck { display: inline; }
  .vz { grid-template-columns: var(--datum) minmax(0, 1fr); }
  .vz > :nth-child(3) { display: none; }
  .bz { grid-template-columns: var(--datum) var(--wort) minmax(0, 1fr); }
  .mz { grid-template-columns: var(--datum) minmax(0, 1fr); }
  .oz { grid-template-columns: var(--s8) minmax(0, 1fr) auto; }
  .oz > :nth-child(3) { display: none; }
  .verz { grid-template-columns: var(--s8) var(--datum) minmax(0, 1fr); }
  .verz > :nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}