/* BERTA – Oberfläche im RUG-CI (Quelle: ci-rug.md, Crawl 12.07.2026)
   Primärgrün #009641 · Hover #007420 · Text #333 · Schrift Verdana */

:root {
  --gruen: #009641;
  --gruen-dunkel: #007420;
  --text: #333333;
  --text-dezent: #666666;
  --linie: #e4e4e4;
  --flaeche: #f5f5f5;
  --gefahr: #c00001;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--flaeche);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Kopfleiste */
.kopf { background: #ffffff; border-bottom: 3px solid var(--gruen); }
.kopf-innen {
  max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.marke img { height: 44px; }
.marke span { font-size: 15px; }
.kopf nav { display: flex; align-items: center; gap: 16px; }
.kopf nav a { color: var(--gruen-dunkel); text-decoration: none; }
.kopf nav a:hover { text-decoration: underline; }
.wer { color: var(--text-dezent); }

/* Inhalt */
.inhalt { flex: 1; max-width: 1200px; margin: 0 auto; padding: 24px 20px; width: 100%; }
h1 { font-size: 22px; color: var(--gruen-dunkel); margin: 0 0 16px; }
h2 { font-size: 16px; color: var(--gruen-dunkel); margin: 0 0 8px; }
h3 { font-size: 13px; margin: 0; }
.fuss {
  text-align: center; padding: 14px; color: var(--text-dezent);
  font-size: 11px; border-top: 1px solid var(--linie); background: #ffffff;
}

/* Karten & Layout */
.karte {
  background: #ffffff; border: 1px solid var(--linie); border-radius: 6px;
  padding: 18px 20px; margin-bottom: 18px;
}
.schmal { max-width: 380px; margin: 60px auto; }
.mittig { text-align: center; }
.login-logo { height: 70px; margin-bottom: 8px; }
.zeile-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.spalten { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .spalten { grid-template-columns: 1fr; } }
/* Abstand zwischen den Formular-Bloecken der linken Spalte (Eingabemaske /
   Massnahmen / Bericht), damit der abschliessende Knopf nicht am naechsten
   Abschnitt klebt. */
.spalte-form > form { margin-bottom: 26px; }
.spalte-form > form:last-child { margin-bottom: 0; }

/* Formulare */
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dezent); }
label.breit { grid-column: 1 / -1; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  font: inherit; color: var(--text); padding: 7px 9px;
  border: 1px solid #cdcdcd; border-radius: 4px; background: #ffffff; width: 100%;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gruen); border-color: var(--gruen); }
fieldset.karte { border: 1px solid var(--linie); }
fieldset.karte legend { font-weight: bold; color: var(--gruen-dunkel); padding: 0 6px; }
.feld-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .feld-raster { grid-template-columns: 1fr; } }
.inline-form { display: flex; gap: 8px; align-items: center; margin: 0; }
/* Knopfzeilen am Ende eines Karten-Abschnitts brauchen Luft nach oben: durch
   margin:0 klebten "Energiebilanz berechnen" & Co. direkt am Feldraster
   darueber (Befund Philipp 03.08.2026, zweite Abstands-Runde). Gilt nur fuer
   direkte Fieldset-Kinder - Knopfzeilen INNERHALB von .dok-aktionen,
   .foto-kachel usw. behalten ihr gap-basiertes Layout. */
fieldset.karte > .inline-form { margin-top: 12px; }
.inline-label { flex-direction: row; align-items: center; gap: 8px; }
form .knopf { margin-top: 10px; }
.inline-form .knopf { margin-top: 0; }
/* Mehrere Knoepfe nebeneinander (z. B. Bericht erzeugen und CSV-Export):
   ohne eigenen Abstand kleben sie mit dem blossen Wortzwischenraum
   aneinander. Gilt fuer Knoepfe UND als Knopf gestaltete Links. */
.knopf-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.knopf-zeile .knopf { margin-top: 0; }

/* Knöpfe */
.knopf {
  font: inherit; background: var(--gruen); color: #ffffff; border: none;
  border-radius: 4px; padding: 9px 18px; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.knopf:hover { background: var(--gruen-dunkel); }
.knopf.sekundaer { background: #ffffff; color: var(--gruen-dunkel); border: 1px solid var(--gruen); }
.knopf.sekundaer:hover { background: var(--flaeche); }
.knopf.gefahr { background: #ffffff; color: var(--gefahr); border: 1px solid var(--gefahr); }
.knopf.gefahr:hover { background: #fdf0f0; }
.knopf.klein { padding: 5px 10px; font-size: 12px; }
.knopf.gross { padding: 12px 28px; font-size: 15px; }

/* Tabelle */
.tabelle { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid var(--linie); border-radius: 6px; }
.tabelle th {
  text-align: left; font-size: 12px; color: var(--text-dezent);
  padding: 10px 12px; border-bottom: 2px solid var(--gruen); background: #ffffff;
}
.tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.tabelle a { color: var(--gruen-dunkel); text-decoration: none; }
.tabelle a:hover { text-decoration: underline; }

/* Status */
.status { padding: 3px 10px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.status-in_arbeit { background: #fff4d6; color: #7a5c00; }
.status-pruefung { background: #e0edff; color: #1d4f91; }
.status-uebergeben { background: #e2f4e8; color: var(--gruen-dunkel); }

/* Dokumente */
.dok-block { border-top: 1px solid var(--linie); padding: 12px 0; }
.dok-block:first-of-type { border-top: none; }
.dok-liste { margin: 6px 0 14px; padding-left: 18px; }
.dok-liste a { color: var(--gruen-dunkel); }
/* Je Datei: Name in eigener Zeile, darunter die Knoepfe nebeneinander mit
   Abstand. Ohne das stapelten sich die Formulare als Blockelemente direkt
   aufeinander (0 px Abstand, sichtbar aneinanderklebend). */
.dok-liste li { margin-bottom: 10px; }
.dok-liste li:last-child { margin-bottom: 0; }
.dok-liste li > a { display: inline-block; margin-bottom: 8px; }
.dok-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dok-aktionen .inline-form { margin: 0; }

/* Maßnahmen-Auswahl */
.massnahmen-gewerk { border: 1px solid var(--linie); border-radius: 4px; padding: 8px 12px; margin: 6px 0; }
.massnahmen-gewerk summary { cursor: pointer; font-size: 13px; color: var(--gruen-dunkel); }
.massnahme-zeile { border-top: 1px solid var(--linie); padding: 8px 0; margin-top: 8px; }
.massnahme-zeile:first-of-type { border-top: none; margin-top: 4px; }
.massnahme-zeile .check { margin-bottom: 4px; }
.massnahme-zeile .check input[type="text"] { flex: 1; font-size: 13px; font-weight: bold; color: var(--text); }
.massnahme-zeile textarea { font-size: 12px; }

/* Hilfe */
.hilfe-nav { display: flex; gap: 16px; margin-bottom: 16px; }
.hilfe-nav a { color: var(--gruen-dunkel); text-decoration: none; font-weight: bold; }
.hilfe-nav a:hover { text-decoration: underline; }
#handbuch h3, #faq h3 { margin-top: 18px; margin-bottom: 4px; font-size: 14px; }
#handbuch h3:first-of-type, #faq h3:first-of-type { margin-top: 0; }
#schnellstart li, #handbuch p, #handbuch ul, #faq p { font-size: 13px; line-height: 1.5; }

/* KI-Einstellungen */
.hinweis-dsgvo { background: #fff4d6; color: #7a5c00; padding: 10px 12px; border-radius: 4px; font-size: 12px; line-height: 1.5; }
.key-status { font-size: 12px; font-weight: bold; }
.key-gesetzt { color: var(--gruen-dunkel); }
.key-fehlt { color: var(--text-dezent); }

/* Pruefhinweise */
.hinweis-panel { border-left: 4px solid #e0c060; background: #fffcf2; }
.hinweis-panel ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.hinweis-panel li { margin-bottom: 3px; }
.feld-meta { font-size: 11px; color: var(--text-dezent); }
.feld-meta.unsicher { color: #b06a00; }

/* Checklisten-Import: Wahl des Modus und Anzeige der Abweichungen */
.feld-gruppe { margin: 8px 0 10px; }
.wahl-zeile { display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  margin-bottom: 6px; font-size: 13px; color: var(--text); }
.wahl-zeile input { margin-top: 2px; flex: 0 0 auto; }
.konflikt-panel .knopf { white-space: nowrap; }
.konflikt-panel { border-left-color: #c07a30; background: #fff8f0; }
.konflikt-panel td { vertical-align: top; font-size: 13px; }
.konflikt-alt { color: var(--text-dezent); text-decoration: line-through; }
.konflikt-neu { color: #1f6b3a; }

/* KI-Vorschlaege / Auslese */
.vorschlag-liste { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; }
.vorschlag-liste li { margin-bottom: 3px; }
/* Gelbmarkierung fuer KI-ausgelesene Werte. Gilt auch fuer textarea: die
   IST-Zustand- und Notizfelder tragen dieselbe Klasse, wurden aber nie markiert,
   weil der Selektor nur input abdeckte (Befund E3, 03.08.2026). */
input.ausgelesen, textarea.ausgelesen { background: #fff9e6; border-color: #e0c060; }

/* Meldungen */
.fehler { color: var(--gefahr); background: #fdf0f0; padding: 8px 12px; border-radius: 4px; }
.erfolg { color: var(--gruen-dunkel); background: #e2f4e8; padding: 8px 12px; border-radius: 4px; }
/* "Nichts passiert"-Meldungen: kein Erfolg, kein Fehler - der Nutzer soll
   hinschauen. Frueher meldete die Maske auch bei 0 Treffern gruen (Befund E1). */
.warnung { color: #7a5a00; background: #fff9e6; border-left: 4px solid #e0c060; padding: 8px 12px; border-radius: 4px; }

/* Meldungen als Einblendung oben rechts (N4, 03.08.2026): sichtbar auch nach
   dem Ruecksprung an die Klickstelle. Fehler bleiben bis zum Schliessen. */
.toast-stapel { position: fixed; top: 14px; right: 14px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.toast { position: relative; margin: 0; padding-right: 34px; font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.toast-zu { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 16px; line-height: 1; cursor: pointer; color: inherit; }
.toast-weg { opacity: 0; transition: opacity 0.4s; }
.dezent { color: var(--text-dezent); font-size: 12px; }

/* Verbindungstest (Admin -> KI) */
.test-ergebnisse { margin-top: 12px; }
.test-block { border-left: 4px solid var(--linie); background: var(--flaeche); padding: 8px 12px; margin-bottom: 8px; border-radius: 0 4px 4px 0; }
.test-block.test-gut { border-left-color: var(--gruen); background: #f2faf5; }
.test-block.test-schlecht { border-left-color: var(--gefahr); background: #fdf3f3; }
.test-block.test-offen { border-left-color: #c9a227; background: #fffcf2; }
.test-kopf { margin: 0 0 4px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.test-werte { margin: 0; font-size: 12px; color: var(--text-dezent); }
.test-fehler { margin: 4px 0 0; font-size: 12px; color: var(--gefahr); word-break: break-word; }
.test-hinweis { margin: 4px 0 0; font-size: 11px; }
.test-marke { padding: 2px 8px; border-radius: 10px; font-size: 11px; white-space: nowrap; }
.test-marke-gut { background: #e2f4e8; color: var(--gruen-dunkel); }
.test-marke-schlecht { background: #fbe3e3; color: var(--gefahr); }
.test-marke-offen { background: #fff4d6; color: #7a5c00; }

/* Protokoll der KI-Aufrufe */
.tabelle-scroll { overflow-x: auto; }
.tabelle-scroll .tabelle { font-size: 12px; }
.nowrap { white-space: nowrap; }
.protokoll-meldung { font-size: 11px; color: var(--text-dezent); max-width: 340px; word-break: break-word; }

/* Herkunft der Maßnahmen-Vorschlaege */
.vorschlag-herkunft { margin: 4px 0 6px; font-size: 12px; color: var(--text-dezent); }
.herkunft { padding: 1px 7px; border-radius: 10px; font-size: 11px; white-space: nowrap; margin-right: 4px; }
.herkunft-regel { background: var(--flaeche); color: var(--text-dezent); border: 1px solid var(--linie); }
.herkunft-ki { background: #e0edff; color: #1d4f91; }
.herkunft-regel-ki { background: #e2f4e8; color: var(--gruen-dunkel); }

/* Dokumentationsseiten (Betrieb, Architektur) – Niveau der Hilfeseite */
.doc-hero { margin: 0 0 22px; }
.doc-hero h1 { font-size: 26px; margin: 0 0 4px; }
.doc-sub { color: var(--text-dezent); font-size: 14px; margin: 0; }
.doc-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 34px; align-items: start; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 14px; } }
.doc-toc { position: sticky; top: 16px; }
@media (max-width: 900px) { .doc-toc { position: static; } }
.doc-toc .toc-titel { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dezent); margin: 0 0 8px 12px; }
.doc-toc nav { display: flex; flex-direction: column; gap: 2px; }
.doc-toc a { display: block; padding: 8px 12px; color: var(--text); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 5px 5px 0; font-size: 13px; }
.doc-toc a:hover { background: #fff; border-left-color: var(--gruen); color: var(--gruen-dunkel); }
@media (max-width: 900px) { .doc-toc .toc-titel { display:none; } .doc-toc nav { flex-direction: row; flex-wrap: wrap; gap: 8px; } .doc-toc a { border:1px solid var(--linie); border-radius:999px; background:#fff; padding:6px 14px; } }
.doc-card { background:#fff; border:1px solid var(--linie); border-radius:10px; padding:22px 26px; margin:0 0 18px; scroll-margin-top:16px; }
.doc-card > h2 { font-size:18px; margin:0 0 14px; padding-bottom:11px; border-bottom:1px solid var(--linie); display:flex; align-items:baseline; gap:10px; }
.doc-card p, .doc-card li { line-height:1.6; font-size:13.5px; max-width:74ch; }
.doc-card ul { padding-left:18px; }
.doc-card code { font-family: Consolas, "Liberation Mono", Menlo, monospace; font-size:12.5px; background:var(--flaeche); border:1px solid var(--linie); border-radius:4px; padding:1px 5px; }
.doc-card pre { background:#1f2937; color:#e6edf3; border-radius:8px; padding:12px 14px; overflow-x:auto; font-size:12.5px; line-height:1.5; margin:8px 0; }
.doc-card pre code { background:none; border:none; color:inherit; padding:0; }
.doc-hinweis { border-left:4px solid var(--gruen); background:#f2fbf5; padding:10px 14px; border-radius:0 6px 6px 0; font-size:13px; margin:10px 0; }
.doc-hinweis.warn { border-left-color:#e0c060; background:#fffcf2; }

/* E3: Schritt-fuer-Schritt-Balken (empfohlener Ablauf, Termin 03.08.2026).
   Reine Orientierung mit Ankern - erzwingt nichts. */
.schritt-balken { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.schritt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px; border-radius: 999px;
  background: #fff; border: 1px solid var(--linie);
  color: var(--text); text-decoration: none; font-size: 12.5px; white-space: nowrap;
}
.schritt:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }
.schritt-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--flaeche); border: 1px solid var(--linie);
  font-size: 11px; font-weight: bold; color: var(--text-dezent);
}
.schritt.erledigt { border-color: #bfe3cb; background: #f2fbf5; color: var(--gruen-dunkel); }
.schritt.erledigt .schritt-nr { background: var(--gruen); border-color: var(--gruen); color: #fff; }
/* Sprungziel nicht unter dem Seitenrand verstecken */
#schritt-dok, #schritt-checkliste, #schritt-stammdaten, #schritt-fotos, #schritt-bilanz,
#schritt-kennzahlen, #schritt-ist, #schritt-massnahmen, #schritt-bericht { scroll-margin-top: 14px; }

/* N3: Bildbereich "Fotos der Begehung" (Vorschau-Raster mit Befund je Foto) */
.foto-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin: 12px 0;
}
.foto-kachel {
  margin: 0; background: #fff; border: 1px solid var(--linie);
  border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;
}
.foto-kachel img {
  display: block; width: 100%; height: 170px; object-fit: cover;
  background: var(--flaeche);
}
.foto-kachel figcaption { padding: 8px 10px 10px; }
.foto-name {
  display: block; font-size: 11.5px; color: var(--text-dezent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foto-befund { margin: 6px 0 8px; font-size: 12.5px; line-height: 1.45; }

/* N12: Vorlagen-Auswahl in der Kopfzeile der Uebersicht - umbricht bei langen
   Vorlagen-Namen, statt Firmenname-Feld und Knopf zu quetschen. Das Textfeld
   bekommt eine FESTE Flex-Breite: mit dem globalen width:100% (und auch mit
   flex-grow) landete der Knopf sonst immer in der zweiten Zeile, weil die
   Formbreite im zeile-kopf aus der Item-Basis berechnet wird
   (Live-Befund 03.08.2026, im Browser verifiziert). */
.neu-zeile { flex-wrap: wrap; }
.neu-zeile input[type="text"] { width: 260px; flex: 0 0 260px; }
.neu-zeile .vorlagen-wahl { width: auto; max-width: 320px; }