/* FIVA im Gewand des Styleguide 2.0 fuer sachsen.de.
 *
 * Quelle: Design-System „Flurneuordnung Sachsen" (claude.ai/design,
 * 1622934a-b421-4c3e-8304-b4ad22a057cd), Erik am 02.08.2026: „nutze das
 * Design-System." Es bildet den verbindlichen Styleguide 2.0 der Saechsischen
 * Staatskanzlei ab; die Werte hier sind woertlich dessen Token-Dateien
 * entnommen (tokens/colors.css, typography.css, spacing.css, layout.css).
 *
 * Die Grundsaetze, gegen die sich jede Regel hier pruefen laesst:
 *   - EINE Portalfarbe je Auftritt: Gruen #337E33 (Flurneuordnung /
 *     Laendlicher Raum). Jede Grundfarbe existiert nur in 100/40/20/10 %.
 *   - Arial. sachsen.de laedt keinen Webfont.
 *   - Radius 0 ueberall. Keine Verlaeufe. Schatten nur fuer Overlays.
 *   - Akzentkanten 2-4 px in der Portalfarbe: OBEN an einer Box, LINKS an
 *     einer Hinweismeldung.
 *   - Hover: dunkler oder 10-%-Flaeche. Nie skalieren, nie heben.
 *   - Fokus: 2 px Umriss in der Portalfarbe, 2 px Abstand. Nie entfernen.
 *
 * Diese Datei liegt HINTER bootstrap.min.css und ueberschreibt gezielt.
 * Die MASKEN bleiben davon unberuehrt, wo sie gemessene Access-Masse tragen —
 * ihre Farben uebersetzt `seiten/masken.py` (FARBWELT) in dieselbe Palette.
 */

:root {
  /* ---- Portalfarbe: Gruen ---- */
  --portal-100: #337E33;
  --portal-40:  #ADCBAD;
  --portal-20:  #D6E5D6;
  --portal-10:  #EBF2EB;
  --portal-dark:#26611F;

  /* ---- Unbunte Festwerte ---- */
  --ds-schrift: #313131;
  --ds-zitat:   #666666;
  --ds-footer:  #F6F6F6;
  --grau-100: #6E6E6E; --grau-40: #C5C5C5; --grau-20: #E2E2E2; --grau-10: #F1F1F1;

  /* ---- Semantik (nur Hinweise und Validierung) ---- */
  --state-info: #176FC5;    --state-info-bg: #E8F1FA;
  --state-success: #00590B; --state-success-bg: #E6EEE7;
  --state-warning: #9D6100; --state-warning-bg: #F5EFE6;
  --state-error: #B0001F;   --state-error-bg: #FEF3EA;

  --font-sans: Arial, Helvetica, "Liberation Sans", sans-serif;
  --rule-accent: 4px;

  /* Bootstrap auf die Leitwerte stellen. */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--ds-schrift);
  --bs-body-bg: #FFFFFF;
  --bs-border-color: var(--grau-20);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-link-color: var(--portal-100);
  --bs-link-hover-color: var(--portal-dark);
  --bs-primary: var(--portal-100);
  --bs-primary-rgb: 51, 126, 51;
}

body { font-family: var(--font-sans); color: var(--ds-schrift); }

/* Links: Portalfarbe, beim Ueberfahren unterstrichen und dunkler. */
a { color: var(--portal-100); }
a:hover { color: var(--portal-dark); text-decoration: underline; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  color: var(--ds-schrift);
  font-weight: 700;
  line-height: 1.25;
}
h1, .h1 { font-size: 34px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 18px; }

/* Der Styleguide kennt keine rosa Codeschrift — technische Angaben stehen
 * ruhig und grau. */
code { color: var(--grau-100); }

/* ---- Fokus: sichtbar, immer. ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--portal-100) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ---- Schaltflaechen: Radius 0, zwei Staerken, Hover nur Farbe. ---- */
.btn { border-radius: 0; font-weight: 700; transition: background-color .12s ease-in-out, color .12s ease-in-out, border-color .12s ease-in-out; }
.btn:active { transform: none; }

.btn-primary, .btn-success {
  background-color: var(--portal-100);
  border-color: var(--portal-100);
  color: #fff;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.btn-success:hover, .btn-success:active, .btn-success:focus {
  background-color: var(--portal-dark);
  border-color: var(--portal-dark);
  color: #fff;
}
.btn-outline-primary, .btn-outline-secondary {
  background-color: #fff;
  border-color: var(--portal-100);
  color: var(--portal-100);
}
.btn-outline-primary:hover, .btn-outline-primary:active,
.btn-outline-secondary:hover, .btn-outline-secondary:active {
  background-color: var(--portal-10);
  border-color: var(--portal-dark);
  color: var(--portal-dark);
}
.btn-light, .btn-secondary {
  background-color: var(--grau-10);
  border-color: var(--grau-20);
  color: var(--ds-schrift);
}
.btn-light:hover, .btn-secondary:hover { background-color: var(--grau-20); color: var(--ds-schrift); }
.btn-outline-danger { border-color: var(--state-error); color: var(--state-error); border-radius: 0; }
.btn-outline-danger:hover { background-color: var(--state-error-bg); color: var(--state-error); border-color: var(--state-error); }
.btn:disabled, .btn.disabled {
  background-color: var(--grau-10);
  border-color: var(--grau-20);
  color: var(--grau-40);
}

/* ---- Formularfelder: Radius 0, kraeftiger Rand, kein Leuchten. ---- */
.form-control, .form-select {
  border-radius: 0;
  border-color: var(--grau-40);
  color: var(--ds-schrift);
}
.form-control:focus, .form-select:focus {
  border-color: var(--portal-100);
  box-shadow: none;
  outline: 2px solid var(--portal-100);
  outline-offset: 1px;
}
.form-label { font-weight: 700; color: var(--ds-schrift); }
.form-check-input { border-radius: 0; border-color: var(--grau-40); }
.form-check-input:checked { background-color: var(--portal-100); border-color: var(--portal-100); }

/* ---- Hinweismeldungen: flache Flaeche, 4-px-Kante LINKS, Radius 0. ---- */
.alert { border-radius: 0; border: 0; color: var(--ds-schrift); }
.alert-info    { background: var(--state-info-bg);    border-left: var(--rule-accent) solid var(--state-info); }
.alert-success { background: var(--state-success-bg); border-left: var(--rule-accent) solid var(--state-success); }
.alert-warning { background: var(--state-warning-bg); border-left: var(--rule-accent) solid var(--state-warning); }
.alert-danger  { background: var(--state-error-bg);   border-left: var(--rule-accent) solid var(--state-error); }
.alert-light   { background: var(--grau-10);          border-left: var(--rule-accent) solid var(--grau-40); }

/* ---- Tabellen: gruener Kopf, zarte Zebrastreifen, Radius 0. ---- */
.table { color: var(--ds-schrift); }
.table thead th {
  background-color: var(--portal-100);
  color: #fff;
  border-color: var(--portal-100);
  font-weight: 700;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--grau-10); box-shadow: none; }
.table-hover > tbody > tr:hover > * { background-color: var(--portal-10); box-shadow: none; }
.table-active, .table-active > * { background-color: var(--portal-20) !important; box-shadow: none !important; }

/* Die Tabellenliste der Masken (Listenfeld mit Spaltenkoepfen). */
.fiva-liste { border-radius: 0 !important; }
.fiva-liste thead th { position: sticky; top: 0; }
.fiva-liste tbody tr { cursor: pointer; }

/* ---- Registerreiter: Unterkante statt Kaestchen. ---- */
.nav-tabs { border-bottom: 1px solid var(--grau-20); }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: var(--rule-accent) solid transparent;
  border-radius: 0;
  color: var(--ds-schrift);
  font-weight: 400;
}
.nav-tabs .nav-link:hover { color: var(--portal-dark); border-bottom-color: var(--portal-40); }
.nav-tabs .nav-link.active {
  color: var(--portal-100);
  font-weight: 700;
  background: transparent;
  border-bottom: var(--rule-accent) solid var(--portal-100);
}

/* Reiter AUF der Kartenflaeche der MESSTREUEN Ansicht: dort ist der Grund
 * die Portalfarbe selbst — gruene Reiterschrift waere unsichtbar. Auf
 * farbigem Grund traegt der aktive Reiter Weiss mit weisser Unterkante, die
 * uebrigen das helle Portalgruen (#D6E5D6, Kontrast 4,6:1 auf #337E33).
 * Die FLIESSENDE Ansicht stellt ihre Reiter auf Weiss — dort gilt die
 * allgemeine Regel oben. */
.fiva-treu .nav-tabs { border-bottom-color: rgba(255,255,255,.4); }
.fiva-treu .nav-tabs .nav-link { color: var(--portal-20); }
.fiva-treu .nav-tabs .nav-link:hover { color: #fff; border-bottom-color: var(--portal-40); }
.fiva-treu .nav-tabs .nav-link.active { color: #fff; border-bottom-color: #fff; background: transparent; }

/* ---- Die fliessende Maskenansicht. ---- */
.fiva-fliessend {
  border: 1px solid var(--grau-20);
  border-top: var(--rule-accent) solid var(--portal-100);
  background: #fff;
}
.fiva-fliessend .fiva-band { color: #fff; }
.fiva-fliessend .fiva-band .form-label,
.fiva-fliessend .fiva-band label,
.fiva-fliessend .fiva-band .small { color: #fff; }
.fiva-fliessend .fiva-band a { color: #fff; text-decoration: underline; }
.fiva-fliessend .fiva-zeile { margin-bottom: .75rem; }
.fiva-fliessend .fiva-feld { min-width: 0; }
.fiva-fliessend .fiva-feld .form-label { margin-bottom: .25rem; color: var(--grau-100); font-weight: 400; font-size: 13px; }
.fiva-fliessend .fiva-band .fiva-feld .form-label { color: #fff; }
.fiva-fliessend textarea.form-control { min-height: 5rem; }
.fiva-fliessend .fiva-unterformular { min-height: 8rem; }

/* ---- Kopfleiste im Stil der Zentralen Navigation. ---- */
.fiva-kopf {
  background: #fff;
  border-bottom: 1px solid var(--grau-20);
}
.fiva-kopf .navbar-brand {
  color: var(--portal-100);
  font-weight: 700;
  letter-spacing: .02em;
}
.fiva-kopf .navbar-brand:hover { color: var(--portal-dark); text-decoration: none; }
.fiva-kopf .nav-link {
  color: var(--ds-schrift);
  border-bottom: var(--rule-accent) solid transparent;
  padding-top: .9rem; padding-bottom: calc(.9rem - var(--rule-accent));
}
.fiva-kopf .nav-link:hover { color: var(--portal-dark); border-bottom-color: var(--portal-40); text-decoration: none; }
.fiva-kopf .nav-link.active {
  color: var(--portal-100);
  font-weight: 700;
  border-bottom-color: var(--portal-100);
}

/* ---- Fusszeile. ---- */
.fiva-fuss {
  background: var(--ds-footer);
  border-top: 1px solid var(--grau-20);
  color: var(--grau-100);
  font-size: 14px;
}

/* ---- Flaechen: Karten ohne Schatten, 1-px-Rand, Akzent OBEN wo betont. ---- */
.card, .border.rounded, .rounded { border-radius: 0 !important; }
.bg-body-tertiary { background-color: var(--grau-10) !important; }
.fiva-werkzeuge { border: 1px solid var(--grau-20); border-top: var(--rule-accent) solid var(--portal-100); background: #fff; }

/* Kein Springen, kein Heben — Bewegung nur als Farbwechsel. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0s !important; animation-duration: 0s !important; }
}