/* ==========================================================================
   1. GLOBALE SYSTEM-VARIABLEN (Weicher & Freundlicher Apple-Look)
   ========================================================================== */
:root {
    --pico-nav-element-spacing-vertical: 1.2rem !important;
    --apple-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Spezifische Anpassungen nur am Tag (Light Mode) */
:root, [data-theme="light"] {
    --pico-background-color: #ffffff !important;
    --text-hauptfarbe: #333D47; /* Weiches, edles Graphit-Anthrazit */
    --navbar-hintergrund: #ffffff;
    --apple-blau: #0071E3; 
    --apple-blau-hover: #0077ED;
}

/* Spezifische Anpassungen nur in der Nacht (Dark Mode) */
[data-theme="dark"] {
    --pico-background-color: #141821 !important; 
    --text-hauptfarbe: #E2E8F0; 
    --navbar-hintergrund: #1a202c; 
    --apple-blau: #2997FF; 
    --apple-blau-hover: #47A5FF;
}

/* ==========================================================================
   2. NAVIGATIONSLEISTE & KASTEN-ELIMINIERUNG (Home-Button Fix)
   ========================================================================== */
#header, .header-fixed #header {
    background-color: var(--navbar-hintergrund) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease;
}

#header .navbar-brand img[src$=".svg"],
.header-logo img[src$=".svg"] {
    height: 5.5rem !important;  
    width: auto !important;     
    display: inline-block;
}

#header .navbar-section {
    justify-content: flex-start !important; 
    flex: 1 1 auto;
}

#header .navbar-brand {
    margin-right: auto !important; 
    padding-left: 0 !important;    
    max-width: 70% !important;     
}

#header .navbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.navbar-section.navbar-menu-right {
    margin-left: auto !important;
}

#header a, .navbar-section a, #header .navbar a {
    font-family: var(--apple-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-hauptfarbe) !important; 
    transition: color 0.2s ease;
    background: transparent !important; 
    background-color: transparent !important;
}

#header a:hover, .navbar-section a:hover {
    color: var(--apple-blau) !important; 
    background: transparent !important;
    background-color: transparent !important;
}

/* RADIKALER KASTEN-KILLER: Zwingt den aktiven Tab (Home) zu absoluter Transparenz */
.navbar-section ul li a[aria-current="page"],
.navbar-section ul li.active a,
.navbar-section ul li a.active,
#header .navbar a[aria-current="page"],
#header .navbar-section ul.navigation li.active a,
.navigation li.active a,
a[aria-current="page"],
.active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--apple-blau) !important; 
    border-radius: 0 !important;
    border-bottom: 2px solid var(--apple-blau) !important; 
    padding-bottom: 6px !important;
}

#header nav.dropmenu ul li.active,
#header nav.dropmenu ul li a:focus,
.navbar-section li[class*="active"],
.navbar-section a[class*="active"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hamburger-Menü für Smartphones (Farbe anpassen) */
.navbar-toggle span, 
.navbar-toggle i,
.navbar-toggle span::before,
.navbar-toggle span::after,
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
#header [class*="toggle"] span {
    background-color: var(--text-hauptfarbe) !important;
}

/* ==========================================================================
   3. GLOBALER HAUPTINHALT & ÜBERSCHRIFTEN (Graphit-Töne statt Schwarz)
   ========================================================================== */
body {
    background-color: var(--pico-background-color) !important;
    color: var(--text-hauptfarbe) !important;
    font-family: var(--apple-font) !important;
    -webkit-font-smoothing: antialiased;
}

main, .container, section, p, li, span, div[id], td, th, strong, em {
    font-family: var(--apple-font) !important;
    line-height: 1.6 !important;
}

p, li, span, td {
    font-size: 17px !important;
    color: var(--text-hauptfarbe) !important;
}

h1, h2, h3, h4, h5, h6,
main h1, main h2, main h3, main h4,
section h1, section h2, section h3, section h4 {
    font-family: var(--apple-font) !important;
    color: var(--text-hauptfarbe) !important; 
    font-weight: 600 !important; 
    letter-spacing: -0.5px !important;
    border: none !important; 
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: keep-all !important;
}

h1, main h1 { font-size: 40px !important; letter-spacing: -1px !important; }
h2, main h2 { font-size: 32px !important; }
h3, main h3 { font-size: 24px !important; }

h2::before, h2::after, h1::before, h1::after, main *::before, main *::after {
    display: none !important; content: none !important;
}

/* ==========================================================================
   4. RESPONSIVE TABELLEN & LINKS
   ========================================================================== */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.table-responsive table th {
    background-color: rgba(0, 0, 0, 0.03) !important;
    color: var(--text-hauptfarbe) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   5. HERO BANNER & BUTTONS
   ========================================================================= */
#hero h1, #hero h2, #hero h3, .hero-content h1, .hero-content h2 {
    font-family: var(--apple-font) !important;
    color: #ffffff !important; 
    font-size: 44px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

#hero p, .hero p, .hero-content p { color: #ffffff !important; }
#hero .vveellkkoommmmeenn { display: none !important; }

#hero a, .hero a, .hero-content a, #hero .button, .hero-content .btn, #hero a.button, #hero a.button *, .hero-content a * {
    font-family: var(--apple-font) !important;
    background-color: var(--apple-blau) !important; 
    color: #FFFFFF !important; 
    font-size: 15px !important;
    font-weight: 600 !important; 
    padding: 11px 24px !important;
    border-radius: 22px !important; 
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

#hero a:hover, .hero-content a:hover, #hero a.button:hover {
    background-color: var(--apple-blau-hover) !important;
    color: #FFFFFF !important;
}

#hero a:nth-of-type(2), .hero-content a:nth-of-type(2) {
    background-color: rgba(255, 255, 255, 0.2) !important; 
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    margin-left: 12px !important;
}

/* ==========================================================================
   6. MOBIL-ANPASSUNGEN
   ========================================================================== */
@media (max-width: 768px) {
    #hero h1, #hero h2, .hero-content h1, .hero-content h2 {
        font-size: 26px !important; 
        line-height: 1.3 !important;
    }
    #hero a, .hero-content a, #hero a.button {
        display: flex !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   7. REPARATUR FÜR DEN MOBILEN SWITCHER (TEXT STATT ICONS)
   ========================================================================== */

/* 1. Positioniert die gesamte Appearance-Zeile im mobilen Menü sauber nach unten */
.off-canvas .theme-switcher,
#ui-theme-switcher {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 20px 0 !important;
    margin-top: 35px !important;
    border-top: 1px solid #f0f0f0 !important; /* Feine Trennlinie über dem Wort */
    width: 100% !important;
}

/* 2. Formatiert das Hauptwort "Appearance" im Apple-Look */
.off-canvas .theme-switcher > a,
.off-canvas .theme-switcher > span {
    font-family: var(--apple-font) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--text-hauptfarbe) !important;
    display: block !important;
    margin-bottom: 12px !important;
    pointer-events: none !important; /* Verhindert das Klicken auf das bloße Wort */
}

/* 3. Vernichtet die fehlerhaften Icons und den grauen Hover-Kreis komplett */
.off-canvas .theme-switcher i,
.off-canvas .theme-switcher svg,
.off-canvas .theme-switcher .fa,
.off-canvas .theme-switcher a::after,
.off-canvas .theme-switcher a::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* 4. Erzeugt drei echte, sichtbare Text-Schaltflächen nebeneinander */
.off-canvas .theme-switcher-buttons,
.off-canvas div[class*="buttons"] {
    display: flex !important;
    gap: 8px !important;
    visibility: visible !important;
}

/* 5. Verwandelt die unsichtbaren Links in moderne, klickbare Text-Fliesen */
.off-canvas .theme-switcher button,
.off-canvas .theme-switcher [role="button"],
.off-canvas .theme-switcher a[id*="theme"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--text-hauptfarbe) !important;
    font-family: var(--apple-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Weicher Hover-Effekt für die neuen Text-Fliesen */
.off-canvas .theme-switcher button:hover,
.off-canvas .theme-switcher a[id*="theme"]:hover {
    background-color: var(--apple-blau) !important;
    color: #ffffff !important;
    border-color: var(--apple-blau) !important;
}

/* Schaltet die leeren Pico-Reste im Hintergrund weiterhin unsichtbar */
#header + div div button:not([class*="theme"]),
#header + div div:not([class*="theme"]) {
    display: none !important;
}

/* ==========================================================================
   7. BRANDNEUER FIX FÜR QUARK 2 (BLADES CSS) - APPEARANCE RESTLOS LÖSCHEN
   ========================================================================== */

/* Findet den Theme-Modus-Umschalter im neuen Quark 2 / Blades-Layout 
   und blendet ihn auf allen Geräten (Desktop und Smartphone-Menü) restlos aus */
[data-blades-component*="theme"],
[data-blades-component*="switcher"],
.blades-nav-mobile div:last-of-type,
.blades-menu-mobile div:last-of-type,
nav[class*="blades"] + div,
header + div div[style*="position"],
div[class*="theme-toggle"],
button[class*="theme-toggle"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}



/* ==========================================================================
   RADIKALE KORREKTUR FÜR DIE MODUL-ABSTÄNDE (QUARK-THEME SPECIFIC)
   ========================================================================== */
.modular-page section,
.modular-page .section,
.modular-page div[id^="modular-"],
.modular-page .modular-body,
#modular-wrapper section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

section.section-modular, 
section.section.bg-gray,
section.section {
    padding: 1.5rem 0 !important;
}

.modular-page section:first-of-type,
#modular-wrapper section:first-of-type {
    padding-top: 4rem !important;
}


/* ==========================================================================
   GRAV UPDATE-FIX: LOGO-GRÖSSE & MOBILE BUTTONS
   ========================================================================== */
#header .navbar-brand img,
#header .navbar-brand svg,
.header-logo img,
#header img[src$=".svg"],
#header img[src$=".png"] {
    height: 5.5rem !important;  
    width: auto !important;     
    max-height: 80px !important;
    display: inline-block !important;
}

@media (max-width: 768px) {
    #hero a:nth-of-type(2), 
    .hero-content a:nth-of-type(2),
    #hero .button:nth-of-type(2) {
        margin-left: 0 !important;
        margin-top: 10px !important;
        width: 100% !important;
        display: flex !important;
    }
}

.navbar-brand::after,
.navbar-brand::before,
#header .navbar-section::after,
#header .navbar-brand a::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* ==========================================================================
   HERO/BANNER-OPTIMIERUNG (Bessere Lesbarkeit & Bild-Verschiebung)
   ========================================================================== */

/* 1. Fügt einen eleganten, dunklen Schleier über das Bild, damit weiße Schrift lesbar wird */
#hero, .hero, [class*="hero-banner"] {
    position: relative !important;
    background-position: center center !important; /* Zentriert das Bild */
    background-size: cover !important;
}

#hero::before, .hero::before, [class*="hero-banner"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important; /* 40% dunkler Schleier */
    z-index: 1 !important;
}

/* 2. Schiebt den Text und die Buttons über den dunklen Schleier */
#hero .hero-content, .hero h1, .hero p, .hero .buttons,
[class*="hero-banner"] h1, [class*="hero-banner"] p {
    position: relative !important;
    z-index: 2 !important;
}

/* 3. Gibt dem Banner nach oben und unten mehr Höhe, damit es großzügiger wirkt */
#hero, .hero, [class*="hero-banner"] {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
    margin-top: 0 !important;
}

/* 4. Macht den Text etwas kompakter und feiner, passend zum Apple-Look */
#hero h1, .hero h1 {
    font-size: 46px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
}

#hero p, .hero p {
    font-size: 20px !important;
    font-weight: 400 !important;
    opacity: 0.95 !important;
}

/* ==========================================================================
   HERO BANNER: TEXT NACH UNTEN LINKS VERSCHIEBEN (MODERN LOOK)
   ========================================================================== */

/* 1. Aktiviert das Layout-System für das gesamte Banner */
#hero, .hero, [class*="hero-banner"] {
    position: relative !important;
    background-position: center center !important;
    background-size: cover !important;
    /* Gibt dem Banner eine feste, großzügige Mindesthöhe */
    min-height: 550px !important; 
    display: flex !important;
    /* Schiebt den gesamten Inhalt ganz nach unten */
    align-items: flex-end !important; 
    /* Richtet den Inhalt linksbündig aus */
    justify-content: flex-start !important; 
    /* Großzügiger Abstand nach innen (links und unten Platz zum Atmen) */
    padding: 60px 40px !important; 
}

/* 2. Der dunkle Schleier bleibt für die perfekte Lesbarkeit aktiv */
#hero::before, .hero::before, [class*="hero-banner"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.35) !important; /* 35% Abdunkelung */
    z-index: 1 !important;
}

/* 3. Richtet den Textcontainer im Banner linksbündig aus */
#hero .hero-content, 
.hero .hero-body,
[class*="hero-banner"] .container {
    position: relative !important;
    z-index: 2 !important;
    text-align: left !important; /* Text linksbündig */
    max-width: 800px !important; /* Verhindert, dass der Text zu lang einzeilig läuft */
    margin: 0 !important; /* Entfernt die automatische Zentrierung */
}

/* 4. Passt die Buttons an das linksbündige Design an */
#hero .buttons, 
.hero .hero-content a {
    justify-content: flex-start !important;
    margin-top: 20px !important;
}

/* 5. Mobil-Optimierung: Auf Smartphones bleibt alles kompakt und zentriert */
@media (max-width: 768px) {
    #hero, .hero, [class*="hero-banner"] {
        min-height: 400px !important;
        align-items: center !important; /* Auf Handys wieder mittig für besseren Fokus */
        justify-content: center !important;
        padding: 30px 20px !important;
    }
    #hero .hero-content, [class*="hero-banner"] .container {
        text-align: center !important;
    }
}