body {
 min-height: 100vh;
 /* 2. Hintergrundfarbe (Basis), falls der Verlauf nicht lädt */
 background-color: #f8f9fa;
 /* 3. Der Verlauf (angepasst auf Hellblau/Cyan Töne) */
 background-image: /* Erster Fleck (Links oben): Helles Cyan/Blau */ radial-gradient(100% 800px at 0% 0%, rgba(77, 163, 255, 0.15), transparent 60%), /* Zweiter Fleck (Rechts oben): Klassisches Hellblau */ radial-gradient(100% 800px at 100% 0%, rgba(77, 163, 255, 0.15), transparent 55%);
 /* Optional: Fixiert den Hintergrund beim Scrollen */
 background-attachment: fixed;
}
a {
 color: #2D4F74;
 text-decoration: none;
}
a:hover {
 color: #195595;
}
/* Logo Styling */
.navbar-brand {
 font-weight: 700;
 font-size: 1.3rem;
 padding: 0.5rem 1rem;
}
/* 1. Der dunkle Hintergrund der Leiste (Fast Schwarz) */
.navbar-custom {
 background-color: #23282C;
 padding: 0 !important; /* Wichtig: Kein Padding im Container, damit die Links den Rand berühren */
}
/* 2. Styling der Links im Normalzustand */
.navbar-custom .nav-link {
 color: #e0e0e0; /* Helle Schrift */
 font-weight: 500;
 padding-top: 1rem;
 padding-bottom: 1rem;
 padding-left: 1.3rem !important;
 padding-right: 1.3rem !important;
 border-bottom: 4px solid transparent; /* Unsichtbarer Platzhalter-Rand */
 transition: all 0.2s ease-in-out;
}
/* 3. Der Effekt: Hintergrund heller + Blaue Linie unten */
.navbar-custom .nav-link:hover, .navbar-custom .nav-link.active {
 background-color: #374047; /* Helleres Grau (wie im Bild bei "Home") */
 color: #ffffff; /* Weißer Text */
 border-bottom-color: #4da3ff; /* Das helle Blau */
}
.dropdown-menu-custom {
 background-color: #23282C; /* Selbe Farbe wie Navbar */
 border-top: none; /* Oben offen, damit es am Button klebt */
 padding: 0;
 margin-top: 0 !important;
 border-radius: 0 0 4px 4px; /* Nur unten abrunden */
}
.dropdown-item-custom {
 color: #e0e0e0;
 padding: 0.5rem 0.8rem !important; /* Viel Platz, wie oben */
 border-bottom: 4px solid transparent; /* Trick: Unsichtbarer Rand */
 background-color: transparent;
 transition: all 0.2s;
}
/* Hover-Effekt für die Dropdown-Items (genau wie oben) */
.dropdown-item-custom:hover, .dropdown-item-custom:focus {
 background-color: #374047; /* Hellerer Hintergrund */
 color: #ffffff;
 border-bottom-color: #4da3ff; /* Der blaue Strich erscheint */
}
/* Der Hauptcontainer (Weißer Kasten) */
.hero-section {
 background-color: #FFF; /* Sehr helles Grau als Basis */
 border-radius: 1rem;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
 overflow: hidden;
}
/* Die kleinen Info-Karten unten */
.feature-card {
 background-color: #f8f9fa;
 border: none;
 border-radius: 12px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 height: 100%; /* Gleiche Höhe für alle */
 overflow: hidden;
}
.feature-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}
/* Box Shadow für den leichten blauen Glow */
.glow-shadow {
 box-shadow: 0 4px 15px rgba(90, 169, 230, 0.3);
}
/* Styling der Icons */
.icon-large {
 font-size: 2.5rem;
 margin-right: 1rem;
}
.text-blue {
 color: #0d6efd;
}
.text-teal {
 color: #20c997;
}
.text-orange {
 color: #fd7e14;
}
/* SSD Bild Styling */
.ssd-hero-img {
 max-width: 100%;
 height: auto;
 filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
 transform: rotate(-2deg); /* Leichte Drehung für Dynamik wie im Bild */
}
.progress-custom {
 height: 6px;
 background-color: #e9ecef;
 border-radius: 10px;
 overflow: hidden;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bar-high {
 background: linear-gradient(90deg, #198754 0%, #4ade80 100%);
}
.bar-med {
 background: linear-gradient(90deg, #d97706 0%, #fcd34d 100%);
}
.bar-low {
 background: linear-gradient(90deg, #dc3545 0%, #f87171 100%);
}
.t-green {
 background-color: #22EEB2
}
.t-lgreen {
 background-color: #84E732
}
.t-blue {
 background-color: #0AC5FA
}
/* Datatabels Anpassung Anfang */
.dt-search {
 float: left !important;
 margin-left: 0px;
 margin-bottom: 0px;
}
div.dt-container div.dt-layout-cell {
 padding: 0 !important;
}
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
 text-align: left !important;
}
/* Datatabels Anpassung Ende */
.lazyload {
 width: 75px;
 max-height: 60px;
}
.badge {
 font-size: 1.0rem;
}
.anchor {
 display: block;
 height: 60px; /*same height as header*/
 margin-top: -60px; /*same height as header*/
 visibility: hidden;
}
.boxed {
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
 /*max-width: 1800px;*/
 display: block;
 margin-left: auto;
 margin-right: auto;
 background-color: white;
}
.bg-dark {
 background-color: #479C83 !important
}
.table td, .table th {
 padding-right: 0.5rem;
}
.table-md td, .table-md th {
 padding: 0.3rem 0.5rem;
}
.dt-layout-start {
 margin-left: 1rem;
}
.dt-layout-end {
 margin-right: 1rem;
}
.fix-sticky {
 position: fixed !important;
 overflow: hidden;
 z-index: 1000;
 top: 50px !important;
 background: #ECECEC;
 background-color: #ECECEC;
}
.fix-sticky table thead {
 background: #ECECEC;
 background-color: #ECECEC;
}
@media (max-width: 575.98px) {
 .fix-sticky {
  top: 40px !important;
 }
 .badge {
  font-size: 0.6rem;
 }
 .hidden-md {
  display: none
 }
 .navbar-nav:first-child {
  margin-left: 0px;
 }
 .nav-link {
  padding: 0.6rem 1.3rem !important
 }
}
.modal-header {
 background-color: #2C5F4D;
 color: white;
}
.modal-header .btn-close {
 filter: brightness(0) invert(1);
}
.country-flag {
 width: 32px;
 height: 24px;
 margin-right: 10px;
 border-radius: 3px;
 display: inline-block;
}
.btn-redirect {
 background-color: #2C5F4D;
 border: none;
 padding: 10px 25px;
 border-radius: 25px;
 font-weight: 500;
 transition: all 0.3s ease;
}
.btn-redirect:hover {
 background-color: #5AC0A6;
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.btn-stay {
 border: 2px solid #6c757d;
 color: #6c757d;
 padding: 8px 25px;
 border-radius: 25px;
 font-weight: 500;
 transition: all 0.3s ease;
}
.btn-stay:hover {
 background-color: #6c757d;
 color: white;
}
.modal-body {
 padding: 2rem;
}
.loading-spinner {
 display: inline-block;
 width: 20px;
 height: 20px;
 border: 3px solid rgba(255, 255, 255, .3);
 border-radius: 50%;
 border-top-color: #fff;
 animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}
.back-to-top {
 width: 100px;
 border: 1px solid #ccc;
 background: #f7f7f7;
 text-align: center;
 padding: 5px;
 position: fixed; /* this is the magic */
 bottom: 10px; /* together with this to put the div at the bottom*/
 right: 15px;
 cursor: pointer;
 display: none;
 color: #333;
 font-family: verdana;
 font-size: 11px;
}
.adresse {
 display: none;
 visibility: hidden;
}