/* ==========================================================================
   1. GLOBALE SYSTEM-VARIABLEN (Für Light & Dark Mode)
   ========================================================================== */
:root {
    --pico-nav-element-spacing-vertical: 1.2rem !important;
}

/* Spezifische Anpassungen nur am Tag (Light Mode) */
:root, [data-theme="light"] {
    --pico-background-color: #ffffff !important;
    --text-hauptfarbe: #333d47; /* Angenehmes Anthrazit */
    --navbar-hintergrund: #ffffff;
}

/* Spezifische Anpassungen nur in der Nacht (Dark Mode) */
[data-theme="dark"] {
    --pico-background-color: #141821 !important; /* Original Quark 2 Dunkelblau */
    --text-hauptfarbe: #e2e8f0; /* Gut lesbares Hellgrau */
    --navbar-hintergrund: #1a202c; /* Etwas helleres Dunkel für die Leiste */
}

/* ==========================================================================
   2. NAVIGATIONSLEISTE & LOGO
   ========================================================================== */
#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;
}

/* Bild-Logo Größe anpassen */
.navbar-brand.logo img, 
.navbar-section .logo img,
#header .logo img {
    height: 4.5rem !important;
    width: auto !important;
    max-height: none !important;
}

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

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

/* Menü-Links Textfarbe (Wechselt automatisch zwischen Dunkel und Hell) */
#header a, .navbar-section a {
    color: var(--pico-color) !important; 
    transition: color 0.2s ease;
}

#header a:hover, .navbar-section a:hover {
    color: #4A90E2 !important; /* Ihr Praxis-Hellblau beim Drüberfahren */
}

/* ==========================================================================
   3. GLOBALER HAUPTINHALT & ÜBERSCHRIFTEN (Gilt für alle Module)
   ========================================================================== */
body {
    background-color: var(--pico-background-color) !important;
    color: var(--text-hauptfarbe) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Globaler Fließtext: Greift auf JEDEM Modul-Typ und Inhaltskasten der gesamten Website */
main, .container, section, p, li, span, div[id] {
    color: var(--text-hauptfarbe) !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    line-height: 1.7 !important;
}

/* Globales Überschriften-Design: Erzwingt das Hellblau bedingungslos auf ALLEN Seiten */
h1, h2, h3, h4, h5, h6,
main h1, main h2, main h3, main h4,
section h1, section h2, section h3, section h4,
[id^="_"] h1, [id^="_"] h2, [id^="_"] h3,
div[class*="modular"] h1, div[class*="modular"] h2 {
    color: #4A90E2 !important; /* Ihr Praxis-Hellblau */
    font-weight: 500 !important;
    border: none !important; /* Löscht jegliche h2-Rahmenlinien */
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
}

/* Globaler Strich-Killer: Entfernt ALLE Deko-Linien und Akzentbalken im gesamten Template */
h2::before, h2::after, 
h1::before, h1::after,
main *::before, main *::after,
section *::before, section *::after,
.confident::before, .confident::after {
    display: none !important;
    content: none !important;
    border: none !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Globale h4-Schlankheit: Macht alle h4-Überschriften im gesamten Template elegant und dünn */
h4, main h4, section h4, [id] h4 {
    font-weight: 300 !important;
}

/* ==========================================================================
   4. RESPONSIVE TABELLEN (Für Öffnungszeiten)
   ========================================================================== */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

.table-responsive table th,
.table-responsive table td {
    white-space: nowrap !important;
    padding: 0.75rem 1rem !important;
}

.table-responsive table th {
    background-color: rgba(74, 144, 226, 0.1) !important; /* Dezenter blauer Balken */
    color: #4A90E2 !important;
    font-weight: 500 !important;
}

/* Tabellen-Gitterlinien im Dark Mode anpassen, damit sie nicht weiß blitzen */
[data-theme="dark"] .table-responsive table td,
[data-theme="dark"] .table-responsive table th {
    border-color: #2d3748 !important;
}

/* ==========================================================================
   5. HERO BANNER TEXT & FIXES
   ========================================================================== */
#hero h1, #hero h2, #hero h3, 
.hero-content h1, .hero-content h2,
.hero-header h1, .hero-header h2 {
    color: #ffffff !important; /* Text im Bild bleibt IMMER weiß */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Unterbindet das störende Hintergrund-Echo ("VVillkomme...") im Banner */
#hero .vveellkkoommmmeenn {
    display: none !important;
}

/* ==========================================================================
   7. NAVBAR ACTIVE-TAB & FRAMEWORK RESET (Kasten endgültig gelöscht)
   ========================================================================== */

/* Hebelt die Hintergrund-Füllung für aktive Elemente in der Navigation aus */
.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"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    /* Nutzt Ihr edles Hellblau für den Text des aktiven Tabs */
    color: #4A90E2 !important; 
    border-radius: 0 !important;
    /* Erzeugt den feinen, modernen Unterstrich statt des Kastens */
    border-bottom: 2px solid #4A90E2 !important; 
    padding-bottom: 6px !important;
}

/* Deaktiviert den Kasten im Quark 2 / Blade-Menü-Container */
#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;
}

/* Verhindert den Kasten-Effekt beim Drüberfahren (Hover) über den aktiven Tab */
#header .navbar ul li a[aria-current="page"]:hover,
#header .navbar ul li.active a:hover,
a[aria-current="page"]:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #4A90E2 !important;
}
/* ==========================================================================
   8. HERO BANNER FLIESSTEXT & HINTERGRUND-ECHO REPARATUR
   ========================================================================== */

/* Zwingt den Untertext ("Persönlich. Kompetent. Nah.") zu reinem Weiß und fügt Schatten hinzu */
#hero p, 
.hero p, 
.hero-content p, 
#hero em, 
#hero strong {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 400 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   9. DARKMODE-SWITCH DESIGN REPARATUR (Schwarzer Block entfernt)
   ========================================================================== */

/* Macht den klobigen schwarzen Hintergrund des Umschalters komplett transparent */
#header .navbar-section button,
#header button[class*="theme"],
#header .theme-switcher,
#header [id*="switcher"],
.navbar-section button[aria-label*="theme"],
button[class*="dark-mode"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0.5rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Zwingt das kleine Symbol (Sonne, Mond oder Auto) im Inneren zu Ihrem edlen Hellblau */
#header .navbar-section button svg,
#header button[class*="theme"] svg,
#header .theme-switcher svg,
button[aria-label*="theme"] i,
button[aria-label*="theme"] svg {
    fill: #4A90E2 !important; /* Färbt Vektorgrafiken hellblau */
    color: #4A90E2 !important; /* Färbt Icon-Schriften hellblau */
    stroke: #4A90E2 !important; /* Gibt den Linien die hellblaue Farbe */
    width: 1.5rem !important; /* Sorgt für eine optimale, elegante Größe */
    height: 1.5rem !important;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Kleiner Effekt: Das Symbol dreht sich leicht, wenn man mit der Maus drüberfährt */
#header button[aria-label*="theme"]:hover svg,
#header button[class*="theme"]:hover svg {
    color: #0b1a30 !important; /* Wird beim Drüberfahren dunkler */
    fill: #0b1a30 !important;
    transform: rotate(15deg);
}

/* ==========================================================================
   11. FINALE POSITIONIERUNG DES DARMODME-SWITCHES IM FOOTER
   ========================================================================== */
.footer-theme-toggle-container button,
.footer-theme-toggle-container .theme-switcher {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 5px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Färbt das originale Vektor-Icon im Footer in Ihr schickes Praxis-Hellblau */
.footer-theme-toggle-container button svg,
.footer-theme-toggle-container .theme-switcher svg,
.footer-theme-toggle-container button i {
    fill: #4A90E2 !important; /* Ihr Praxis-Hellblau */
    color: #4A90E2 !important;
    stroke: #4A90E2 !important;
    width: 1.4rem !important; /* Elegante, dezente Größe für den Footer */
    height: 1.4rem !important;
    transition: transform 0.2s ease;
}

/* Kleiner Effekt beim Drüberfahren mit der Maus am Computer */
.footer-theme-toggle-container button:hover svg {
    transform: scale(1.1);
}