:root {
    --primary-color: #2f7df9;
    --primary-color-rgb: 47, 125, 249;

    --secondary-color: #1a62d6;
    --secondary-color-rgb: 26, 98, 214;
}

/* 1. Den hellblauen Rahmen auf das kräftige Wapster-Blau setzen */
.box-highlight, .ki-box, .accordion-section {
    border-color: #2f7df9 !important;
}

/* Äußere Box abrunden und überstehende Ecken sauber abschneiden */
.box-highlight, .ki-box {
    background-color: #2f7df9 !important;
    border-color: #2f7df9 !important;
    border-radius: 8px !important; /* Gleicher Radius für die äußere Box */
    overflow: hidden !important;   /* Schneidet spitze Innenecken automatisch ab */
}

/* Obere Ecken des Headers explizit mit abrunden */
.box-highlight .heading, .ki-box .heading {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
/* 1. Seitenhintergrund ringsrum mit dem radialen Wapster-Blauverlauf */
body, #wrapper, #content {
    background: radial-gradient(circle at center, #2b7af3 0%, #1752b0 100%) !important;
    background-attachment: fixed !important;
}

/* 2. Topbar & Header transparent oder leicht abgedunkelt anpassen, damit das Logo gut sichtbar bleibt */
#topbar {
    background: rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#topbar span, #topbar a, #mainmenu a {
    color: #ffffff !important;
}

/* 3. Haupt-Überschriften auf der Seite weiß färben für perfekten Kontrast */
#ki-hero-section h3,
#ki-hero-section p.lead {
    color: #ffffff !important;
}
/* 1. Schrift im blauen Header-Balken der Boxen auf WEISS stellen */
.box-highlight .heading,
.box-highlight .heading h4,
.ki-box .heading,
.ki-box h4 {
    color: #ffffff !important;
}

/* 2. Fixierten Header beim Scrollen abdunkeln & lesbar machen */
header,
header.smaller,
header.header-light.smaller,
#topbar {
    background-color: #0d2342 !important; /* Dunkelblau statt weiß beim Scrollen */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Schrift im fixierten Header weiß halten */
header.smaller #mainmenu a,
header.smaller .topbar-widget a,
header.smaller .topbar-widget {
    color: #ffffff !important;
}
/* 1. Inhaltsbereich nach unten schieben, damit nichts überlappt */
#content {
    padding-top: 150px !important; /* Genügend Abstand für Topbar + Menü */
}

/* Alternative: Speziell für die Hero-Section mit den Anweisungen */
#ki-hero-section {
    padding-top: 40px !important;
}

/* 2. Logo auf dunklem Hintergrund wieder gut sichtbar machen (Invertieren) */
header #logo img.logo-main {
    filter: brightness(0) invert(1) !important; /* Macht das schwarze Wapster-Logo weiß */
}

/* 3. Link-Farben in der Topbar & im Menü auf WEISS setzen */
#topbar a,
#topbar span,
#mainmenu a {
    color: #ffffff !important;
}
/* 1. Invert-Filter deaktivieren, damit die Farben sichtbar werden */
header #logo img.logo-main,
#logo img {
    filter: none !important;
}

#logo a {
    background: #ffffff !important;
    padding: 2px 6px !important; /* Sehr kleiner, dezent abgerundeter Rand */
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
}

header #logo img.logo-main,
#logo img {
    max-height: 80px !important;
    height: 80px !important;
    width: auto !important;
    filter: none !important;
}