/* Oberfläche des DMS: große Schrift, kräftiger Kontrast, ruhige Farben.
   Zielgruppe sind Vereinsmitglieder ohne EDV-Erfahrung, teils an kleinen
   Bildschirmen — deshalb keine schmalen Bedienelemente und keine Symbole ohne
   Beschriftung. */

:root {
  --papier: #fbfaf7;
  --flaeche: #ffffff;
  --linie: #cfc9be;
  --text: #22201c;
  --gedaempft: #5d574d;
  --akzent: #1f5c3d;
  --akzent-hell: #e6f0e9;
  --warnung: #8a4a00;
  --warnung-hell: #fdf0dd;
  --marke-blau: #e3ecf5;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 4rem;
  background: var(--papier);
  color: var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

main { max-width: 1200px; margin: 0 auto; }

h1 { font-size: 1.9rem; margin: 1.5rem 0 0.5rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 1.1rem; margin: 1rem 0 0.4rem; }

a { color: var(--akzent); }

/* ------------------------------------------------------------------ Kopf/Fuß */

.kopf {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
  justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 1rem 0;
  border-bottom: 3px solid var(--akzent);
}
.kopf-titel {
  font-size: 1.25rem; font-weight: 700; text-decoration: none; color: var(--akzent);
}
.kopf-navigation a {
  display: inline-block; margin-left: 1.25rem; padding: 0.4rem 0.2rem;
  font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent;
}
.kopf-navigation a:hover { border-bottom-color: var(--akzent); }

.fuss {
  max-width: 1200px; margin: 3rem auto 0; padding-top: 1rem;
  border-top: 1px solid var(--linie); color: var(--gedaempft); font-size: 0.9rem;
}

.hinweis { color: var(--gedaempft); font-size: 0.9rem; }
.meldung {
  max-width: 1200px; margin: 1rem auto 0; padding: 0.9rem 1.1rem;
  background: var(--akzent-hell); border-left: 6px solid var(--akzent);
  border-radius: var(--radius); font-weight: 600;
}
.warnung {
  padding: 0.8rem 1rem; background: var(--warnung-hell);
  border-left: 6px solid var(--warnung); border-radius: var(--radius);
}
.hervorgehoben { font-weight: 600; }

/* ------------------------------------------------------------- Bedienelemente */

.knopf {
  display: inline-block; padding: 0.7rem 1.2rem; border: 2px solid var(--akzent);
  border-radius: var(--radius); background: var(--flaeche); color: var(--akzent);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--akzent-hell); }
.knopf.haupt { background: var(--akzent); color: #fff; }
.knopf.haupt:hover { background: #17492f; }
.knopf.leise { border-color: var(--linie); color: var(--gedaempft); }
.knopf.gross { font-size: 1.1rem; padding: 0.9rem 1.6rem; }
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }

input[type="text"], input[type="search"], select, textarea {
  width: 100%; padding: 0.6rem 0.7rem; font: inherit;
  border: 2px solid var(--linie); border-radius: var(--radius); background: #fff;
}
input:focus, select:focus, textarea:focus, .knopf:focus, a:focus {
  outline: 3px solid #b58900; outline-offset: 2px;
}
label { display: block; font-weight: 600; margin-bottom: 0.75rem; }
label input, label select, label textarea { font-weight: 400; margin-top: 0.25rem; }
.feldhinweis { font-weight: 400; color: var(--gedaempft); font-size: 0.85rem; }

/* -------------------------------------------------------------- Suche/Filter */

.suchbereich {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.2rem; margin-top: 1rem;
}
.suchzeile { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.suchzeile label.gross { font-size: 1.05rem; margin: 0; }
.suchzeile input { flex: 1 1 24rem; font-size: 1.1rem; padding: 0.8rem; }
.filter { margin-top: 1rem; border-top: 1px solid var(--linie); padding-top: 0.75rem; }
.filter summary { font-weight: 600; cursor: pointer; padding: 0.3rem 0; }
.filtergitter {
  display: grid; gap: 0.75rem 1.25rem; margin-top: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.filteraktionen { display: flex; gap: 0.75rem; align-items: center; }

.trefferzahl { font-weight: 600; margin-top: 1.5rem; }
.leerhinweis { background: var(--flaeche); padding: 1rem; border-radius: var(--radius); }

/* ------------------------------------------------------------- Dokumentliste */

.dokumentliste { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.dokumentkarte {
  display: flex; gap: 1.25rem; padding: 1rem; margin-bottom: 0.9rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.bildfeld {
  flex: 0 0 130px; display: flex; align-items: center; justify-content: center;
  min-height: 130px; background: #f0ece4; border-radius: var(--radius); overflow: hidden;
}
.bildfeld img { width: 100%; height: 100%; object-fit: cover; }
.kein-bild { color: var(--gedaempft); font-size: 0.85rem; text-align: center; padding: 0.5rem; }
.textfeld { flex: 1 1 auto; min-width: 0; }
.textfeld h2, .textfeld h3 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.textfeld h2 a, .textfeld h3 a { text-decoration: none; }
.angaben { margin: 0.2rem 0; color: var(--gedaempft); }
.angaben span + span::before { content: " · "; }
.fundstelle { margin: 0.5rem 0 0; }
.fundstelle a { text-decoration: none; color: var(--text); }
mark { background: #ffe9a8; padding: 0 0.1em; }

.marken { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.marke {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; background: var(--marke-blau); color: #24405e;
}
.marke.vorschlag { background: var(--warnung-hell); color: var(--warnung); }
.marke.geprueft { background: var(--akzent-hell); color: var(--akzent); }
.marke.offen { background: #f3e2e2; color: #7a2929; }
.marke.tag { text-decoration: none; background: #efece5; color: #4a453c; }

.blaettern { display: flex; gap: 1rem; align-items: center; margin: 1.5rem 0; }

/* ---------------------------------------------------------------- Detailseite */

.zurueck { margin: 1rem 0 0; }
.zusammenfassung {
  background: var(--akzent-hell); border: 1px solid var(--akzent);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 1.25rem;
}
.zusammenfassung h2 { margin-top: 0; }
.zusammenfassungstext { font-size: 1.1rem; white-space: pre-wrap; }

.seitenansicht {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 1.5rem;
}
.seitenkopf { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.seitenkopf h2 { margin: 0; }
.blaetterknoepfe { display: flex; gap: 0.6rem; }
.seitenpaar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1rem; }
@media (max-width: 900px) { .seitenpaar { grid-template-columns: 1fr; } }
.seitenbild { margin: 0; }
.seitenbild img { width: 100%; height: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
.seitenbild figcaption { color: var(--gedaempft); font-size: 0.85rem; margin-top: 0.4rem; word-break: break-word; }
.ocrtext {
  white-space: pre-wrap; word-wrap: break-word; font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.95rem; background: #f7f5f0; border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 0.8rem; max-height: 32rem; overflow: auto;
}
.ocrtext.abschrift { background: #f2f7f3; }
textarea.haupttext {
  font-family: ui-monospace, "Courier New", monospace; font-size: 0.95rem;
  margin-bottom: 0.6rem; min-height: 18rem;
}
.rohfassungen {
  margin-top: 1.5rem; border-top: 1px solid var(--linie); padding-top: 0.75rem;
}
.rohfassungen summary { font-weight: 600; cursor: pointer; padding: 0.4rem 0; }
.rohfassungen h4 { margin: 1rem 0 0.3rem; font-size: 1rem; }
.rohfassungen form { margin-top: 0.5rem; }
.bildumschalter { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.bildumschalter .knopf { padding: 0.45rem 0.9rem; font-size: 0.95rem; }

.marke.pruefen { background: #fdf0dd; color: var(--warnung); }
.laeuft {
  padding: 0.8rem 1rem; background: var(--marke-blau); color: #24405e;
  border-left: 6px solid #4a7fb5; border-radius: var(--radius); font-weight: 600;
}
.warnung ul { margin: 0.4rem 0 0; padding-left: 1.2rem; font-weight: 400; }

/* ------------------------------------------------------- Zuschnitt ändern */

.bildflaeche {
  position: relative; display: inline-block; max-width: 100%;
  touch-action: none; user-select: none; cursor: crosshair;
}
.bildflaeche img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--linie); border-radius: var(--radius); background: #fff;
}
.zuschnittrahmen {
  position: absolute; border: 3px solid var(--akzent);
  box-shadow: 0 0 0 9999px rgba(34, 32, 28, 0.45); cursor: move;
}
.griff {
  position: absolute; width: 26px; height: 26px; background: var(--flaeche);
  border: 3px solid var(--akzent); border-radius: 50%;
}
.griff.ecke-ol { left: -14px; top: -14px; cursor: nwse-resize; }
.griff.ecke-or { right: -14px; top: -14px; cursor: nesw-resize; }
.griff.ecke-ul { left: -14px; bottom: -14px; cursor: nesw-resize; }
.griff.ecke-ur { right: -14px; bottom: -14px; cursor: nwse-resize; }

.werkzeugzeile {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
  margin: 0.9rem 0; padding: 0.75rem; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.werkzeuggruppe { display: flex; align-items: center; gap: 0.5rem; }
.werkzeugtitel { font-weight: 600; }
.werkzeuggruppe input[type="range"] { width: 12rem; }
.werkzeuggruppe output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.5rem; }
.bildbearbeitung .formularaktionen { margin-bottom: 1rem; }

.miniaturen {
  display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.75rem 0 0.25rem;
  margin-top: 1rem; border-top: 1px solid var(--linie);
}
.miniatur {
  flex: 0 0 auto; width: 84px; text-align: center; text-decoration: none;
  color: var(--gedaempft); font-size: 0.8rem;
}
.miniatur img {
  width: 84px; height: 110px; object-fit: cover;
  border: 2px solid var(--linie); border-radius: 4px; background: #fff;
}
.miniatur.aktiv img { border-color: var(--akzent); }
.miniatur.aktiv span { color: var(--akzent); font-weight: 700; }

.metadaten, .gruppenkorrektur {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 1.5rem;
}
.feldgitter {
  display: grid; gap: 0.5rem 1.25rem; margin-top: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feldgitter .breit { grid-column: 1 / -1; }
.formularaktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.statuszeile {
  display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--linie);
}
.statuszeile label { margin: 0; flex: 0 1 22rem; }

.korrekturfelder {
  display: grid; gap: 1rem; margin-top: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.korrekturkarte {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 0.9rem 1rem; background: var(--papier);
}
.korrekturkarte h3 { margin-top: 0; }
.korrekturkarte p { font-size: 0.9rem; color: var(--gedaempft); }
.herkunft { margin-top: 1rem; word-break: break-word; }

/* --------------------------------------------------------------------- Import */

.importkasten {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.2rem; margin-top: 1rem;
}
.dateiliste { columns: 2; font-family: ui-monospace, "Courier New", monospace; font-size: 0.9rem; }
@media (max-width: 700px) { .dateiliste { columns: 1; } }
code { background: #f0ece4; padding: 0.1rem 0.35rem; border-radius: 4px; word-break: break-all; }

.journal { width: 100%; border-collapse: collapse; background: var(--flaeche); }
.journal th, .journal td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--linie); }
.journal th { background: var(--akzent-hell); }

/* ------------------------------------------ Tonwerte, Freigabe, externe Erkennung */

.tonwerte {
  margin-top: 1rem; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; background: var(--flaeche);
}
.tonwerte summary { cursor: pointer; font-weight: 600; }
.reglergitter {
  display: grid; gap: 0.75rem 1.5rem; margin: 0.75rem 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.reglergitter label { display: block; margin: 0; }
.reglergitter input[type="range"] { width: 100%; }
.reglergitter output {
  font-family: ui-monospace, "Courier New", monospace; font-weight: 600;
}

.extern {
  margin-top: 1.25rem; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; background: var(--flaeche);
}
.extern summary { cursor: pointer; font-weight: 600; }
.externknoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0; }

/* Der Freigabedialog soll auffallen: hier verlässt etwas den Rechner. */
.freigabedialog {
  border: 2px solid #b3541e; border-radius: var(--radius);
  background: #fdf6ef; padding: 0.9rem 1.1rem; margin: 0.75rem 0;
}
.freigabedialog ul { margin: 0.5rem 0 0.75rem 1.1rem; padding: 0; }
.freigabedialog li { margin-bottom: 0.35rem; }
.ankreuz {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin: 0.6rem 0; font-weight: 500;
}
.ankreuz input { margin-top: 0.25rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.laufwahl { border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.8rem 1rem; }
.laufwahl legend { font-weight: 600; padding: 0 0.4rem; }

/* Doppel-Lauf: abweichende Wörter sind die verdächtigen (ADR-015). */
.kifassung { line-height: 1.6; }
mark.geraten { background: #ffd9a8; border-bottom: 2px solid #b3541e; padding: 0 0.1rem; }
.doppellauf {
  background: var(--akzent-hell); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; margin: 0.5rem 0;
}
.fundstelle.ungeprueft { color: var(--gedaempft); }

.bestandstabelle, .protokolltabelle {
  width: 100%; border-collapse: collapse; background: var(--flaeche); margin-top: 1rem;
}
.bestandstabelle th, .bestandstabelle td,
.protokolltabelle th, .protokolltabelle td {
  text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.bestandstabelle th, .protokolltabelle th { background: var(--akzent-hell); }
.zeile-auffaellig { background: #fdf6ef; }

.stapelstand progress { width: 100%; height: 1.4rem; margin: 0.5rem 0; }
.einleitung { max-width: 62rem; }

.seitenliste { list-style: none; padding: 0; margin: 1rem 0; }
.seitenkarte {
  display: flex; gap: 1rem; padding: 0.8rem; margin-bottom: 0.75rem;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche);
}
.seitenkarte .bildfeld { flex: 0 0 120px; }
.seitenkarte .bildfeld img { width: 100%; border-radius: 4px; }
.seitenkarte h2 { font-size: 1.05rem; margin: 0 0 0.3rem; }

/* --- Anmeldung und Benutzerverwaltung (ADR-017 Nr. 1) -------------------- */

.anmeldeseite {
  max-width: 30rem; margin: 2rem auto; padding: 0 1rem;
}
.anmeldeformular p { margin: 0 0 1rem; }
.anmeldeformular label {
  display: block; font-weight: 600; margin-bottom: 0.25rem;
}
.anmeldeformular input[type="text"],
.anmeldeformular input[type="password"],
.anmeldeformular input:not([type]) {
  width: 100%; padding: 0.5rem; font-size: 1rem;
}
.abmelden {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-size: 0.9rem; color: var(--gedaempft);
}
.angemeldet { white-space: nowrap; }
.spur { font-size: 0.85rem; color: var(--gedaempft); }

/* --- Zwei Zusammenfassungsarten (M2-Nachtrag VIII) ----------------------- */

/* Die Übersicht steht oben und beantwortet die Einstiegsfrage; sie darf
   deshalb kräftiger auftreten als die Zusammenfassung darunter. */
.uebersicht {
  background: var(--flaeche); border: 2px solid var(--akzent);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 1.25rem;
}
.uebersicht h2 { margin-top: 0; }
.schlagwortzeile { margin: 0.6rem 0 0.2rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
/* Ungeprüfte Schlagworte sehen bewusst anders aus als echte Schlagwortmarken:
   Sie sind Suchtext, kein Metadatenfeld (ADR-015 Nr. 2). */
.marke.tag.ungeprueft {
  background: transparent; border: 1px dashed var(--gedaempft); color: var(--gedaempft);
}
.wiedergabe {
  margin-top: 1.25rem; padding: 0.8rem 1rem;
  background: var(--akzent-hell); border-radius: var(--radius);
}
.wiedergabe h4 { margin: 0 0 0.5rem; font-size: 1rem; }

/* --- Import-Schutz (M2-Nachtrag VIII Nr. 5) ------------------------------ */

.konflikt { margin-bottom: 1rem; }
.konflikt h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.konflikt summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }
.konflikt .ocrtext { max-height: 18rem; }
.konfliktliste li { margin-bottom: 0.6rem; }
.reihenformular { display: inline; }
.uebersichtsstapel progress { width: 100%; height: 1.4rem; margin: 0.5rem 0; }