/* ChronoDix Etappe 2 - Hauptfarben (Override)
   Ersetzt ausschliesslich Hintergrund-/Text-/Rahmenfarben der Grundflaechen.
   Keine Aenderung an Layout, Abstand, Radius, Schatten, Icons, Buttons, Tabellen oder Formularen. */

/* Body */
body {
	background-color: #F7F6F2;
	color: #2A2E2B;
}

/* Content (Panels/Karten) */
.panel {
	background-color: #FFFFFF;
}
.panel-default {
	border-color: #DDD8CF;
}

/* Secondary Text */
.text-muted {
	color: #6E756F;
}

/* Sidebar */
.sidebar {
	background-color: #36443D;
}

/* Sidebar Hover */
.sidebar .nav > li > a:focus,
.sidebar .nav > li > a:hover {
	background-color: #3C4A42;
}

/* Aktiver Menuepunkt */
.sidebar .nav-pills > li.active > a,
.sidebar .nav-pills > li.active > a:focus,
.sidebar .nav-pills > li.active > a:hover {
	background-color: #3C4A42;
}

/* Header */
#banner {
	background-color: #36443D;
}
#banner h1 {
	color: #FFFFFF;
}
#banner .col-xs-2 {
	border-right-color: #DDD8CF;
}

/* Tab-Hintergrund (nur die Tab-Leiste, nicht die einzelnen Reiter) */
.nav-tabs {
	background-color: #36443D;
}
.ui-tabs .ui-widget-header {
	background-color: #36443D;
}

/* ======================================================================
   ETAPPE 3 - Bootstrap 3.3 Standardfarben (Override)
   Ueberschreibt ausschliesslich Farbwerte (color / background-color /
   border-color) der Bootstrap-Standardkomponenten mit der neuen CI.
   Bootstrap-Dateien selbst werden nicht veraendert.
   Keine Gradients, Box-Shadows, Radius-, Abstands- oder Layoutaenderungen.
   ====================================================================== */

/* Buttons
   background-image: none unterdrueckt den Farbverlauf aus bootstrap-theme.css,
   damit die neue CI-Flaechenfarbe sichtbar wird (kein neuer Gradient). */
.btn-default {
	color: #333333;
	background-color: #F7F6F2;
	background-image: none;
	border-color: #DEDDDA;
}
.btn-default:focus,
.btn-default.focus,
.btn-default:hover {
	color: #333333;
	background-color: #DEDDDA;
	border-color: #C6C5C2;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
	color: #333333;
	background-color: #D2D1CE;
	border-color: #B9B9B6;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default {
	background-color: #F7F6F2;
	border-color: #DEDDDA;
}

.btn-primary {
	color: #FFFFFF;
	background-color: #6F8C6A;
	background-image: none;
	border-color: #647E5F;
}
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover {
	color: #FFFFFF;
	background-color: #647E5F;
	border-color: #597055;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	color: #FFFFFF;
	background-color: #5E775A;
	border-color: #536950;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary {
	background-color: #6F8C6A;
	border-color: #647E5F;
}

.btn-success {
	color: #FFFFFF;
	background-color: #4F7A55;
	background-image: none;
	border-color: #476E4D;
}
.btn-success:focus,
.btn-success.focus,
.btn-success:hover {
	color: #FFFFFF;
	background-color: #476E4D;
	border-color: #3F6244;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
	color: #FFFFFF;
	background-color: #436848;
	border-color: #3B5C40;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success {
	background-color: #4F7A55;
	border-color: #476E4D;
}

.btn-info {
	color: #FFFFFF;
	background-color: #7A8E87;
	background-image: none;
	border-color: #6E807A;
}
.btn-info:focus,
.btn-info.focus,
.btn-info:hover {
	color: #FFFFFF;
	background-color: #6E807A;
	border-color: #62726C;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
	color: #FFFFFF;
	background-color: #687973;
	border-color: #5C6B65;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info {
	background-color: #7A8E87;
	border-color: #6E807A;
}

.btn-warning {
	color: #FFFFFF;
	background-color: #B88C4A;
	background-image: none;
	border-color: #A67E43;
}
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:hover {
	color: #FFFFFF;
	background-color: #A67E43;
	border-color: #93703B;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
	color: #FFFFFF;
	background-color: #9C773F;
	border-color: #8A6938;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning {
	background-color: #B88C4A;
	border-color: #A67E43;
}

.btn-danger {
	color: #FFFFFF;
	background-color: #B5524A;
	background-image: none;
	border-color: #A34A43;
}
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:hover {
	color: #FFFFFF;
	background-color: #A34A43;
	border-color: #91423B;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
	color: #FFFFFF;
	background-color: #9A463F;
	border-color: #883E38;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger {
	background-color: #B5524A;
	border-color: #A34A43;
}

/* Textfarben */
.text-default {
	color: #F7F6F2;
}
.text-primary {
	color: #6F8C6A;
}
.text-success {
	color: #4F7A55;
}
.text-info {
	color: #7A8E87;
}
.text-warning {
	color: #B88C4A;
}
.text-danger {
	color: #B5524A;
}
.text-muted {
	color: #6E756F;
}

/* Hintergrundfarben */
.bg-primary {
	color: #FFFFFF;
	background-color: #6F8C6A;
}
.bg-success {
	background-color: #E6ECE7;
}
.bg-info {
	background-color: #ECEFEE;
}
.bg-warning {
	background-color: #F5EFE6;
}
.bg-danger {
	background-color: #F5E7E6;
}

/* Panels */
.panel-primary {
	border-color: #6F8C6A;
}
.panel-primary > .panel-heading {
	color: #FFFFFF;
	background-color: #6F8C6A;
	background-image: none;
	border-color: #6F8C6A;
}
.panel-success {
	border-color: #CAD7CC;
}
.panel-success > .panel-heading {
	color: #3B5C40;
	background-color: #E6ECE7;
	background-image: none;
	border-color: #CAD7CC;
}
.panel-info {
	border-color: #D7DDDB;
}
.panel-info > .panel-heading {
	color: #5C6B65;
	background-color: #ECEFEE;
	background-image: none;
	border-color: #D7DDDB;
}
.panel-warning {
	border-color: #EADDC9;
}
.panel-warning > .panel-heading {
	color: #8A6938;
	background-color: #F5EFE6;
	background-image: none;
	border-color: #EADDC9;
}
.panel-danger {
	border-color: #E9CBC9;
}
.panel-danger > .panel-heading {
	color: #883E38;
	background-color: #F5E7E6;
	background-image: none;
	border-color: #E9CBC9;
}

/* Labels */
.label-primary {
	background-color: #6F8C6A;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
	background-color: #597055;
}
.label-success {
	background-color: #4F7A55;
}
.label-success[href]:hover,
.label-success[href]:focus {
	background-color: #3F6244;
}
.label-info {
	background-color: #7A8E87;
}
.label-info[href]:hover,
.label-info[href]:focus {
	background-color: #62726C;
}
.label-warning {
	background-color: #B88C4A;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
	background-color: #93703B;
}
.label-danger {
	background-color: #B5524A;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
	background-color: #91423B;
}

/* Progress Bars */
.progress-bar {
	background-color: #6F8C6A;
	background-image: none;
}
.progress-bar-success {
	background-color: #4F7A55;
	background-image: none;
}
.progress-bar-info {
	background-color: #7A8E87;
	background-image: none;
}
.progress-bar-warning {
	background-color: #B88C4A;
	background-image: none;
}
.progress-bar-danger {
	background-color: #B5524A;
	background-image: none;
}

/* Alerts (.alert-primary existiert in Bootstrap 3.3 nicht - siehe Abschlussbericht) */
.alert-success {
	color: #3B5C40;
	background-color: #E6ECE7;
	background-image: none;
	border-color: #CAD7CC;
}
.alert-info {
	color: #5C6B65;
	background-color: #ECEFEE;
	background-image: none;
	border-color: #D7DDDB;
}
.alert-warning {
	color: #8A6938;
	background-color: #F5EFE6;
	background-image: none;
	border-color: #EADDC9;
}
.alert-danger {
	color: #883E38;
	background-color: #F5E7E6;
	background-image: none;
	border-color: #E9CBC9;
}

/* ======================================================================
   ETAPPE 4 - DataTables, Pagination, .well, Selectpicker Active-State
   Ueberschreibt ausschliesslich Farbwerte der genannten Komponenten mit
   der bestehenden ChronoDix-CI. Keine DataTables-, bootstrap-select- oder
   Bootstrap-Dateien wurden veraendert. Keine Abstands-, Radius- oder
   Schatten-Aenderungen.
   ====================================================================== */

/* 1. DataTables - Tabellenkopf
   Live nutzt die Bootstrap-3-Integration (dataTables.bootstrap.min.css /
   dataTables.bootstrap.min.js), die dem <table> zur Laufzeit die Klasse
   "dataTable" zusaetzlich zu "table" hinzufuegt. css/style.css setzt fuer
   ALLE "table.table thead(-th)" bereits alte Farben (bg #f0f3f7,
   Text #1e2341); ".dataTable"-Selektoren sind gleich spezifisch, gewinnen
   aber durch die spaetere Ladeposition dieser Datei und wirken damit nur
   auf DataTables-Kopfzeilen, nicht auf sonstige Bootstrap-Tabellen. */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable.table-bordered thead th,
.dataTables_wrapper table.dataTable thead th {
	background-color: #EEEAE2;
	color: #2A2E2B;
	border-color: #DDD8CF;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
	color: #7A8E87;
}
table.dataTable thead .sorting:hover,
table.dataTable thead .sorting_asc:hover,
table.dataTable thead .sorting_desc:hover,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	background-color: #E4DED3;
}

/* 2. Pagination (Bootstrap .pagination, von der DataTables-Bootstrap-
   Integration fuer die Seitennavigation wiederverwendet: <ul class=
   "pagination"><li class="paginate_button ..."><a>). bootstrap-theme.css
   setzt fuer .pagination keinen Farbverlauf, daher ist hier kein
   background-image:none noetig (geprueft, siehe Abschlussbericht). */
.pagination > li > a,
.pagination > li > span {
	background-color: #FFFFFF;
	color: #2A2E2B;
	border-color: #DDD8CF;
}
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
	background-color: #EEEAE2;
	color: #2A2E2B;
	border-color: #CFC8BC;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	background-color: #6F8C6A;
	color: #FFFFFF;
	border-color: #6F8C6A;
}
.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover,
.pagination > .disabled > span:hover,
.pagination > .disabled > a:focus,
.pagination > .disabled > span:focus {
	background-color: #F7F6F2;
	color: #A0A39D;
	border-color: #DDD8CF;
}
/* DataTables-eigene Klassen (redundant zu .pagination oben, da diese
   Integration "active"/"disabled" statt "current" verwendet - siehe
   Abschlussbericht - hier zur Absicherung dennoch gesetzt). */
.dataTables_wrapper .dataTables_paginate .paginate_button {
	background-color: #FFFFFF;
	color: #2A2E2B;
	border-color: #DDD8CF;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background-color: #EEEAE2;
	color: #2A2E2B;
	border-color: #CFC8BC;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background-color: #6F8C6A;
	color: #FFFFFF;
	border-color: #6F8C6A;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	background-color: #F7F6F2;
	color: #A0A39D;
	border-color: #DDD8CF;
}

/* 3. Bootstrap .well
   style.css setzt bereits einen eigenen (flachen) Verlauf auf .well;
   bootstrap-theme.css legt zusaetzlich einen Verlauf nach; beide werden
   hier per background-image:none neutralisiert, damit die neue Flaechen-
   farbe sichtbar wird. Padding/Margin/Radius/Shadow bleiben unveraendert. */
.well,
.well-sm,
.well-lg {
	background-color: #F3F0EA;
	background-image: none;
	border-color: #DDD8CF;
	color: #2A2E2B;
}

/* 4. Selectpicker / Bootstrap-Select Active-State
   bootstrap-select selbst definiert fuer .dropdown-menu li a keine
   eigenen Farben - die Zustaende kommen 1:1 von Bootstraps generischem
   .dropdown-menu (bootstrap.css) und werden zusaetzlich von
   bootstrap-theme.css mit einem Farbverlauf versehen (deshalb dort noch
   Bootstrap-Blau #337ab7 sichtbar). "active" wird von bootstrap-select
   sowohl beim Tastatur-Highlight als auch zusammen mit "selected" beim
   Oeffnen des Dropdowns gesetzt (js/bootstrap-select.js) - beide Faelle
   zaehlen laut Vorgabe zum Zustand "Selected / Active". */
.bootstrap-select .dropdown-menu > li > a {
	background-color: #FFFFFF;
	color: #2A2E2B;
}
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li > a:focus {
	background-color: #EEEAE2;
	background-image: none;
	color: #2A2E2B;
}
.bootstrap-select .dropdown-menu > .active > a,
.bootstrap-select .dropdown-menu > .active > a:hover,
.bootstrap-select .dropdown-menu > .active > a:focus,
.bootstrap-select .dropdown-menu li.selected > a,
.bootstrap-select .dropdown-menu li.selected > a:focus,
.bootstrap-select .dropdown-menu li.selected.active > a,
.bootstrap-select .dropdown-menu li.selected.active > a:focus {
	background-color: #6F8C6A;
	background-image: none;
	color: #FFFFFF;
}
/* Nur echtes Maus-Hover auf einen bereits ausgewaehlten Eintrag wird
   dunkler eingefaerbt. bootstrap-select setzt beim Oeffnen des Dropdowns
   per JS zusaetzlich :focus auf den ausgewaehlten Eintrag (a11y) - :focus
   bleibt daher bewusst im Basiszustand oben und wird hier nicht erneut
   gelistet, sonst waere der Grundzustand "Selected/Active" nie sichtbar. */
.bootstrap-select .dropdown-menu li.selected > a:hover,
.bootstrap-select .dropdown-menu li.selected.active > a:hover {
	background-color: #5F7D5B;
	background-image: none;
	color: #FFFFFF;
}
/* span.text erbt die Farbe von <a> (bootstrap-select.css setzt dort
   keine eigene color) - kein zusaetzlicher Selektor noetig, geprueft. */

/* ======================================================================
   ETAPPE 5 - Tabellenkoepfe vereinheitlichen
   Bringt alle normalen HTML-/Bootstrap-Tabellenkoepfe auf dieselbe Optik
   wie die DataTables-Koepfe aus Etappe 4 (gleiche Farbwerte). "table
   thead th" faengt zusaetzlich projektspezifische Tabellenklassen ohne
   ".table" ab. Es werden ausschliesslich color/background-color/
   border-color gesetzt - Padding, Hoehe, vertical-align, Sortierlogik,
   Sticky Header und Tabellenkoerper (tbody/tfoot) bleiben unangetastet.
   ====================================================================== */
.table > thead > tr > th,
.table-bordered > thead > tr > th,
.table-striped > thead > tr > th,
.table-hover > thead > tr > th,
.table-condensed > thead > tr > th,
table thead th {
	background-color: #EEEAE2;
	color: #2A2E2B;
	border-color: #DDD8CF;
}
/* Container selbst zusaetzlich gesetzt (ueberschreibt die alte
   table.table thead { background-color:#f0f3f7 } aus css/style.css),
   auch wenn dies durch die th-Regel oben bereits optisch abgedeckt ist. */
table.table thead,
table thead {
	background-color: #EEEAE2;
	color: #2A2E2B;
}

/* ======================================================================
   ETAPPE 6 - Projektspezifische Tabellenfarben
   Ersetzt ausschliesslich die Flaechenfarben der bestehenden, projektweiten
   Status-/Gruppierungsklassen (css/style.css:467-472). Die bestehenden
   !important-Regeln bleiben erhalten. Fachliche Bedeutung, Struktur,
   Rahmen, Prozent-Badges, Padding und Schriftgroessen bleiben unveraendert.
   ====================================================================== */
.yellow {
	background-color: #F6F1E4 !important;
	background-image: none;
}
.red {
	background-color: #F3E5E2 !important;
	background-image: none;
}
.blue {
	background-color: #EEF1EC !important;
	background-image: none;
}
.gray {
	background-color: #E7ECE7 !important;
	background-image: none;
}
.black {
	background-color: #2A2E2B !important;
	color: #FFFFFF !important;
	background-image: none;
}
.green {
	background-color: #E3EDE1 !important;
	background-image: none;
}

/* ======================================================================
   GOLD-/BRONZEFARBEN -> PRIMARY
   Alle im Projekt gefundenen Gold-/Bronzewerte (#af8428, #b99b5a,
   #d2ae60 - alle ausschliesslich in css/style.css) werden hier per
   Override auf die bestehende Primary-Farbe #6F8C6A umgestellt. Fuer den
   Verlauf in .stNavNextArrow/.stNavPrevArrow wurde bewusst die flache
   Variante (background-image:none + background-color) gewaehlt, weil
   diese Datei durchgaengig ohne Farbverlaeufe arbeitet (siehe Etappe 3/4:
   dort wurden bestehende Bootstrap-Verlaeufe konsequent entfernt statt
   umgefaerbt) - das haelt den neuen Button/Nav-Look konsistent flach.
   Siehe Abschlussbericht fuer die vollstaendige Fundstellenliste.
   ====================================================================== */

/* css/style.css:535 - Sidebar-Icon Hover-Stroke */
#togglemenu .icon:hover {
	stroke: #6F8C6A;
}

/* css/style.css:878-883 - btn-default aktiv/fokussiert/hover (Gold-Pressed-State) */
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default.active,
.btn-default:active {
	background-color: #6F8C6A;
	border-color: #6F8C6A;
	color: #FFFFFF;
	text-shadow: 0 1px 0 #6F8C6A;
}

/* css/style.css:931-932 - jQuery UI Slider (Rahmen + Handle-Flaeche) */
.ui-slider .ui-slider-range {
	border-color: #6F8C6A;
}
.ui-slider .ui-slider-handle {
	border-color: #6F8C6A;
	background: #6F8C6A;
}

/* css/style.css:1018 - Scroll-Tabs Pfeil-Buttons (vormals Gold-Verlauf) */
.ui-scroll-tabs-header .stNavNextArrow,
.ui-scroll-tabs-header .stNavPrevArrow {
	background-image: none;
	background-color: #6F8C6A;
}

/* ======================================================================
   ETAPPE 6 - Linkfarben
   Ueberschreibt ausschliesslich die globalen Linkfarben. text-decoration
   wird bewusst nicht angefasst: Bootstrap setzt bereits "none" im
   Normalzustand und "underline" bei :hover/:focus (bootstrap.css:1099-
   1107) - das entspricht exakt der Vorgabe, hier werden nur Farben
   ersetzt.
   ====================================================================== */
a {
	color: #5F7D5B;
}
a:hover {
	color: #3F5F43;
}
a:focus {
	color: #3F5F43;
}
a:visited {
	color: #6A746B;
}
a:active {
	color: #B88C4A;
}

/* Sidebar/Header-Links bewusst ausgenommen: ".sidebar a"/".sidebartop a"
   (css/style.css:37-44) setzen im Ruhezustand zwar eigene Farbe (#fff),
   deren :hover/:focus/:visited/:active-Gegenstuecke wurden jedoch bereits
   vorher aus style.css entfernt (siehe git-Historie) - ohne diese Regel
   haette "a:hover"/"a:active" oben (gleiche Spezifitaet, spaeter geladen)
   die Sidebar-Links bei Hover auf dunkelgruen vor dunklem Sidebar-
   Hintergrund umgefaerbt und damit praktisch unlesbar gemacht. Diese
   Regel stellt nur den bisherigen, unveraenderten Look wieder her. */
.sidebar a,
.sidebar a:hover,
.sidebar a:focus,
.sidebar a:visited,
.sidebar a:active,
.sidebartop a,
.sidebartop a:hover,
.sidebartop a:focus,
.sidebartop a:visited,
.sidebartop a:active {
	color: #FFFFFF;
}

/* .nav-tabs > li > a betrifft nur die NICHT-aktiven Reiter: die Tab-Leiste
   selbst ist dunkel (Etappe 2, #36443D), waehrend Bootstrap fuer den
   aktiven Reiter (".nav-tabs > li.active > a") bereits eine eigene,
   spezifischere Regel mit weissem Hintergrund + Grau-Text (#555) mitbringt
   (bootstrap.css:4082-4090) - die bleibt unangetastet und gewinnt weiterhin
   automatisch gegen die Regel hier. Ohne diese Ausnahme waere der neue
   Standard-Link-Ton (#5F7D5B, Kontrast nur 2.2:1) auf dem dunklen Balken
   kaum lesbar gewesen. */
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:visited,
.nav-tabs > li > a:active {
	color: #FFFFFF;
}

/* ======================================================================
   ETAPPE 7 - Prozent-Badges (.badge.percent)
   Analyse vor der Umsetzung (siehe Abschlussbericht): ".badge.percent"
   hat projektweit keine fachlichen Unterzustaende - die Klasse tritt in
   allen ~100 Fundstellen ausschliesslich als "badge percent" bzw.
   "badge percent pull-right" auf, nie in Kombination mit einer der
   bestehenden generischen Zustandsklassen .badge-danger/-warning/
   -success/-info/-inverse (style.css) oder einer eigenen Modifier-Klasse.
   Es gibt daher nur EINE Farbvariante, keine Unterscheidung nach
   positiv/negativ o.ae. Bootstraps .badge hat von Haus aus keinen Rahmen
   (border: none) - fuer die geforderte Border-Farbe wird hier ein
   1px-Rahmen ergaenzt (konsistent mit allen anderen CI-Komponenten in
   dieser Datei, die durchgehend 1px-Rahmen verwenden, z.B. Pagination/
   Panel/Well/Alert). Groesse, Position, Rechenlogik und HTML unveraendert.
   ====================================================================== */
.badge.percent {
	background-color: #E5EEE2;
	color: #4F7A55;
	border: 1px solid #C8D7C4;
}

/* ======================================================================
   ETAPPE 8 - Dunkles Navy (#1e2341) vollstaendig ersetzen
   Nur Hintergrund-/Rahmen-Fundstellen, die eindeutig die alte Header-/
   Chrome-Farbe darstellen, werden hier ersetzt. Textfarben, reine
   Akzent-Rahmen, Icons/SVG und Chart-Datenserienfarben wurden geprueft
   und bewusst NICHT geaendert - siehe Abschlussbericht fuer die
   vollstaendige Fundstellenliste inkl. Begruendung je Fall. Diese Datei
   deckt nur css/style.css ab; die vielen inline <style>-Bloecke in
   views/*.tpl wurden direkt editiert, da sie im Body nach dieser Datei
   im DOM stehen und ein Override hier bei gleicher Spezifitaet nicht
   zuverlaessig gewinnen wuerde.
   ====================================================================== */
.ui-widget-header {
	border-color: #36443D;
}
.ui-dialog .ui-widget-header {
	background: #36443D;
}
.ui-dialog .ui-dialog-titlebar-close {
	background: #36443D;
}
.ui-dialog {
	border-color: #36443D !important;
}
#banner .col-xs-2 {
	border-right-color: #36443D;
}
#sidebarleft .sidebartop {
	background-color: #36443D !important;
}
.cell_fixed {
	background-color: #36443D;
}
.ui-tabs .ui-widget-header {
	background: #36443D;
}

/* ======================================================================
   ETAPPE 9 - Bootstrap-Modal-Farben
   css/style.css:838-843 setzt fuer .modal-content bereits eine eigene
   (alte) Hintergrundfarbe #f0f3f7 - border-radius:0px dort bleibt
   unangetastet, nur die Farbwerte werden unten ueberschrieben. Weder
   bootstrap.css noch bootstrap-theme.css setzen einen Farbverlauf auf
   .modal-content/-header/-body/-footer (geprueft, kein Treffer) - die
   drei background-image:none-Regeln unten sind daher vorsorglich, falls
   in Zukunft ein Verlauf ergaenzt wird, und stellen sicher, dass ein
   versehentlich verbliebener Verlauf nicht durchschlaegt. Groesse,
   Position, Padding, Margin, Radius, Schatten, Typografie, Buttons und
   Formulare bleiben unveraendert.
   ====================================================================== */
.modal-content {
	background-color: #FFFFFF;
	border-color: #DDD8CF;
	background-image: none;
}
.modal-header {
	background-color: #EEEAE2;
	color: #2A2E2B;
	border-bottom-color: #DDD8CF;
	background-image: none;
}
.modal-body {
	background-color: #FFFFFF;
	color: #2A2E2B;
}
.modal-footer {
	background-color: #F7F6F2;
	border-top-color: #DDD8CF;
	background-image: none;
}
.modal-header .close {
	color: #6E756F;
	opacity: 0.7;
}
.modal-header .close:hover,
.modal-header .close:focus {
	color: #2A2E2B;
	opacity: 1;
}

/* ======================================================================
   ETAPPE 10 - jQuery-UI Datepicker
   css/style.css setzt fuer den Datepicker mehrere alte Werte, teils mit
   !important:
     - .ui-datepicker-header (Zeile ~139): altes Grau #e9e9e9/#333333
     - .ui-datepicker.ui-widget.ui-widget-content (Zeile ~706): border
       !important
     - .ui-state-default (Zeile ~179): Verlauf background-image + color
       !important - betrifft auch die Tage-Zellen
     - .ui-datepicker .ui-state-active (Zeile ~185): das alte Dunkelblau
       #1e2341 des ausgewaehlten Tages
   Alle unten per Override entfernt/ersetzt; wo style.css !important nutzt,
   wird hier ebenfalls !important mit mindestens gleicher Selektor-
   Spezifitaet gesetzt. Groesse, Zellabstaende, Typografie, Icons, JS-
   Verhalten und Datepicker-Logik bleiben unangetastet - es werden nur
   color/background(-color)/border(-color) gesetzt.
   ====================================================================== */
.ui-datepicker.ui-widget.ui-widget-content {
	background-color: #FFFFFF;
	border-color: #DDD8CF !important;
}
.ui-datepicker .ui-datepicker-header {
	background: #36443D;
	color: #FFFFFF;
	border-color: #36443D;
	background-image: none;
}
.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	color: #FFFFFF;
}
.ui-datepicker-calendar thead th {
	background-color: #EEEAE2;
	color: #2A2E2B;
	border-color: #DDD8CF;
}
.ui-datepicker td a,
.ui-datepicker td span,
.ui-datepicker .ui-state-default {
	background-color: #F7F6F2;
	color: #2A2E2B !important;
	background-image: none;
}
.ui-datepicker .ui-state-hover {
	background-color: #E5EEE2;
	color: #3F5F43 !important;
	background-image: none;
}
.ui-datepicker .ui-state-active {
	background-color: #6F8C6A !important;
	color: #FFFFFF !important;
	background-image: none;
}
.ui-datepicker .ui-datepicker-today a,
.ui-datepicker .ui-datepicker-today span {
	background-color: #F6F1E4;
	color: #2A2E2B !important;
	border-color: #B88C4A;
	background-image: none;
}
/* Sonderfall: heutiger Tag ist zugleich der ausgewaehlte Tag (beide
   Klassen kombiniert auf demselben <a>). Ohne diese Regel wuerde der
   hoeher spezifische Today-Selektor oben die Textfarbe gewinnen (dunkler
   Text auf gruenem Grund, kaum lesbar) - hier wird die Auswahl-Farbe
   bewusst vollstaendig priorisiert. */
.ui-datepicker .ui-datepicker-today a.ui-state-active,
.ui-datepicker .ui-datepicker-today span.ui-state-active {
	background-color: #6F8C6A !important;
	color: #FFFFFF !important;
	border-color: #6F8C6A;
}
/* Farbe muss auf a/span selbst gesetzt werden, nicht nur auf die
   umschliessende <td class="ui-datepicker-other-month">: die Tageszahl
   traegt zusaetzlich .ui-state-default mit eigener (!important) Textfarbe,
   die reine Vererbung vom Elternelement ueberschreiben wuerde. */
.ui-datepicker .ui-datepicker-other-month a,
.ui-datepicker .ui-datepicker-other-month span {
	color: #A0A39D !important;
}
.ui-datepicker .ui-state-disabled {
	background-color: #F7F6F2;
	color: #2A2E2B;
	background-image: none;
}

/* ======================================================================
   ETAPPE 11 - Tabellenfuss (tfoot)
   Weder bootstrap.css noch die tatsaechlich geladene
   dataTables.bootstrap.min.css setzen eine Hintergrund-/Textfarbe fuer
   tfoot (nur ein 1px-Rahmen bzw. gar nichts) - hier daher reine
   Neugestaltung, keine Verlaufs-Neutralisierung noetig (background-image:
   none trotzdem vorsorglich gesetzt).
   Ca. 40 Budget-/Forecast-Templates haben aus Etappe 8 eigene,
   klassenspezifische Sticky-Footer-Regeln (z.B. ".budgetinputtablex tfoot
   th{background-color:#36443D}"). Deren Spezifitaet (1 Klasse + 2 Typen)
   ist NIEDRIGER als ".table > tfoot > tr > th" unten (1 Klasse + 3 Typen),
   das gewinnt daher bereits regulaer (getestet). Zwei Ausnahmen
   (forecastinputstafflistingmonthtransfercheck.tpl,
   planninginputstafflistingmonthtransfercheck.tpl) setzen dort zusaetzlich
   !important - dafuer steht unten ebenfalls !important, mit gleicher
   Spezifitaet + spaeterer Ladeposition ausreichend zum Gewinnen. Dadurch
   ist eine Aenderung an den Template-Dateien selbst nicht noetig.
   ====================================================================== */
tfoot,
tfoot tr,
tfoot td,
tfoot th,
.table tfoot,
.table-bordered tfoot,
.dataTable tfoot,
table.dataTable tfoot th,
table.dataTable tfoot td,
.table > tfoot > tr > th,
.table > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
	background-color: #EEEAE2 !important;
	color: #2A2E2B !important;
	border-color: #DDD8CF;
	background-image: none;
}

/* ======================================================================
   ETAPPE 13 - DataTables FixedColumns, linke Spalte
   Projekt nutzt ausschliesslich FixedColumns 4.3.0 (moderne API, Klasse
   ".dtfc-fixed-left" direkt auf th/td) - geprueft in 12 Templates
   (u.a. views/segments/index.tpl, views/users/rights.tpl). Die aeltere
   API (.DTFC_LeftWrapper etc., separate geklonte Tabelle) kommt im
   gesamten Projekt nicht vor, dafuer wurden daher bewusst keine Regeln
   ergaenzt (kein Element vorhanden, keine Wirkung).
   css/fixedColumns.bootstrap.min.css setzt fuer .dtfc-fixed-left bereits
   "background-color:white" mit der Spezifitaet "table.dataTable tbody
   tr > .dtfc-fixed-left" (2 Klassen + 3 Typen) - die Regeln unten nutzen
   dieselbe Spezifitaet und gewinnen durch spaetere Ladeposition.
   WICHTIG zu den fachlichen Statusfarben (.yellow/.red/.green/.gray/
   .blue/.black, Etappe 6): jene Regeln nutzen "!important". Die Regeln
   hier setzen bewusst KEIN !important auf background-color - dadurch
   gewinnt eine vorhandene Statusfarbe automatisch und unabhaengig von
   der Selektor-Reihenfolge, auch in der Kombination
   "td.dtfc-fixed-left.yellow" und auch im Hover-Zustand. Getestet, siehe
   Abschlussbericht.
   ====================================================================== */
table.dataTable thead th.dtfc-fixed-left,
table.dataTable thead td.dtfc-fixed-left {
	background-color: #EEEAE2;
	color: #2A2E2B;
	background-image: none;
}
table.dataTable tbody td.dtfc-fixed-left,
table.dataTable tbody th.dtfc-fixed-left {
	background-color: #F3F0EA;
	color: #2A2E2B;
	border-color: #DDD8CF;
	background-image: none;
}
table.dataTable tfoot td.dtfc-fixed-left,
table.dataTable tfoot th.dtfc-fixed-left {
	background-color: #EEEAE2;
	color: #2A2E2B;
	background-image: none;
}
table.dataTable.table-hover tbody tr:hover > td.dtfc-fixed-left,
table.dataTable.table-hover tbody tr:hover > th.dtfc-fixed-left {
	background-color: #E9E5DD;
	background-image: none;
}

/* Fundstelle beim Testen: .yellow/.red/.green/.gray/.blue/.black (Etappe 6)
   werden in den echten Templates auf die <tr> gesetzt, nicht auf die
   einzelne Zelle (z.B. views/budget/personnelplanning.tpl: <tr class=
   "red headline show-tr">). Eine <td> mit eigenem opaquem Hintergrund
   (die Regeln oben) verdeckt die Zeilenfarbe dann vollstaendig, obwohl
   .yellow/.red/... !important nutzen - !important entscheidet nur
   zwischen konkurrierenden Regeln auf demselben Element, nicht zwischen
   Zeilen- und Zellhintergrund. Daher hier explizit transparent, damit die
   Zeilenfarbe durchscheint; .black bekommt zusaetzlich die weisse
   Textfarbe zurueck, sonst waere dunkler Text auf dunklem Grund kaum
   lesbar. Gilt auch im Hover-Zustand, damit die fixierte Spalte nicht als
   einzige Spalte beim Hover kurz die Statusfarbe verliert. */
table.dataTable tbody tr.yellow > td.dtfc-fixed-left,
table.dataTable tbody tr.yellow > th.dtfc-fixed-left,
table.dataTable tbody tr.red > td.dtfc-fixed-left,
table.dataTable tbody tr.red > th.dtfc-fixed-left,
table.dataTable tbody tr.green > td.dtfc-fixed-left,
table.dataTable tbody tr.green > th.dtfc-fixed-left,
table.dataTable tbody tr.gray > td.dtfc-fixed-left,
table.dataTable tbody tr.gray > th.dtfc-fixed-left,
table.dataTable tbody tr.blue > td.dtfc-fixed-left,
table.dataTable tbody tr.blue > th.dtfc-fixed-left,
table.dataTable tbody tr.black > td.dtfc-fixed-left,
table.dataTable tbody tr.black > th.dtfc-fixed-left,
table.dataTable.table-hover tbody tr.yellow:hover > td.dtfc-fixed-left,
table.dataTable.table-hover tbody tr.red:hover > td.dtfc-fixed-left,
table.dataTable.table-hover tbody tr.green:hover > td.dtfc-fixed-left,
table.dataTable.table-hover tbody tr.gray:hover > td.dtfc-fixed-left,
table.dataTable.table-hover tbody tr.blue:hover > td.dtfc-fixed-left,
table.dataTable.table-hover tbody tr.black:hover > td.dtfc-fixed-left {
	background-color: transparent;
}
table.dataTable tbody tr.black > td.dtfc-fixed-left,
table.dataTable tbody tr.black > th.dtfc-fixed-left {
	color: #FFFFFF;
}
/* Falls die Statusklasse stattdessen direkt auf der Zelle sitzt (Vorgabe-
   Beispiel "td.dtfc-fixed-left.yellow"), gilt dieselbe Prioritaet bereits
   automatisch: .yellow/.red/... setzen background-color mit !important,
   die Regeln oben tun das bewusst nicht - !important gewinnt in jedem
   Fall, unabhaengig von der Selektor-Reihenfolge. */

/* ======================================================================
   ETAPPE 14 - jQuery-UI Accordion
   Bewusst ausschliesslich accordion-scoped Selektoren (".ui-accordion
   .ui-accordion-header..."), NIE ein bloses ".ui-state-active" o.ae. -
   die generischen .ui-state-*-Klassen werden von Datepicker (Etappe 10),
   Tabs und weiteren jQuery-UI-Widgets mitbenutzt und duerfen dort nicht
   veraendert werden.
   Ausgangslage in css/style.css: ".ui-state-default" traegt dort einen
   flachen Verlauf (background-image: linear-gradient(...#f0f3f7...)) und
   "color:#333!important" - beides wird unten fuer den Accordion-Header
   neutralisiert/ueberschrieben. jQuery UI selbst (jquery-ui.css) setzt in
   dieser Version keinen Verlauf (0 Treffer fuer "gradient"); die
   background-image:none-Regeln unten sind trotzdem gesetzt (Vorgabe) und
   schuetzen zusaetzlich vor dem Verlauf aus style.css.
   Getestet: der Accordion-Header behaelt die Klasse ".ui-state-default"
   auch im Hover-/Aktiv-Zustand (jQuery UI entfernt sie nicht, sondern
   ergaenzt nur .ui-state-hover/-focus/-active). Dadurch gewann anfangs
   "color:#333!important" aus style.css gegen die Textfarben unten -
   "color" ist deshalb bewusst ebenfalls mit !important gesetzt
   (background-color bleibt ohne !important ausreichend, da hier hoehere
   Selektor-Spezifitaet + spaetere Ladeposition schon gewinnen).
   Hinweis Hover/Focus: jQuery UI schaltet bei diesem Widget den
   Hover-/Fokuszustand ueblicherweise per JS ueber die Klassen
   .ui-state-hover/.ui-state-focus (nicht per nativer :hover-Pseudoklasse -
   jquery-ui.css selbst definiert dafuer auch keine :hover-Selektoren).
   Beide Formen werden hier trotzdem abgedeckt.
   ====================================================================== */
.ui-accordion .ui-accordion-header {
	background: #EEEAE2;
	color: #2A2E2B !important;
	border-color: #DDD8CF;
	background-image: none;
}
.ui-accordion .ui-accordion-header:hover,
.ui-accordion .ui-accordion-header:focus,
.ui-accordion .ui-accordion-header.ui-state-hover,
.ui-accordion .ui-accordion-header.ui-state-focus {
	background: #E5EEE2;
	color: #3F5F43 !important;
	border-color: #C8D7C4;
	background-image: none;
}
.ui-accordion .ui-accordion-header.ui-state-active {
	background: #6F8C6A;
	color: #FFFFFF !important;
	border-color: #6F8C6A;
	background-image: none;
}
.ui-accordion .ui-accordion-content {
	background-color: #FFFFFF;
	color: #2A2E2B;
	border-color: #DDD8CF;
}

/* ======================================================================
   ETAPPE 15 - jQuery-UI Tabs modernisieren
   Wie bei Etappe 14 (Accordion): ausschliesslich tabs-scoped Selektoren
   (".ui-tabs .ui-tabs-nav li..."), nie ein blosses ".ui-state-active" o.ae.,
   damit Datepicker (Etappe 10) und Accordion (Etappe 14) unangetastet
   bleiben.
   Struktur (js/jquery-ui.js, Tabs-Widget): das <ul> bekommt die Klassen
   "ui-tabs-nav ui-widget-header", jedes <li> bekommt "ui-tabs-tab
   ui-state-default" (+ "ui-tabs-active ui-state-active" wenn aktiv);
   Hover/Fokus werden wie beim Accordion per JS ueber die Klassen
   .ui-state-hover/.ui-state-focus auf dem <li> gesteuert, nicht per
   nativer :hover-Pseudoklasse.
   Tab-Leisten-Hintergrund: #36443D gewaehlt (nicht die "ruhigere"
   Alternative #F3F0EA) - konsistent mit den bereits bestehenden dunklen
   Chrome-Flaechen fuer Bootstrap-Tab-Leisten (Etappe 2: ".nav-tabs")
   und fuer diese selbe jQuery-UI-Tabs-Leiste (Etappe 8: ".ui-tabs
   .ui-widget-header"), die ohnehin schon auf #36443D steht - eine
   hellere Leiste haette hier einen neuen Bruch zu allen anderen
   Tab-Leisten der Anwendung erzeugt.
   css/style.css setzt fuer ".ui-state-default" bereits einen flachen
   Verlauf sowie "color:#333!important" (identischer Befund wie bei
   Etappe 14) - "color" ist daher unten ebenfalls mit !important gesetzt.
   ".ui-tabs-panel" hat in jquery-ui.css eine explizite Rahmenbreite von
   0 - fuer die geforderte sichtbare Rahmenfarbe wird hier zusaetzlich
   eine Breite von 1px ergaenzt (Farbe allein haette sonst keine
   Wirkung), analog zum Vorgehen bei Modal/Badge in frueheren Etappen.
   ====================================================================== */
.ui-tabs .ui-tabs-nav {
	background: #36443D;
	border-color: #DDD8CF;
	background-image: none;
}
.ui-tabs .ui-tabs-nav li.ui-state-default {
	background: #EEEAE2;
	color: #2A2E2B !important;
	border-color: #DDD8CF;
	background-image: none;
}
.ui-tabs .ui-tabs-nav li.ui-state-hover {
	background: #E5EEE2;
	color: #3F5F43 !important;
	border-color: #C8D7C4;
	background-image: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-state-active {
	background: #FFFFFF;
	color: #2A2E2B !important;
	border-color: #DDD8CF;
	border-bottom: 3px solid #6F8C6A;
	background-image: none;
}
.ui-tabs .ui-tabs-panel {
	background-color: #FFFFFF;
	border: 1px solid #DDD8CF;
}

/* ======================================================================
   ETAPPE 16 - Scroll Tabs Layout-Fix
   Ursache gefunden: js/jquery.ui.scrolltabs.js, Methode _hideScrollBars()
   (Zeile ~220-223) setzt per JS ein inline "margin-bottom" auf
   ".ui-scroll-tabs-view" in Hoehe der ermittelten nativen Scrollbar-Breite
   (negativ), um die native horizontale Scrollbar unter dem sichtbaren
   Bereich zu "verstecken" (der umschliessende ".ui-scroll-tabs-header"
   hat dafuer bereits overflow:hidden, siehe css/style.css:988-991). Die
   Scrollbar-Breite wird in _findScrollbarWidth() (Zeile ~85-100) per
   Mess-Trick ermittelt: ein Test-Element bekommt kurzzeitig
   "::-webkit-scrollbar { width:0 }" injiziert, danach wird die Differenz
   der Innenbreite mit/ohne erzwungenem Overflow gemessen. In einer
   Sandbox mit reinen Overlay-Scrollbars (0px Layoutbreite) liefert dieser
   Mess-Trick zuverlaessig 0 - das konnte hier nachvollzogen werden
   (siehe Abschlussbericht). Beim gemeldeten Wert -17px handelt es sich um
   die aus klassischen (nicht-Overlay-)Scrollbars typische Breite unter
   Windows; dort schlaegt der Mess-Trick offenbar fehl (z.B. weil die
   dynamisch injizierte ::-webkit-scrollbar-Regel nicht rechtzeitig vor
   der synchronen Messung angewendet wird) und die volle native Breite
   wird faelschlich als Kompensation abgezogen.
   Ursache liegt damit eindeutig in der Drittanbieter-Bibliothek
   (jquery-ui-scrolltab v1.0.0, MIT-Lizenz, extern gepflegt). Eine
   Korrektur direkt in der Bibliothek wurde bewusst NICHT vorgenommen:
   jede zukuenftige Aktualisierung des Plugins wuerde die Korrektur wieder
   verwerfen, und die zugrunde liegende Zeitproblematik ist ohne den
   genauen Browser/Scrollbar-Modus des meldenden Systems nicht zuverlaessig
   nachstellbar und reparierbar. Stattdessen wie vorgegeben per Override:
   ====================================================================== */
.ui-scroll-tabs-view {
	margin-bottom: 0 !important;
}

/* ======================================================================
   ETAPPE 17 - Login-Buttons
   Bewusst auf den Loginbereich beschraenkt (Selektor "#login ..."), nicht
   global - Login/Forgot-Password/Registration teilen sich alle denselben
   Wrapper "<div id="login" class="container">" (views/login/index.tpl,
   forgot.tpl, registration.tpl). Die Farben hier weichen bewusst von den
   sitewiden Etappe-3-Button-Farben ab (dort z.B. Hover #647E5F statt
   #5F7D5B) - ohne diese Scope-Beschraenkung wuerden sich beide Regelsaetze
   ueberschneiden und je nach Ladereihenfolge/Spezifitaet uneinheitlich
   wirken.
   bootstrap-theme.css geprueft: setzt fuer .btn-primary/.btn-default
   Farbverlaeufe (bereits in Etappe 3 global neutralisiert); hier zusaetzlich
   explizit gesetzt, damit dieser Block auch unabhaengig von Etappe 3
   funktioniert.
   Groesse, Padding, Schriftgroesse, Icons, Formular, Inputfelder, Layout
   und Templates unveraendert - ausschliesslich Farben.
   ====================================================================== */
#login .btn-primary {
	background-color: #6F8C6A;
	border-color: #5F7D5B;
	color: #FFFFFF;
	background-image: none;
}
#login .btn-primary:hover,
#login .btn-primary:focus {
	background-color: #5F7D5B;
	border-color: #4F6B4C;
	color: #FFFFFF;
	background-image: none;
}
#login .btn-primary:active,
#login .btn-primary.active {
	background-color: #4F6B4C;
	border-color: #4F6B4C;
	color: #FFFFFF;
	background-image: none;
}
#login .btn-primary.disabled,
#login .btn-primary[disabled],
fieldset[disabled] #login .btn-primary {
	background-color: #AEBDAA;
	border-color: #AEBDAA;
	background-image: none;
}
#login .btn-default {
	background-color: #FFFFFF;
	border-color: #DDD8CF;
	color: #2A2E2B;
	background-image: none;
}
#login .btn-default:hover,
#login .btn-default:focus {
	background-color: #F3F0EA;
	border-color: #CFC8BC;
	color: #2A2E2B;
	background-image: none;
}

/* ======================================================================
   ETAPPE 18 - Login/Auth Hintergrundbild zentralisieren
   Jedes Login-Template (index/forgot/forgotnewpass/registration/
   msauthorize/sso_index) hat bislang denselben Hintergrund-Regelblock
   per Inline-<style> im <head> dupliziert. Hier einmalig zentralisiert,
   ueber body.login (wird bereits von includes/headerlogin.inc.php auf
   allen Auth-Seiten gesetzt). Bild/Optik unveraendert - reines Refactoring.
   ====================================================================== */
body.login {
	background: url(/css/img/bg-login2.jpg) no-repeat center center fixed;
	background-size: cover;
}

/* ======================================================================
   ETAPPE 19 - Login-Startseite als Hero (nur index.tpl)
   Ausschliesslich ueber body.chronodix-login-home aktiviert, welches nur
   views/login/index.tpl per $loginHeroPage setzt (siehe headerlogin.inc.php).
   Alle uebrigen Auth-Seiten (forgot/forgotnewpass/registration/
   msauthorize/sso_index/oldindex) bleiben dadurch unangetastet - sie
   teilen sich nur den Hintergrund aus ETAPPE 18, bekommen aber weder
   Slogan noch Animationen noch die Card-Entrance/Micro-Interactions
   weiter unten.
   ====================================================================== */

/* sehr dezenter, extrem langsamer "Data Glow" Hintergrund-Layer.
   z-index:-1 haelt ihn unabhaengig vom Stacking-Kontext garantiert
   hinter Login-Card und Hero-Text. */
body.chronodix-login-home::before {
	content: "";
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(184,140,74,0.12), transparent 60%),
		radial-gradient(circle, rgba(111,140,106,0.10), transparent 60%);
	background-repeat: no-repeat, no-repeat;
	background-size: 70% 70%, 60% 60%;
	background-position: 85% 15%, 10% 80%;
	animation: chronodixGlowDrift 28s ease-in-out infinite alternate;
}

@keyframes chronodixGlowDrift {
	0%   { background-position: 85% 15%, 10% 80%; }
	100% { background-position: 78% 22%, 16% 74%; }
}

/* Login-Card: dezentes Entrance + minimal weicherer Schatten */
body.chronodix-login-home #login .form-signin {
	box-shadow: 0 10px 30px rgba(42,46,43,0.16);
}
body.chronodix-login-home #login {
	animation: chronodixCardIn 600ms ease-out both;
}
@keyframes chronodixCardIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Micro-Interactions: nur Login-Startseite */
body.chronodix-login-home #login .form-control {
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
body.chronodix-login-home #login .form-control:focus {
	border-color: #6F8C6A;
	box-shadow: 0 0 0 3px rgba(111,140,106,0.18);
}
body.chronodix-login-home #login .btn-primary {
	transition: background-color 200ms ease, border-color 200ms ease, transform 150ms ease;
}
body.chronodix-login-home #login .btn-primary:hover,
body.chronodix-login-home #login .btn-primary:focus {
	transform: translateY(-1px);
}

/* Hero-Slogan: rechte untere Bildschirmhaelfte, ueberlagert nie die
   zentrierte Login-Card (form-signin max-width:422px, mittig). Die
   verfuegbare Restbreite je Seite betraegt (Viewport-422)/2 - die
   Breakpoints unten sind bewusst konservativ gegen die schmalste in
   jeder Stufe vorkommende Breite dimensioniert. */
.login-hero {
	position: fixed;
	right: 64px;
	bottom: 96px;
	max-width: 400px;
	text-align: right;
	pointer-events: none;
}
.login-hero__line1,
.login-hero__line2 {
	margin: 0;
	font-size: 30px;
	line-height: 1.25;
	font-weight: 500;
}
.login-hero__line1 {
	color: #36443D;
	opacity: 0;
	animation: chronodixHeroFadeUp 700ms ease-out 150ms forwards;
}
.login-hero__line2 {
	color: #B88C4A;
	font-weight: 600;
	margin-bottom: 14px;
	opacity: 0;
	animation: chronodixHeroFadeUp 700ms ease-out 350ms forwards;
}
.login-hero__divider {
	display: inline-block;
	width: 0;
	height: 2px;
	margin: 0 0 14px;
	background: #B88C4A;
	animation: chronodixHeroLine 500ms ease-out 600ms forwards;
}
.login-hero__sub {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #6E756F;
	opacity: 0;
	animation: chronodixHeroFadeIn 600ms ease-out 750ms forwards;
}
.login-hero__tags {
	margin: 10px 0 0;
	font-size: 12px;
	letter-spacing: .04em;
	color: #809373;
	opacity: 0;
	animation: chronodixHeroFadeIn 600ms ease-out 900ms forwards;
}
@keyframes chronodixHeroFadeUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes chronodixHeroLine {
	from { width: 0; }
	to   { width: 96px; }
}
@keyframes chronodixHeroFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ab hier reicht die freie Flaeche rechts der Card nicht mehr sicher
   fuer den vollen Hero (siehe Kommentar oben) - kompakter zweiter Stand */
@media (max-width: 1399px) {
	.login-hero {
		right: 40px;
		bottom: 90px;
		max-width: 300px;
	}
	.login-hero__line1,
	.login-hero__line2 {
		font-size: 22px;
	}
	.login-hero__sub {
		font-size: 13px;
	}
	.login-hero__tags {
		display: none;
	}
}

/* Tablet/Mobile: freie Breite rechts der Card reicht nicht mehr aus,
   ohne die Card zu ueberlagern (bei 768px Breite z.B. nur noch 173px
   Restbreite je Seite) - Hero wird komplett ausgeblendet, Login bleibt
   alleiniger Fokus. */
@media (max-width: 1199px) {
	.login-hero {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.chronodix-login-home::before {
		animation: none;
	}
	body.chronodix-login-home #login {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.login-hero__line1,
	.login-hero__line2,
	.login-hero__sub,
	.login-hero__tags {
		animation: none;
		opacity: 1;
	}
	.login-hero__divider {
		animation: none;
		width: 96px;
	}
}