/* 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; }
.inline-label { flex-direction: row; align-items: center; gap: 8px; }
form .knopf { margin-top: 10px; }
.inline-form .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; padding-left: 18px; }
.dok-liste a { color: var(--gruen-dunkel); }

/* 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; }

/* KI-Vorschlaege / Auslese */
.vorschlag-liste { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; }
.vorschlag-liste li { margin-bottom: 3px; }
input.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; }
.dezent { color: var(--text-dezent); font-size: 12px; }