/*
* darkmode.css – automatischer Dark Mode
*
* Wird komplett über `prefers-color-scheme: dark` gesteuert, d.h. das Design
* stellt sich automatisch um, wenn der Browser/das Betriebssystem auf den
* dunklen Modus eingestellt ist. Es ist KEINE JavaScript-Logik nötig.
*
* Zusätzlich greift derselbe Stil, wenn am -Element die Klasse
* `force-dark` gesetzt wird – als Haken für einen späteren manuellen Umschalter.
*
* Diese Datei wird als LETZTES Stylesheet geladen, damit die Overrides
* Vorrang vor main.css / extras.css / bootstrap.min.css haben.
*/
:root {
/* zentrale Dark-Palette – an einer Stelle pflegbar */
--dm-bg: #15171a; /* Seitenhintergrund */
--dm-surface: #1e2125; /* Karten, Formulare, Sektionen */
--dm-surface-2: #24282d; /* leicht abgesetzte Flächen */
--dm-border: #33373d; /* Rahmen / Linien */
--dm-text: #c8ccd2; /* Fließtext */
--dm-heading: #f0f1f3; /* Überschriften */
--dm-muted: #9aa0a8; /* abgeschwächter Text */
--dm-link: #4ea3f0; /* Links (heller als #0080e7) */
--dm-link-hover: #7cbcf5;
}
@media (prefers-color-scheme: dark) {
/* ---------- Grundgerüst ---------- */
html,
body {
background: var(--dm-bg) !important;
color: var(--dm-text);
}
body {
color: var(--dm-text);
}
/* ---------- Typografie ---------- */
h1, h2, h3, h4, h5, h6 {
color: var(--dm-heading);
}
p, li, dd, dt, label, span, blockquote, figcaption {
color: var(--dm-text);
}
.text-muted,
small,
.small {
color: var(--dm-muted) !important;
}
/*
* .text-dark erzwingt dunklen Text und wuerde auf dunklem Grund verschwinden
* (z.B. Kontostaende). Daher hell machen – ausser auf Flaechen, die bewusst
* hell/farbig bleiben (gelbe .bg-warning-Header, helle .badge-light).
*/
.text-dark {
color: var(--dm-heading) !important;
}
.bg-warning .text-dark,
.bg-warning.text-dark,
.badge-light .text-dark,
.badge-light.text-dark {
color: #212529 !important;
}
a {
color: var(--dm-link);
}
a:hover, a:active, a:focus {
color: var(--dm-link-hover);
}
/*
* Inhalte innerhalb von Links (span/i/b...) muessen die Linkfarbe erben –
* sonst zieht die generische span-Regel oben den Text auf Grau und der Link
* wirkt nicht mehr blau (z.B. …CODE).
*/
a span,
a i,
a b,
a strong,
a small {
color: inherit;
}
hr {
border-color: var(--dm-border);
}
/* ---------- Flächen / Sektionen ---------- */
.wrapper,
#content,
.intro-section,
.features-header,
.featured-img,
.pricing-tables,
.pricing-tables .pricing-table-block,
.contact-forms,
.testimonial-two,
.subscribe-box,
.navbar-1,
.top-menu,
.navmenu-default,
.team-item figure figcaption .content-white,
.image-service-box h4 a:hover {
background: var(--dm-surface) !important;
color: var(--dm-text);
}
/* ---------- Cards ---------- */
.card {
background-color: var(--dm-surface) !important;
border-color: var(--dm-border);
}
.card-title,
.card-text {
color: var(--dm-text);
}
/* Card-Header/-Footer (auch mit Bootstrap-Utility .bg-white) */
.card-header,
.card-footer,
.card-header.bg-white {
background-color: var(--dm-surface-2) !important;
border-color: var(--dm-border);
color: var(--dm-heading);
}
/* ---------- Navbar ---------- */
.top-nav-collapse {
background: var(--dm-surface) !important;
box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.35);
}
.top-nav-collapse .navbar-nav .nav-link {
color: var(--dm-text);
}
/* extras.css setzt beim Hover background-color:#fff hinter die Nav-Links */
.navbar-expand-lg .navbar-nav .nav-link:focus,
.navbar-expand-lg .navbar-nav .nav-link:hover {
background-color: var(--dm-surface-2);
}
/*
* Das Logo wird ueber ein -Element im Layout umgeschaltet
* (logo_white.png fuer prefers-color-scheme: dark) – daher hier kein Filter.
*/
.dropdown-menu {
background-color: var(--dm-surface-2);
border: 1px solid var(--dm-border);
}
.dropdown-item {
color: var(--dm-text);
}
.dropdown-item:focus,
.dropdown-item:hover {
background: #0080e7;
color: #fff;
}
/* ---------- Formulare ---------- */
.form-control {
color: var(--dm-text);
background: var(--dm-surface-2);
border: 1px solid var(--dm-border);
}
.form-control:focus {
background: var(--dm-surface-2);
color: var(--dm-text);
border-color: var(--dm-link);
}
.form-control::placeholder {
color: var(--dm-muted);
}
.input-group-text {
background: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
/* Native + Bootstrap custom-select */
select,
select.form-control,
.custom-select {
color: var(--dm-text);
background-color: var(--dm-surface-2);
border: 1px solid var(--dm-border);
}
.custom-select {
/* Pfeil-Icon hell einfaerben. WICHTIG: width/height im SVG + komplette
background-Angaben (Position/Groesse/no-repeat wie Bootstrap), sonst
rendert das SVG ohne intrinsische Groesse riesig und gekachelt. */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23c8ccd2' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 8px 10px;
}
select option {
background-color: var(--dm-surface-2);
color: var(--dm-text);
}
/* Select2-Plugin */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.select2-search__field {
background-color: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
color: var(--dm-text) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: var(--dm-surface) !important;
border-color: var(--dm-border) !important;
}
.select2-results__option {
background-color: var(--dm-surface-2);
color: var(--dm-text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #0080e7 !important;
color: #fff !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--dm-muted) transparent transparent transparent;
}
/* Select2 – bootstrap4-Theme (theme: 'bootstrap4' wird im Code genutzt) */
.select2-container--bootstrap4 .select2-selection,
.select2-container--bootstrap4 .select2-dropdown,
.select2-container--bootstrap4 .select2-search__field {
background-color: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
color: var(--dm-text) !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
color: var(--dm-muted) !important;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
background-color: var(--dm-surface) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected="true"] {
background-color: #0080e7 !important;
color: #fff !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
border-color: var(--dm-muted) transparent transparent transparent !important;
}
/* ---------- Tabellen ---------- */
.table {
color: var(--dm-text);
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
border-color: var(--dm-border);
color: var(--dm-text);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
border-color: var(--dm-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.03);
}
.table-hover > tbody > tr:hover {
background-color: rgba(255, 255, 255, 0.06);
}
/* Tabellen-Kopf (auch .thead-light / DataTables) */
thead th,
thead td,
.table thead th,
.table thead td,
.thead-light th,
table.dataTable thead th {
background-color: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
/* ---------- DataTables-Steuerung & Pagination ---------- */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: var(--dm-text) !important;
}
.dataTables_filter input,
.dataTables_length select {
color: var(--dm-text) !important;
background-color: var(--dm-surface-2) !important;
border: 1px solid var(--dm-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: var(--dm-text) !important;
background: transparent !important;
border-color: var(--dm-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: #fff !important;
background: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #fff !important;
background: #0080e7 !important;
border-color: #0080e7 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
color: var(--dm-muted) !important;
background: transparent !important;
border-color: var(--dm-border) !important;
}
/* Bootstrap-Pagination (.page-link) – falls DataTables bootstrap4-styled rendert */
.page-link {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
.page-link:hover {
background-color: var(--dm-surface);
border-color: var(--dm-border);
color: var(--dm-link-hover);
}
.page-item.active .page-link {
background-color: #0080e7;
border-color: #0080e7;
color: #fff;
}
.page-item.disabled .page-link {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-muted);
}
/* ---------- Bootstrap-Komponenten ---------- */
.modal-content {
background-color: var(--dm-surface);
color: var(--dm-text);
border: 1px solid var(--dm-border);
}
.modal-header,
.modal-footer {
border-color: var(--dm-border);
}
.close {
color: var(--dm-text);
text-shadow: none;
}
.list-group-item {
background-color: var(--dm-surface);
border-color: var(--dm-border);
color: var(--dm-text);
}
.breadcrumb {
background-color: var(--dm-surface-2);
}
.nav-tabs {
border-color: var(--dm-border);
}
.nav-tabs .nav-link.active {
background-color: var(--dm-surface);
border-color: var(--dm-border) var(--dm-border) var(--dm-surface);
color: var(--dm-heading);
}
/* ---------- Buttons (neutrale Varianten) ---------- */
.btn-light,
.btn-default,
.btn-outline-secondary {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
/* ---------- Cookie-Alert ---------- */
.cookiealert {
background: var(--dm-surface-2) !important;
color: var(--dm-text);
}
/* ---------- Preloader ---------- */
#preloader {
background-color: var(--dm-bg);
}
/*
* Footer (#282828 / #copyright #1d1e20) ist bereits dunkel und passt
* ohne Änderung ins Dark-Theme – daher hier bewusst keine Overrides.
*/
}