/* =====================================================================
   Gestaltung – grob angelehnt an das Corporate Design des Landes Hessen:
   ein dunkles Blau als einzige Akzentfarbe, sonst Weiß und helle Blaugrau-Töne,
   schlichte Formen mit fast eckigen Kanten. Rot / Gelb / Grün nur als Statusfarben
   (Gefährdungsklasse, Zustand, Meldungen).

   Farben:        nur über die Variablen in :root (dazu Weiß #fff)
   Schriftgrößen: 12 px (klein), 14 px (normal, ohne Angabe), 17 px (Blocküberschrift),
                  24 px (Seitenüberschrift, große Zahlen)
   Schrift:       Arial, normal oder fett (bold)
   ===================================================================== */

:root {
    --blau:          #00225f;   /* Kopfleiste, Überschriften, Schaltflächen, Kreuze */
    --blau-blass:    #7d8fb3;   /* "teilweise angekreuzt" */
    --blau-hell:     #e7ebf2;   /* Flächen, Tabellenköpfe */
    --status-gruen:  #3f7d4e;   /* Klasse 1, "intakt", Erfolgsmeldung */
    --status-gelb:   #d39b00;   /* Klasse 2 */
    --status-rot:    #b3122e;   /* Klasse 3, "beschädigt", Fehler */
    --gruen-hell:    #eaf3ec;   /* Hintergrund der Erfolgsmeldung */
    --rot-hell:      #fbeaec;   /* Hintergrund von Fehlerhinweis und fehlerhaften Feldern */
    --text:          #1c2430;
    --text-leise:    #5d6878;   /* Nebentexte, nicht angekreuzte Antworten */
    --linie:         #d8dde6;   /* Rahmen und Trennlinien */
    --grund:         #f5f6f9;   /* Seitenhintergrund */
    --radius:        2px;       /* fast eckige Kanten */
}

/* =========================== Grundlagen =========================== */

body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.45;
       color: var(--text); background: var(--grund); margin: 0; }
a { color: var(--blau); }
/* Eingabefelder und Knöpfe übernehmen sonst nicht die Schrift der Seite */
input, select, textarea, button { font-family: inherit; font-size: 14px; color: var(--text); }
button { cursor: pointer; }

/* =========================== Seitenrahmen =========================== */

/* Kopfleiste (templates/fragmente.html) */
.kopfleiste { background: var(--blau); color: #fff; }
.kopfleiste .innen { max-width: 1240px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 32px; }
.kopfleiste .app { font-size: 17px; font-weight: bold; color: #fff; text-decoration: none; }
.kopfleiste nav { display: flex; gap: 22px; }
.kopfleiste nav a { color: var(--blau-hell); text-decoration: none; }
.kopfleiste nav a:hover { color: #fff; }
.kopfleiste .abmelden { margin-left: auto; }
.kopfleiste .abmelden button.link { color: var(--blau-hell); font-weight: normal; }

main { max-width: 1240px; margin: 0 auto; padding: 18px 24px 40px; }

/* Seitentitel */
.zurueck { display: inline-block; text-decoration: none; margin-bottom: 8px; }
.titel { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.titel h1 { margin: 0; font-size: 24px; color: var(--blau); }
.unter { color: var(--text-leise); margin: 2px 0 0; }
.erklaerung { color: var(--text-leise); margin: 0 0 12px; }     /* kurzer Hinweistext in einem Block */
.aktionen { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.abstand-oben { margin-top: 16px; }

/* Schaltflächen */
.knopf { display: inline-block; padding: 8px 18px; border: 1.5px solid var(--blau); border-radius: var(--radius);
         background: #fff; color: var(--blau); font-weight: bold; text-decoration: none; }
.knopf.voll { background: var(--blau); color: #fff; }

/* Blöcke (weiße Kästen mit blauer Oberkante) und Überschriften */
.block { background: #fff; border: 1px solid var(--linie); border-top: 3px solid var(--blau); padding: 16px 20px; margin-bottom: 18px; }
.block h2 { margin: 0 0 12px; font-size: 17px; color: var(--blau); }
.blockkopf { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.blockkopf h2 { margin: 0; }
.blockkopf .bearbeiten { margin-left: auto; order: 99; font-weight: bold; text-decoration: none; }
h3 { margin: 0 0 8px; font-size: 12px; color: var(--text-leise); }
h2 small, h3 small { font-size: 12px; font-weight: normal; color: var(--text-leise); }

/* Hinweiskästen: gleicher Aufbau, nur die Farben unterscheiden sich */
.meldung, .fehlerhinweis, .archiv-hinweis { border-left: 4px solid; padding: 9px 14px; margin: 0 0 16px; }
.meldung { background: var(--gruen-hell); border-color: var(--status-gruen); font-weight: bold; }
.fehlerhinweis { background: var(--rot-hell); border-color: var(--status-rot); font-weight: bold; }
.archiv-hinweis { background: var(--blau-hell); border-color: var(--text-leise);
                  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.archiv-hinweis small { color: var(--text-leise); }

/* =========================== Tabellen =========================== */

table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
th { background: var(--blau-hell); color: var(--blau); }
.zahl { text-align: right; white-space: nowrap; }
.leer { color: var(--text-leise); font-style: italic; }
.warnung { color: var(--status-rot); font-weight: bold; }       /* "kurzfristig", Abweichung von Ahlenberg */
.zustand { font-weight: bold; } .zustand.gut { color: var(--status-gruen); } .zustand.schlecht { color: var(--status-rot); }
tr.erledigt td { color: var(--text-leise); }                    /* erledigte Maßnahmen grau */
tr.in-bearbeitung td { background: var(--blau-hell); }          /* Sicherung, die gerade im Formular steht */

/* Bearbeiten-Link und Knöpfe (Löschen, Erledigt) am Zeilenende sehen gleich aus */
.zeilenaktionen { white-space: nowrap; text-align: right; }
.zeilenaktionen a, button.link { margin-left: 14px; padding: 0; border: 0; background: none;
                                 color: var(--blau); font-weight: bold; text-decoration: none; }
.zeilenaktionen a:hover, button.link:hover { text-decoration: underline; }
form.zeilenknopf { display: inline; }

/* =========================== Formulare =========================== */

.formular .felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 20px; }
.formular label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: bold; color: var(--text-leise); }
.formular label.breit { grid-column: 1 / -1; }
.formular label.haken { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: normal; color: var(--text); }
.formular input[type=text], .formular input[type=password], .formular input[type=number], .formular input[type=date],
.formular select, .formular textarea {
    padding: 7px 9px; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--blau); outline-offset: -1px; }
.formular .gruppe-feld { display: flex; flex-direction: column; gap: 4px; }
.formular .feldname { font-size: 12px; font-weight: bold; color: var(--text-leise); }
.formular-knoepfe { display: flex; gap: 10px; }
.feld-fehler { border-color: var(--status-rot) !important; background: var(--rot-hell) !important; }
.fehler { font-size: 12px; font-weight: bold; color: var(--status-rot); }
.hinweis { font-size: 12px; font-weight: normal; color: var(--text-leise); }

/* Häkchen der Maßnahmentypen */
.typen { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 6px 20px;
         padding: 8px 10px; border: 1px solid transparent; }
.typen.feld-fehler { border-color: var(--status-rot); }

/* Hinweis auf mögliche Doppelerfassung (Neue Felsböschung) */
.block.dubletten { border-top-color: var(--status-gelb); }
.block.dubletten ul { margin: 6px 0 12px; padding-left: 20px; }

/* =========================== Anmeldung =========================== */

.anmeldung { max-width: 360px; margin: 60px auto 0; }
.anmeldung .felder { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }

/* =========================== Übersicht =========================== */

.suche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.suche label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-leise); }
.suche select { padding: 6px 8px; min-width: 170px; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
/* Häkchen "archivierte anzeigen": nebeneinander statt untereinander */
.suche label.haken-filter { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; font-size: 14px; color: var(--text); }
.zuruecksetzen { padding-bottom: 8px; }
.info { color: var(--text-leise); margin: 0 0 10px; }

table.liste th { position: sticky; top: 0; }                    /* Kopfzeile bleibt beim Scrollen stehen */
table.liste td { white-space: nowrap; }
tr.klickbar { cursor: pointer; }                                /* ganze Zeile anklickbar (liste.js) */
tr.klickbar:hover td { background: var(--blau-hell); }
tr.archiviert td { color: var(--text-leise); background: var(--grund); }
.marke-archiv { margin-left: 6px; padding: 0 5px; border-radius: var(--radius); font-size: 12px; background: var(--text-leise); color: #fff; }

/* Sortierbare Spalten (liste.js setzt "auf" bzw. "ab" an der sortierten Spalte) */
th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortierbar:hover { background: var(--linie); }
th.sortierbar.auf::after { content: " ▲"; }
th.sortierbar.ab::after { content: " ▼"; }

/* =========================== Detailseite =========================== */

/* Stammdaten: Angaben links, Karte rechts; bei schmalem Fenster untereinander */
.stamm { display: grid; grid-template-columns: 1fr 400px; gap: 24px; }
.spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; }
.spalten .ganz { grid-column: 1 / -1; border-top: 1px solid var(--linie); padding-top: 10px; }
@media (max-width: 1000px) {
    .stamm { grid-template-columns: 1fr; }
    .spalten { grid-template-columns: 1fr 1fr; }
}
dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
dt { color: var(--text-leise); }
dd { margin: 0; font-weight: bold; }
.bem { margin: 0; }

/* Karte (Leaflet, karte.js) bzw. Platzhalter ohne Koordinaten */
#karte { height: 320px; border: 1px solid var(--linie); }
.karte.leer { height: 320px; border: 1px solid var(--linie); background: var(--grund); color: var(--text-leise);
              display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.karten-beschriftung { padding: 1px 6px; border-radius: var(--radius); font-size: 12px; font-weight: bold; color: var(--blau); }

/* Gefährdungsklasse als farbiges Kästchen; k1 / k2 / k3 = Klasse */
.klasse { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: var(--radius);
          text-align: center; font-weight: bold; color: #fff; }
.klasse.gross { padding: 4px 12px; }
.k1 { background: var(--status-gruen); } .k2 { background: var(--status-gelb); } .k3 { background: var(--status-rot); }

/* Bewertung: Zusammenfassung über dem Formblatt */
.summe { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; background: var(--blau-hell); padding: 12px 16px; margin-bottom: 8px; }
.summe .rechts { margin-left: auto; }
.bez { display: block; font-size: 12px; color: var(--text-leise); }        /* Beschriftung über einem Wert */
.summe .gross, table.gegenueber .gross { font-size: 24px; font-weight: bold; color: var(--blau); }

/* Formblatt (Detailseite, Eingabe, Vergleich).
   Die Klassen der Antworten sind dieselben Kürzel wie die Kreuze in der Datenbank:
   .opt.X = angekreuzt, .opt.tw = teilweise, nur .opt = nicht angekreuzt */
.gruppe { margin-top: 16px; padding-bottom: 3px; border-bottom: 2px solid var(--blau); font-weight: bold; color: var(--blau); }
.krit { display: grid; grid-template-columns: 240px 1fr 50px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linie); }
.krit.eingabe { grid-template-columns: 240px 1fr; }
.krit.mittel { background: var(--grund); font-style: italic; padding-left: 6px; }
.optionen { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { padding: 4px 9px; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff;
       font-size: 12px; color: var(--text-leise); white-space: nowrap; }
.opt .p { margin-left: 5px; opacity: .75; }                     /* kleine Punktzahl der Antwort */
.opt.X { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: bold; }
.opt.tw { background: var(--blau-blass); border-color: var(--blau-blass); color: #fff; font-weight: bold; }
button.opt { line-height: 1.3; }                                /* Eingabe: Antworten sind Schaltflächen */
button.opt:hover { border-color: var(--blau); }
.pkt { text-align: right; font-size: 17px; font-weight: bold; color: var(--blau); }
.pkt.leise { color: var(--text-leise); }                        /* Hydrologie: zählt erst über den Mittelwert */
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--text-leise); }

/* =========================== Historie =========================== */

table.historie td.zeitpunkt { white-space: nowrap; }
table.historie td.beschreibung { white-space: pre-line; }       /* Zeilenumbrüche aus dem Text anzeigen */

/* =========================== Vergleich zweier Bewertungsstände =========================== */

.vergleich-auswahl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.vergleich-auswahl label { min-width: 320px; }
.vergleich-auswahl .pfeil { padding-bottom: 6px; font-size: 17px; color: var(--blau); }
table.gegenueber td { vertical-align: middle; }
table.gegenueber td:first-child { width: 190px; color: var(--text-leise); }
table.gegenueber td.anders { background: var(--blau-hell); font-weight: bold; }   /* geänderter Wert */
.diff { margin-left: 8px; font-size: 12px; font-weight: bold; color: var(--blau); }

.vergleich .krit { grid-template-columns: 232px 1fr 70px; padding-left: 8px; }  /* alle Zeilen gleich eingerückt */
.vergleich .krit.geaendert { background: var(--grund); box-shadow: inset 3px 0 0 var(--blau); }
.haken-aenderungen { margin-left: auto; order: 99; display: flex; align-items: center; gap: 6px; cursor: pointer; }
#formblatt.nur-aenderungen .gleich { display: none; }           /* Häkchen gesetzt: Unverändertes ausblenden */
/* Kennzeichen an einer geänderten Antwort: "neu", "entfällt", "vorher teilweise" … */
.opt .marke { margin-left: 6px; padding: 0 4px; border: 1px solid var(--blau); border-radius: var(--radius);
              background: #fff; color: var(--blau); font-weight: bold; }