body, 
h1, h2, h3, h4, h5, h6, 
.site-title, .navbar-brand {
    font-family: "Segoe UI", "Century Gothic", AppleGothic, sans-serif !important;
}

/* Überschriften global verkleinern und feiner gestalten */
h1, .page-header h1, .com-content-article.item-page .page-header h1 {
    font-size: 1.8rem !important;  /* Standard ist oft über 2.5rem */
    font-weight: 500 !important;   /* Macht die Schrift dünner/eleganter */
    letter-spacing: 0.01em;
    color: #1a4773; 
}

h2, h2.item-title {
    font-size: 1.5rem !important;  /* Für Beitrags- und Unterüberschriften */
    font-weight: 500 !important;
    color: #1a4773; 
}

h3 {
    font-size: 1.3rem !important;  /* Für Modulüberschriften in den Sidebars */
    font-weight: 500 !important;
}

h4, h5, h6 {
    font-size: 1.1rem !important;  /* Für kleinere Zwischenüberschriften */
    font-weight: 600 !important;   /* Bei sehr kleinen Schriften belässt man es gern etwas deutlicher */
}

/* Change the main header color */
.header.container-header.full-width {
    background-image: url('../images/pageglare.png');
    background-repeat: no-repeat; /* Oder: repeat-x, falls es sich horizontal wiederholen soll */
    background-size: cover;       /* Skaliert das Bild so, dass der Header ausgefüllt ist */
    background-position: center;  /* Zentriert das Bild */
    background-color: #1a4773;    /* Fallback-Farbe, falls das Bild nicht lädt */
}

/* Change the footer color */
.footer.container-footer.footer.full-width {
    background: #1a4773;
}
/* Change the article title text color */
/* 1. Target plain text titles */
h2.item-title {
    color: #1a4773; 
}

/* 2. Target clickable titles (Links) */
h2.item-title a {
    color: #1a4773; /* Keeps the link the same color */
    text-decoration: none; /* Optional: removes the underline */
}

/* 3. Target the title when someone hovers over it */
h2.item-title a:hover,
h2.item-title a:focus {
    color: #1a4773; /* Changes color on hover */
    text-decoration: underline; /* Optional: adds underline on hover */
}

.com-content-article.item-page .page-header h1,
.com-content-article.item-page .page-header h1 span {
    color: #1a4773 !important;
}

/* Farbliche Abstimmung der Zwischenüberschriften */
h3, h4 {
    color: #1a4773 !important;
}

.footer1 {
    text-align: center;
}
.footer2 {
    text-align: center;
}

/* Center all content inside the Cassiopeia footer */
.container-footer.footer.full-width {
    display: flex;
    justify-content: center; /* Centers elements horizontally */
    align-items: center;     /* Centers elements vertically */
    flex-direction: column;  /* Stacks modules neatly if there are multiple */
    text-align: center;      /* Centers individual lines of plain text */
}

/* Tighten the footer container and force text alignment */
.container-footer.footer.full-width {
    display: block !important;       /* Resets the flex grid blowout */
    text-align: center !important;   /* Centers all inline text elements */
    padding-top: 0.5rem !important;  /* Drops top padding to a bare minimum */
    padding-bottom: 0.5rem !important; /* Drops bottom padding to a bare minimum */
}

/* Eliminate hidden margins on modules and paragraphs inside the footer */
.container-footer.footer.full-width .moduletable,
.container-footer.footer.full-width p,
.container-footer.footer.full-width div,
.container-footer.footer.full-width footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure horizontal menus inside the footer align centrally */
.container-footer.footer.full-width ul.nav {
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 1. Reset the primary outer footer wrapper */
.container-footer.footer.full-width {
    display: block !important;
    text-align: center !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    width: 100% !important;
}

/* 2. FORCE the inner grid child to break out of the columns and center its text */
.container-footer.footer.full-width .grid-child,
.container-footer.footer.full-width > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    float: none !important;
}

/* 3. Strip out any remaining margin/padding padding traps */
.container-footer.footer.full-width .moduletable,
.container-footer.footer.full-width p,
.container-footer.footer.full-width div {
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}

/* 1. Den Footer-Container auf volle Breite bringen und zentrieren */
.footer, 
.container-footer {
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Das Menü im Footer horizontal ausrichten */
.footer ul.menu,
.footer ul.nav {
    display: flex !important;
    flex-direction: row !important;      /* Ordnet die Punkte nebeneinander an */
    flex-wrap: wrap !important;          /* Erlaubt Umbruch auf Smartphones */
    justify-content: center !important;  /* Zentriert das gesamte Menü horizontal */
    align-items: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;         /* Entfernt eventuelle Aufzählungspunkte */
    gap: 15px 25px !important;           /* Abstand zwischen den Punkten (oben/unten links/rechts) */
}

/* 3. Sicherstellen, dass die einzelnen Listenpunkte nicht die volle Breite blockieren */
.footer ul.menu li,
.footer ul.nav li {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


.sponsor-ticker {
    overflow: hidden;
    background: #ffffff; /* Or transparent/your footer color */
    padding: 20px 0;
    width: 100%;
}

.sponsor-track {
    display: flex;
    width: calc(110px * 44); /* Card width multiplied by total number of cards (including duplicates) */
    animation: scrollTicker 25s linear infinite;
}

.sponsor-track:hover {
    animation-play-state: paused; /* Pauses the slider when someone hovers over a sponsor card */
}

.sponsor-card {
    width: 110px; /* Size of your business card layout */
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.sponsor-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* The magic infinite loop animation */
@keyframes scrollTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-110px * 22)); } /* Negative card width multiplied by original number of cards */
}

/* Entfernt den oberen Abstand des gesamten Headers zum Bildschirmrand */
.header {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Entfernt eventuelle Standard-Abstände des inneren Containers über dem Slider */
.header-slider-fix,
.container-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.site {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hebelt den internen Zeilenabstand des Cassiopeia-Headers aus */
.header {
    padding-top: 0 !important;
    margin-top: 0 !important;
    gap: 0 !important; /* Entfernt den Abstand zwischen den Rasterzeilen */
    row-gap: 0 !important;
}

/* Zwingt das allererste Element im Header, absolut oben zu starten */
.header > *:first-child,
.header-slider-fix {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Setzt die umschließende Site-Struktur auf absolute Nullkante */
body, 
body.site, 
.site-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Richtet den Slideshow-Banner exakt bündig mit dem Menü aus */
.header-slider-fix {
    margin-left: 0 !important;
    padding-left: 0 !important;
    grid-column: start / end !important;
}

/* html {
    position: relative;
    top: -22px;
} */

/* Hauptmenü 1. Level: Links, Platzhalter & Dropdown-Öffner vergrößern und fetten */
/* Zielgenaue Ansprache der Link-Elemente im Menü */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > .nav-link,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button,
.container-header .mod-menu > li > .separator {
    font-size: 1.15rem !important; /* Größere Schrift */
    font-weight: 700 !important;   /* Fett */
    color: #1a4773 !important; 
}

/* WICHTIG: Überschreiben von Zuständen wie Hover, Fokus oder Aktiv */
.container-header .mod-menu .nav-link:hover,
.container-header .mod-menu .nav-link:focus,
.container-header .mod-menu .nav-link:active,
.container-header .mod-menu li a:hover {
    color: #1a47733 !important; /* Hier die Farbe für den Hover-Effekt eintragen */
}


/* ==========================================================================
   GEMEINSAMES STYLING FÜR UNTERMENÜS (Desktop & Mobil)
   ========================================================================== */

/* 1. Hintergrund der Untermenüs auf ein weiches Hellgrau setzen */
.container-header .mod-menu .mod-menu__sub {
    background-color: #f8f9fa !important;
    border: 1px solid #e2e8f0 !important; /* Feine Begrenzungslinie */
    border-radius: 4px !important;
    padding: 8px 0 !important; /* Etwas Luft oben und unten im Kasten */
}

/* 2. Schriftfarbe der Links und Separatoren im Untermenü standardmäßig Dunkelblau */
.container-header .mod-menu .mod-menu__sub li a,
.container-header .mod-menu .mod-menu__sub li .separator {
    color: #1a4773 !important;
    display: block !important;
    padding: 8px 16px !important; /* Klickbereich vergrößern */
    text-decoration: none !important;
    font-size: 0.95rem !important; /* Unterpunkte minimal dezenter als Hauptpunkte */
    font-weight: 500 !important; /* Etwas weniger fett als Hauptmenü */
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* 3. Hover-Zustand: Hintergrund wird blau, Schrift wird weiß beim Drüberfahren */
.container-header .mod-menu .mod-menu__sub li a:hover,
.container-header .mod-menu .mod-menu__sub li .separator:hover {
    background-color: #1a4773 !important;
    color: #ffffff !important;
}


/* ==========================================================================
   SPEZIFISCHES STYLING JE NACH BILDSCHIRMBREITE
   ========================================================================== */

/* --- NUR DESKTOP-ANSICHT (Ab 992px) --- */
@media (min-width: 992px) {
    .container-header .mod-menu .mod-menu__sub {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Schwebender Schatten-Effekt */
        min-width: 200px !important; /* Mindestbreite für das schwebende Fenster */
    }
}

/* --- NUR MOBILE ANSICHT (Bis 991.98px) --- */
@media (max-width: 991.98px) {
    .container-header .mod-menu .mod-menu__sub {
        margin-left: 15px !important; /* Mobile Unterpunkte leicht einrücken */
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        border: none !important; /* Mobil keinen Rahmen, da flach eingebettet */
    }
}

/* Den Button-Rahmen für das Hamburger-Menü anpassen */
.navbar-toggler {
    border-color: #1a4773 !important;
}

/* Das SVG-Icon im Hamburger-Menü einfärben */
.navbar-toggler-icon {
    /* Setzt die Farbe für das SVG-Symbol */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(26, 71, 115, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Ändert die Farbe der drei Striche (Hamburger-Icon) */
.navbar-toggler .icon-menu {
  color: #1a4773;
}

/* Hintergrundfarbe für den Navigations-Container setzen */
/* .grid-child.container-nav {
    background-color: #1a4773 !important;
} */

/* ==========================================================================
   Manuelle Kategorie-Navigation in der Beschreibung
   ========================================================================== */

/* Container für die Buttons */
.pg-desc-navigation {
    display: flex;
    justify-content: space-between; /* Verteilt Buttons nach links und rechts */
    align-items: center;
    margin: 40px 0 20px 0;
    padding-top: 25px;
    border-top: 1px solid #e2e8f0; /* Dezente Trennlinie nach oben */
    gap: 15px;
}

/* Grundstyling für die Buttons */
.pg-desc-navigation .pg-desc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff !important;
    color: #1a4773 !important;
    border: 2px solid #1a4773 !important;
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover-Effekt: Hintergrund wird blau, Schrift wird weiß */
.pg-desc-navigation .pg-desc-btn:hover {
    background-color: #1a4773 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(26, 71, 115, 0.15) !important;
}

/* Falls nur ein Button existiert (z. B. nur "Weiter" auf der Startseite) */
.pg-desc-navigation .next {
    margin-left: auto; /* Schiebt den "Weiter"-Button immer ganz nach rechts */
}

/* --- Mobil-Optimierung (Smartphones) --- */
@media (max-width: 576px) {
    .pg-desc-navigation {
        flex-direction: column; /* Buttons untereinander stapeln */
        align-items: stretch;
    }
    
    .pg-desc-navigation .pg-desc-btn {
        justify-content: center; /* Text mittig im Button platzieren */
        width: 100%;
        margin-left: 0 !important; /* Reset für den "Next"-Button-Push */
    }
}