/*
Theme Name: Zeigner ZHD Bohrtechnik Child
Theme URI: https://www.zeigner-bohrtechnik.de
Description: Child Theme für Zeigner ZHD Bohrtechnik - Komplett ohne Font Awesome. Alle Icons wurden durch Unicode-Symbole ersetzt.
Author: Custom Theme
Template: zeigner-bohrtechnik-theme
Version: 1.1.4
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zeigner-bohrtechnik-child
Tags: child-theme, business, industrial, elementor
*/

/*
==========================================================================
   WICHTIG: CSS-Anpassungen
==========================================================================

Dieses Child-Theme erbt automatisch alle Styles vom Haupt-Theme.
Fügen Sie hier Ihre eigenen CSS-Anpassungen hinzu.

Das Haupt-Theme wird NICHT überschrieben und kann sicher aktualisiert werden.

VERSION 1.0.3 ÄNDERUNGEN:
- Font Awesome komplett entfernt
- Alle Icons durch Unicode-Symbole ersetzt
- Scroll-to-Top Button mit Unicode ▲
- Navigation-Pfeile mit Unicode ►/▼
- Social Media Icons mit Emojis
- Suchsymbol mit Unicode 🔍
- Keine externe Icon-Library mehr nötig
*/

/* ==========================================================================
   1. STICKY HEADER - Verkleinert beim Scrollen (CUBIC-BEZIER EASING)
   ========================================================================== */

/* Sticky Header aktivieren */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Header Normalzustand */
.main-header {
    padding: 15px 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Top-Bar Normalzustand */
.top-bar {
    padding: 10px 0;
    background-color: #DC143C; /* var(--primary-red) - Roter Hintergrund */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-logo {
    max-width: 250px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-logo img {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Header beim Scrollen (verkleinert) - HALBTRANSPARENT BLAU */
body.scrolled .site-header {
    background-color: rgba(44, 79, 107, 0.90); /* var(--primary-blue) #2C4F6B mit 90% Opazität */
    backdrop-filter: blur(8px); /* Weichzeichner für Lesbarkeit */
    -webkit-backdrop-filter: blur(8px); /* Safari Support */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Top-Bar beim Scrollen BLEIBT SICHTBAR aber 50% kleiner */
body.scrolled .top-bar {
    padding: 5px 0; /* Von 10px auf 5px (50% Reduktion) */
    background-color: rgba(220, 20, 60, 0.90); /* var(--primary-red) #DC143C mit 90% Opazität */
}

/* Main Header Höhe reduzieren (50% kleiner) */
body.scrolled .main-header {
    padding: 8px 0; /* Von 15px auf 8px (ca. 50%) */
}

/* Logo verkleinern auf 50px Höhe */
body.scrolled .site-logo {
    max-width: 125px; /* Von 250px auf 125px (50%) */
}

body.scrolled .site-logo img {
    max-height: 50px;
    width: auto;
}

/* Navigation Schrift beim Scrollen kleiner */
body.scrolled .main-navigation a {
    font-size: 14px;
    padding: 12px 15px; /* Weniger Padding */
}

/* Smooth Cubic-Bezier Transitions für alle Elemente */
.top-bar,
.main-header,
.site-logo,
.site-logo img,
.main-navigation a {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================================
   2. SCROLL-TO-TOP BUTTON (ohne Font Awesome)
   ========================================================================== */

#scroll-to-top,
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #c41e3a;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

#scroll-to-top:hover,
.scroll-to-top:hover {
    background-color: #a01829;
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* Unicode Pfeil statt Font Awesome */
.scroll-to-top .arrow-up,
#scroll-to-top .arrow-up {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    display: block;
}

/* Verstecke alle Font Awesome Icons im Scroll-Button */
.scroll-to-top i,
#scroll-to-top i,
.back-to-top i {
    display: none !important;
}

/* CSS ::after entfernt - JavaScript erstellt den Button bereits mit Pfeil */

/* ==========================================================================
   3. NAVIGATION DROPDOWN-PFEILE (ohne Font Awesome)
   ========================================================================== */

/* Verstecke alle Font Awesome Icons in der Navigation */
.main-navigation i,
.menu-toggle i {
    display: none !important;
}

/* Pfeile werden durch JavaScript hinzugefügt (siehe custom.js) */
/* CSS ::after Pfeile sind DEAKTIVIERT um Dopplungen zu vermeiden */

/* Styling für JavaScript-generierte Pfeile */
.main-navigation .dropdown-arrow {
    font-size: 0.75em;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Hover-Effekt für Dropdown-Pfeile */
.main-navigation .menu-item-has-children:hover > a .dropdown-arrow {
    transform: scale(1.2);
}

/* Zweite Ebene des Dropdown-Menüs nach rechts (Original-Fix) */
.main-navigation ul ul ul {
    top: 0 !important;
    left: 100% !important;
    margin-left: 0;
}

.main-navigation ul ul ul::before {
    display: none;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mobile Menu Toggle */
.menu-toggle {
    position: relative;
}

.menu-toggle::before {
    content: '☰';
    font-size: 24px;
    font-weight: bold;
}

.menu-toggle.active::before {
    content: '✕';
}

/* ==========================================================================
   3B. MOBILE NAVIGATION - RESPONSIVE MENU
   ========================================================================== */

/* Mobile Menu Toggle Button - Standardmäßig versteckt */
.menu-toggle,
.mobile-menu-toggle {
    display: none; /* Auf Desktop versteckt */
    position: relative;
    background-color: #DC143C; /* Rot */
    color: #FFFFFF;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 24px;
    z-index: 1001;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.menu-toggle:hover,
.mobile-menu-toggle:hover {
    background-color: #C8102E; /* Dunkleres Rot beim Hover */
}

.menu-toggle .menu-icon,
.mobile-menu-toggle .menu-icon {
    display: inline-block;
    font-size: 24px;
    line-height: 1;
}

/* Mobile Navigation - Standard versteckt */
@media screen and (max-width: 992px) {
    /* Mobile Menu Toggle Button ANZEIGEN ab 992px */
    .menu-toggle,
    .mobile-menu-toggle {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }
    
    /* Desktop-Navigation auf Mobile VERSTECKEN */
    .main-navigation {
        position: relative;
    }
    
    .main-navigation ul {
        display: none; /* Standardmäßig versteckt */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(44, 79, 107, 0.98); /* Blau wie Header */
        margin: 0;
        padding: 0;
        list-style: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        z-index: 1000;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    
    /* Mobile-Navigation GEÖFFNET */
    .main-navigation ul.mobile-open,
    .main-navigation.mobile-active ul {
        display: block !important;
    }
    
    /* Mobile Navigation Links */
    .main-navigation ul li {
        display: block;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .main-navigation ul li a {
        display: block;
        padding: 15px 20px !important;
        color: #FFFFFF !important;
        text-decoration: none;
        border-radius: 0 !important; /* Keine Abrundung auf Mobile */
        transition: background-color 0.3s ease;
    }
    
    .main-navigation ul li a:hover,
    .main-navigation ul li.current-menu-item > a,
    .main-navigation ul li.current-menu-ancestor > a {
        background-color: #DC143C !important; /* Roter Hintergrund */
        text-decoration: none;
    }
    
    /* Dropdown-Menüs auf Mobile */
    .main-navigation ul ul {
        position: static;
        display: none;
        box-shadow: none;
        background-color: rgba(34, 59, 87, 0.98); /* Etwas dunkler */
        margin-left: 20px;
    }
    
    .main-navigation ul ul li a {
        padding: 12px 20px !important;
        font-size: 14px;
    }
    
    /* Dropdown-Pfeil auf Mobile */
    .main-navigation .menu-item-has-children > a .dropdown-arrow {
        float: right;
        transform: rotate(0deg);
    }
    
    .main-navigation .menu-item-has-children.open > a .dropdown-arrow {
        transform: rotate(180deg);
    }
    
    /* Logo auf Mobile kleiner */
    .site-logo {
        max-width: 180px !important;
    }
    
    .site-logo img {
        max-height: 50px !important;
    }
    
    /* Top-Bar auf Mobile */
    .top-bar {
        font-size: 12px;
        padding: 8px 0 !important;
    }
}

/* Tablet-spezifische Anpassungen */
@media screen and (min-width: 768px) and (max-width: 992px) {
    .main-navigation ul li a {
        padding: 18px 25px !important;
        font-size: 16px;
    }
    
    .site-logo {
        max-width: 200px !important;
    }
}

/* ==========================================================================
   4. SUCHFORMULAR (ohne Font Awesome)
   ========================================================================== */

/* Verstecke Font Awesome Lupe */
.search-form i,
.search-submit i {
    display: none !important;
}

/* Unicode Lupe für Suchbutton */
.search-submit::before,
.search-icon {
    content: '🔍';
    font-size: 18px;
}

.search-form .search-icon {
    display: inline-block;
    font-size: 18px;
}

/* Styling für Suchbutton */
.search-form .search-submit {
    background-color: #c41e3a;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-form .search-submit:hover {
    background-color: #a01829;
}

/* ==========================================================================
   5. META-INFORMATIONEN (ohne Font Awesome)
   ========================================================================== */

/* Datum Icon */
.entry-meta .posted-on i,
.posted-on .fa-calendar-alt {
    display: none !important;
}

.entry-meta .posted-on::before {
    content: '📅 ';
    margin-right: 5px;
}

/* Autor Icon */
.entry-meta .byline i,
.byline .fa-user {
    display: none !important;
}

.entry-meta .byline::before {
    content: '👤 ';
    margin-right: 5px;
}

/* Kategorie Icon */
.entry-meta .cat-links i,
.cat-links .fa-folder {
    display: none !important;
}

.entry-meta .cat-links::before {
    content: '📁 ';
    margin-right: 5px;
}

/* Tags Icon */
.tags-links i,
.tags-icon,
.fa-tags {
    display: none !important;
}

.tags-links::before {
    content: '🏷️ ';
    margin-right: 5px;
}

/* ==========================================================================
   6. SOCIAL MEDIA ICONS (ohne Font Awesome)
   ========================================================================== */

/* Verstecke alle Font Awesome Social Icons */
.social-media-icons i,
.social-icon i {
    display: none !important;
}

/* Emoji-basierte Social Media Icons */
.social-media-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-media-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 20px;
}

.social-media-icons a:hover {
    background-color: rgba(255,255,255,0.2);
    transform: scale(1.1);
}

.social-media-icons .icon-emoji {
    font-size: 20px;
    line-height: 1;
}

/* Bounce-Animation für Hover */
.social-media-icons .icon-emoji.bounce {
    animation: bounce 0.5s ease;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ==========================================================================
   7. 404 SEITE (ohne Font Awesome)
   ========================================================================== */

/* Home Icon auf 404-Seite */
.error-404 i,
.error-404 .fa-home {
    display: none !important;
}

.error-404 a[href*="home"]::before,
.home-icon::before {
    content: '🏠 ';
    margin-right: 5px;
}

/* ==========================================================================
   8. FILE-TYPE ICONS (ohne Font Awesome)
   ========================================================================== */

/* Datei Icon in Suchergebnissen */
.search-results .fa-file-alt {
    display: none !important;
}

.search-results .entry-title::before {
    content: '📄 ';
    margin-right: 5px;
}

/* ==========================================================================
   9. ACCESSIBILITY & SCREEN READER
   ========================================================================== */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   10. RESPONSIVE ANPASSUNGEN
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* Scroll-to-Top Button auf Mobile kleiner */
    #scroll-to-top,
    .scroll-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }
    
    .scroll-to-top .arrow-up {
        font-size: 20px;
    }
    
    /* Navigation für Mobile optimieren */
    .main-navigation .menu-item-has-children > a::after {
        font-size: 0.85em;
    }
    
    /* Social Icons auf Mobile kleiner */
    .social-media-icons a {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    /* Extra kleine Screens */
    #scroll-to-top,
    .scroll-to-top {
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
    }
    
    .scroll-to-top .arrow-up {
        font-size: 18px;
    }
}

/* ==========================================================================
   11. ÜBERSCHRIFTEN ABSTÄNDE
   ========================================================================== */

/* Abstand nach oben für alle Überschriften ab h2 */
h2, .h2 {
    margin-top: 2em;
}

h3, .h3 {
    margin-top: 1.8em;
}

h4, .h4 {
    margin-top: 1.6em;
}

h5, .h5 {
    margin-top: 1.4em;
}

h6, .h6 {
    margin-top: 1.2em;
}

/* Erste Überschrift im Container ohne zusätzlichen Abstand */
.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child,
.site-content > h2:first-child,
.site-content > h3:first-child,
.site-content > h4:first-child {
    margin-top: 0;
}

/* ==========================================================================
   12. EIGENE ANPASSUNGEN
   ========================================================================== */

/* 
Hier können Sie Ihre eigenen CSS-Anpassungen hinzufügen.
Alle Änderungen hier bleiben erhalten, auch wenn das Haupt-Theme aktualisiert wird.
*/

/* Beispiel: Eigene Farben
.site-header {
    background-color: #your-color;
}
*/

/* ==========================================================================
   CHANGELOG
   ========================================================================== */

/*
Version 1.1.4 (2025-12-12):
- NEU: Vollständige Mobile-Navigation implementiert (Responsive ab 992px)
- NEU: Hamburger-Menu-Button (rot) erscheint auf Mobile/Tablet
- NEU: Mobile-Menü als Dropdown unter Navigation (blauer Hintergrund)
- NEU: Dropdown-Menüs funktionieren auf Mobile (Click auf Pfeil)
- NEU: Automatisches Schließen des Menüs bei Resize auf Desktop
- NEU: Mobile-optimierte Schriftgrößen und Abstände
- VERBESSERT: JavaScript für Touch-Geräte optimiert
- VERBESSERT: Logo-Größe auf Mobile angepasst (180px)

Version 1.1.3 (2025-12-12):
- NEU: Seitentitel-Bereich zwischen Navigation und Content ausgeblendet
- NEU: Page-Header (.page-header, .entry-header, etc.) komplett versteckt
- Lösung für: Blauer Streifen mit Seitentitel wird nicht mehr angezeigt
- Funktioniert auch wenn Elementor "Titel ausblenden" nicht funktioniert
- Mehrere CSS-Selektoren für maximale Kompatibilität

Version 1.1.2 (2025-12-12):
- BUGFIX: MouseOver-Effekt (roter Hintergrund) fehlte bei manchen Navigationspunkten
- NEU: ALLE Navigationspunkte zeigen roten Hintergrund bei Hover (durchgängig)
- NEU: Aktive Elemente behalten roten Hintergrund bei Hover + zeigen Unterstrich
- NEU: Dropdown-Menüs - aktive Elemente mit Hover-Effekt
- NEU: Gescrollte Navigation - alle Links mit rotem Hintergrund bei Hover
- Konsistentes Hover-Verhalten auf allen Navigationsebenen (1-4)

Version 1.1.1 (2025-12-12):
- BUGFIX: Roter Hintergrund der Top-Bar wiederhergestellt (.top-bar background-color)
- NEU: Aktive Navigationspunkte im Pfad haben ROTEN HINTERGRUND
- NEU: Unterstützung für Breadcrumb-Trail (.current-menu-ancestor, .current_page_ancestor)
- Alle Navigationsebenen (1-4) zeigen roten Hintergrund wenn im Pfad der aktiven Seite
- Weiße Links mit Unterstrich-Hover bleiben erhalten (aus v1.1.0)

Version 1.1.0 (2025-12-12):
- NEU: Navigation-Links standardmäßig weiß (#FFFFFF)
- NEU: Weißer Unterstrich bei Hover und aktiven Seiten
- NEU: Dropdown-Menüs ebenfalls weiß gestylt
- Beibehaltung aller Features aus v1.0.9

Version 1.0.9 (2025-12-08):
- BUGFIX: Navigation bleibt BLAU (vorher fälschlicherweise weiß)
- BUGFIX: Doppelter Scroll-to-Top Button entfernt (CSS ::after entfernt)
- Opazität auf 90% reduziert (vorher 95%)
- Header: rgba(44, 79, 107, 0.90) - Primary Blue mit 90%
- Top-Bar: rgba(220, 20, 60, 0.90) - Primary Red mit 90%
- Alle Features von v1.0.8 bleiben erhalten

Version 1.0.8 (2025-12-08):
- NEU: Cubic-Bezier Easing (professionell) für alle Übergänge
- Halbtransparente Navigation (95% Opazität + Blur-Effekt)
- Top-Bar BLEIBT SICHTBAR beim Scrollen (50% kleiner: 5px statt 10px)
- Backdrop-Filter für bessere Lesbarkeit
- Seiteninhalt scheint durch halbtransparenten Header durch
- Alle Transitions: cubic-bezier(0.25, 0.46, 0.45, 0.94)

Version 1.0.7 (2025-12-08):
- NEU: Sticky Header - Header bleibt beim Scrollen sichtbar
- Header verkleinert sich automatisch beim Scrollen um ca. 50%
- Logo reduziert auf 50px Höhe beim Scrollen
- Top-Bar (roter Balken) verschwindet beim Scrollen
- Smooth Transitions für alle Animationen
- Navigation wird kompakter beim Scrollen

Version 1.0.6 (2025-12-08):
- BUGFIX: Doppelte Pfeile in Navigation behoben
- CSS ::after Pfeile deaktiviert (nur JavaScript-Pfeile aktiv)
- Nur noch EIN Pfeil pro Menüpunkt mit Untermenü

Version 1.0.5 (2025-12-08):
- Template-Referenz korrigiert: zeigner-bohrtechnik-theme
- Parent Style Handle aktualisiert

Version 1.0.4 (2025-12-08):
- Überschriften ab h2: Automatischer Abstand nach oben hinzugefügt
- h2: 2em Abstand nach oben
- h3-h6: Gestaffelte Abstände (1.8em bis 1.2em)
- Erste Überschrift im Container: Kein zusätzlicher Abstand

Version 1.0.3 (2025-12-08):
- Font Awesome komplett entfernt
- Alle Icons durch Unicode/Emojis ersetzt
- Scroll-to-Top mit ▲
- Navigation mit ►/▼
- Social Media mit Emojis
- Suchsymbol mit 🔍
- Performance-Verbesserung (270KB weniger)
- Keine externe Abhängigkeiten mehr

Version 1.0.2:
- Dropdown-Menü Pfeile mit Unicode
- Zweite Ebene nach rechts

Version 1.0.1:
- Dropdown-Menü Fix

Version 1.0.0:
- Initial Release
*/

/* ==========================================================================
   13. NAVIGATION STYLING - Weiße Schrift & Unterstrich-Hover
   ========================================================================== */

/* Navigation Links - Weiße Schrift (überschreibt Grau) */
.main-navigation a {
    color: #FFFFFF !important;  /* Weiße Schrift statt Grau */
}

/* Navigation Hover - ROTER HINTERGRUND für ALLE Links */
.main-navigation a:hover {
    color: #FFFFFF !important;              /* Weiß bleiben */
    background-color: #DC143C !important;   /* ROTER HINTERGRUND bei Hover */
    text-decoration: underline;             /* Unterstrich */
    text-decoration-color: #FFFFFF;         /* Weißer Unterstrich */
    text-underline-offset: 4px;             /* Abstand zum Text */
    padding: 8px 15px;                      /* Padding für Hintergrund */
    border-radius: 3px;                     /* Abgerundete Ecken */
}

/* Aktive Seiten im Navigationspfad - ROTER HINTERGRUND */
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-ancestor > a,
.main-navigation li.current_page_ancestor > a,
.main-navigation li.current-menu-parent > a,
.main-navigation li.current_page_parent > a {
    color: #FFFFFF !important;              /* Weiße Schrift */
    background-color: #DC143C !important;   /* ROTER HINTERGRUND (var(--primary-red)) */
    text-decoration: none;                  /* Kein Unterstrich bei aktiven Items */
    padding: 8px 15px;                      /* Etwas Padding für Hintergrund */
    border-radius: 3px;                     /* Leicht abgerundete Ecken */
}

/* HOVER für aktive Navigationspunkte - Roter Hintergrund bleibt */
.main-navigation li.current-menu-item > a:hover,
.main-navigation li.current_page_item > a:hover,
.main-navigation li.current-menu-ancestor > a:hover,
.main-navigation li.current_page_ancestor > a:hover,
.main-navigation li.current-menu-parent > a:hover,
.main-navigation li.current_page_parent > a:hover {
    color: #FFFFFF !important;              /* Weiß bleibt */
    background-color: #DC143C !important;   /* ROTER HINTERGRUND bleibt beim Hover */
    text-decoration: underline;             /* Unterstrich erscheint bei Hover */
    text-decoration-color: #FFFFFF;         /* Weißer Unterstrich */
    text-underline-offset: 4px;
}

/* Dropdown-Menü Links auch weiß */
.main-navigation ul ul a {
    color: #FFFFFF !important;
}

/* Dropdown Hover - ROTER HINTERGRUND für ALLE Dropdown-Links */
.main-navigation ul ul a:hover {
    color: #FFFFFF !important;
    background-color: #DC143C !important;   /* ROTER HINTERGRUND bei Hover */
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
    text-underline-offset: 4px;
    padding: 8px 15px;                      /* Padding für Hintergrund */
    border-radius: 3px;                     /* Abgerundete Ecken */
}

/* Dropdown aktive Elemente - ROTER HINTERGRUND */
.main-navigation ul ul li.current-menu-item > a,
.main-navigation ul ul li.current_page_item > a,
.main-navigation ul ul li.current-menu-ancestor > a,
.main-navigation ul ul li.current_page_ancestor > a {
    color: #FFFFFF !important;
    background-color: #DC143C !important;   /* ROTER HINTERGRUND */
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 3px;
}

/* HOVER für Dropdown aktive Elemente - Roter Hintergrund bleibt */
.main-navigation ul ul li.current-menu-item > a:hover,
.main-navigation ul ul li.current_page_item > a:hover,
.main-navigation ul ul li.current-menu-ancestor > a:hover,
.main-navigation ul ul li.current_page_ancestor > a:hover {
    color: #FFFFFF !important;
    background-color: #DC143C !important;   /* ROTER HINTERGRUND bleibt beim Hover */
    text-decoration: underline;             /* Unterstrich erscheint bei Hover */
    text-decoration-color: #FFFFFF;         /* Weißer Unterstrich */
    text-underline-offset: 4px;
}

/* Navigation beim Scrollen (geschrumpfter Header) */
body.scrolled .main-navigation a {
    color: #FFFFFF !important;
}

body.scrolled .main-navigation a:hover {
    color: #FFFFFF !important;
    background-color: #DC143C !important;   /* ROTER HINTERGRUND bei Hover */
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
    text-underline-offset: 4px;
    padding: 8px 15px;                      /* Padding für Hintergrund */
    border-radius: 3px;
}

/* HOVER für aktive Elemente in gescrollter Navigation */
body.scrolled .main-navigation li.current-menu-item > a:hover,
body.scrolled .main-navigation li.current-menu-ancestor > a:hover {
    color: #FFFFFF !important;
    background-color: #DC143C !important;   /* ROTER HINTERGRUND bleibt */
    text-decoration: underline;             /* Unterstrich bei Hover */
    text-decoration-color: #FFFFFF;
    text-underline-offset: 4px;
}

/* ==========================================================================
   14. PAGE HEADER / SEITENTITEL AUSBLENDEN
   ========================================================================== */

/* Seitentitel-Bereich zwischen Navigation und Content ausblenden */
.page-header,
.entry-header,
.page-title-section,
.hero-section,
.page-hero,
.title-bar,
.content-header,
.breadcrumb-area {
    display: none !important;
}

/* Seitentitel in Artikeln ausblenden */
article .entry-title,
.site-main > header {
    display: none !important;
}

/* Falls der Titel in einem H1-Element im Content steht */
.entry-content > h1:first-child,
.site-content > h1:first-child {
    display: none !important;
}

/* Spezifisch für das Zeigner-Theme (falls vorhanden) */
.page-banner,
.page-heading,
.single-header {
    display: none !important;
}