/*
Theme Name: KKSStein-Experience Theme
Theme URI: https://www.kks-stein.de/
Author: Andreas Krieger / KKS-Stein Development Brigade
Author URI: https://www.4K-CGS.de/
Description: Es handelt sich um das Design des KKS Schützenverein Stein, welches in Anlehnung an die KKS eigene App programmiert wurde.
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-layout, responsive, app-feeling
Text Domain: kks-stein-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* =========================================================
   [SPERRZONE 1: BASIS & AVATAR-OVERLAP] - NICHT ÄNDERN
   ========================================================= */
:root {
    --kks-blue: #054582;
    --kks-yellow: #F9BB03;
    --kks-red: #b81015;
    --text-dark: #333333;
    --bg-color: #f8f9fa;
    --font-family: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    padding-bottom: 120px; 
}

/* WASSERZEICHEN / HINTERGRUND-FOTO */
body::before {
    content: "";
    position: fixed; /* Fixiert das Bild im Sichtfenster */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Pfad zu deinem Schießstand-Foto */
    background-image: url('images/KKS-50Meter.jpg'); 
    
    background-size: cover; /* Bild füllt den ganzen Schirm aus */
    background-position: center center;
    background-repeat: no-repeat;
    
    /* Tiefeneffekt & Lesbarkeit */
    filter: grayscale(30%) brightness(1.05) opacity(0.07); 
    /* grayscale: nimmt etwas Farbe raus
       brightness: macht es heller, damit dunkler Text lesbar bleibt
       opacity: 0.07 entspricht 7% Sichtbarkeit – das ist der Schlüssel!
    */
    
    z-index: -1; /* Hinter alle Inhalte legen */
    pointer-events: none; /* Klicks gehen durch das Bild hindurch */
}

.app-floating-logo {
    width: 100px !important; /* Deine gewünschte Breite */
    height: auto !important;
    position: absolute;
    top: 100px !important;
    right: 15px;
    z-index: 9999;
}

.app-slider-container {
    width: 100%;
    height: 250px;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}
/* =========================================================
   [NEU] SWIPER.JS SLIDER STYLING
   ========================================================= */

.kks-app-swiper {
    width: 100%;
    height: 100%; /* Füllt die 250px des .app-slider-container aus */
}

.kks-app-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e2e8f0; /* Leichtes Grau als Lade-Hintergrund */
}

/* Bilder füllen den Slider perfekt aus, ohne sich zu verzerren */
.kks-app-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Styling der kleinen Navigations-Punkte (App-Feeling) */
.kks-app-swiper .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.6;
    width: 10px;
    height: 10px;
}

.app-bar-logo-wrapper {
    position: absolute;
    right: 5%;
    display: flex;
    align-items: center;
    height: 100%;
}

.app-bar-logo-wrapper img {
    height: 60px !important; /* Fixe Höhe für den blauen Balken */
    width: auto !important;
    max-width: 150px; /* Verhindert, dass das Logo in den Titel ragt */
    display: block;
}

/* Erzwingt die Sichtbarkeit des dynamischen Logos */
.app-bar-logo-wrapper img.custom-logo {
    height: 60px !important; /* Hier die Höhe für den Balken */
    width: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Styling für das dynamische WordPress-Logo */
.app-bar-logo-wrapper .custom-logo-link {
    display: block;
    line-height: 0;
}

.app-bar-logo-wrapper .custom-logo {
    height: 65px; /* Deine gewünschte Größe */
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

.app-bar-logo-wrapper .custom-logo:hover {
    transform: scale(1.05);
}

/* Falls kein Logo gesetzt ist (Text-Fallback) */
.logo-fallback {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}

/* Verhindert, dass WordPress Standard-Styles das Logo verstecken */
.custom-logo-link {
    display: block !important;
}

/* 1. Die Navigationsleiste mitrücken, wenn Admin-Bar da ist */
.admin-bar .app-top-nav {
    top: 32px; /* Standardhöhe der WP Admin-Bar */
}

/* =========================================================
   [SPERRZONE 1] HERO SECTION & APP SLIDER (Swiper.js Fix)
   ========================================================= */

/* Die Haupt-Sektion: Startet exakt unter der Navigation */
.app-hero-section {
    position: relative;
    width: 100%;
    margin-top: 85px !important; /* SPERRZONE: Bündig zur Navigation! */
    margin-bottom: 60px; /* Platz nach unten, damit der Avatar atmen kann */
    background-color: #f8f9fa; /* Hintergrund-Fallback */
}

/* Der Käfig für den Slider: Verhindert die Bild-Explosion */
.app-slider-container {
    position: relative;
    width: 100%;
    height: 250px; /* Feste App-Header-Höhe */
    overflow: hidden;
    
    /* FIX: Abgerundete Ecken wurden auf Wunsch entfernt (kantiges Design) */
    border-radius: 0; 
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Leichter Schatten bleibt für die Tiefe */
    
    /* SPERRZONE: Innere Elemente auf 0! */
    margin-top: 0 !important; 
    padding-top: 0 !important;
}

/* WICHTIG: Swiper Bilder an den Käfig anpassen */
.kks-app-swiper {
    width: 100%;
    height: 100%;
    margin-top: 0 !important;
}

.kks-app-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* WICHTIG: Schneidet Riesenbilder perfekt zu, verhindert Explosion! */
    display: block;
}

/* Swiper Pagination (Die kleinen Navigationspunkte) */
.kks-app-swiper .swiper-pagination {
    bottom: 25px !important; 
}

.kks-app-swiper .swiper-pagination-bullet-active {
    background: var(--kks-yellow) !important;
    opacity: 1;
    transform: scale(1.4);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Swiper Pagination (Die kleinen Navigationspunkte) - AUF WUNSCH AUSGEBLENDET */
.kks-app-swiper .swiper-pagination {
    display: none !important; 
}

/* =========================================================
   [SPERRZONE 1] AVATAR OVERLAP
   ========================================================= */
.app-avatar-wrapper {
    position: absolute;
    bottom: -35px; /* SPERRZONE: Ragt exakt 35px nach unten in den Content */
    left: 50%;
    transform: translateX(-50%); /* Exakte horizontale Zentrierung */
    z-index: 100;
}

.app-avatar {
    width: 70px; /* SPERRZONE: Exakt 70px Avatar */
    height: 70px;
    border-radius: 50%;
    border: 4px solid #ffffff; /* Weißer Rand als Trenner */
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    object-fit: cover;
}

/* =========================================================
   [SPERRZONE 1] ADMIN-BAR LOGIK
   ========================================================= */
.admin-bar .app-hero-section {
    margin-top: 85px !important; /* FIX: Gemäß Regelwerk muss dieser Wert auf 85px bleiben! */
}

/* Korrektur für kleine Bildschirme (Admin-Bar wird dort oft höher) */
@media screen and (max-width: 782px) {
    .admin-bar .app-top-nav {
        top: 46px;
    }
}

/* =========================================================
   [SPERRZONE 3] TOP-NAVIGATION SCROLL-MODUS
   ========================================================= */
.app-top-nav {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-top-nav.scrolled {
    background-color: rgba(255, 255, 255, 0.9) !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.app-top-nav.scrolled .app-top-nav-list > li > a {
    height: 50px !important; 
    transform: scale(0.9); 
}

.app-top-nav.scrolled .highlight a i {
    transform: scale(0.85) translateY(5px); 
}


/* =========================================================
   [BEARBEITBAR] DETAILSEITE: INFOZEILE & INHALT
   ========================================================= */

/* 1. Die Haupt-Kachel (Außenhülle) */
.single-post-article-card {
    background: #ffffff !important; 
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); 
    overflow: hidden;
    margin-bottom: 40px;
    border: 1px solid #d1d5db; /* Scharfe Abgrenzung */
}

/* 2. Die kompakte Info-Zeile oben */
.post-meta-inline {
    padding: 15px 25px;
    background-color: #f8fafc; /* Kontrast zum reinweißen Inhalt */
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
}

.post-meta-inline i {
    color: var(--kks-blue);
    font-size: 0.95rem;
}

.meta-data {
    font-weight: 700;
    color: var(--text-dark);
}

.meta-divider {
    margin: 0 10px;
    color: #cbd5e1;
}

/* 3. Inhaltsbereich & Textfluss */
.single-post-content-body {
    padding: 35px;
    line-height: 1.8;
    color: #1a1a1a;
}

.entry-content {
    margin-top: 0;
}

/* Bilder im Beitrags-Inhalt */
.entry-content img, 
.single-post-thumbnail-inline img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e2e8f0;
    padding: 5px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

/* 4. Footer & Zurück-Button */
.single-post-footer {
    border-top: 2px solid #f1f5f9;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    background: #f9f9f9;
    color: var(--kks-blue);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: 0.3s ease;
}

.btn-back:hover {
    background-color: var(--kks-yellow);
    color: var(--kks-blue);
}
/* =========================================================
   [BEARBEITBAR] APP-BAR DETAILANSICHT (Optimiert)
   ========================================================= */

/* 1. APP-FEELING: Weiße Hauptnavigation auf Detailseiten ausblenden! */
body.single .app-top-nav {
    display: none !important;
}

/* 2. Die blaue Leiste wieder als obersten, festklebenden Header definieren */
.app-bar-detail {
    background-color: var(--kks-blue);
    height: 105px; 
    width: 100%;
    
    /* FIX: Klebt wieder fest am oberen Bildschirmrand */
    position: sticky; 
    top: 0; 
    
    /* FIX: Kein störender Abstand mehr nach oben! */
    margin-top: 0 !important; 
    
    z-index: 1000;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    margin-bottom: 50px; 
}

/* Sicherheits-Fix für eingeloggte User (Admin-Bar) */
.admin-bar .app-bar-detail {
    top: 32px; 
}

.app-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative; 
}

/* Avatar Overlap */
.app-bar-avatar-wrapper {
    position: absolute;
    left: 5%;
    bottom: -30px; 
    z-index: 101;
}

.app-avatar-single {
    width: 60px; 
    height: 60px;
    border-radius: 50%;
    border: 4px solid var(--bg-color);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    object-fit: cover;
}

/* Titel in der Mitte */
.app-bar-title {
    flex: 1;
    text-align: center;
    padding: 0 80px; 
}

.app-bar-title h1 {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem; 
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase; 
}

/* Vergrößertes Logo Rechts (85px) */
.app-bar-logo-wrapper {
    position: absolute;
    right: 5%;
    display: flex;
    align-items: center;
    height: 100%; 
}

.app-bar-logo,
.app-bar-logo-wrapper img,
.app-bar-logo-wrapper img.custom-logo {
    height: 85px !important; 
    width: auto !important;
    max-width: 180px; 
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
}

.app-bar-logo-wrapper img:hover {
    transform: scale(1.05);
}

/* =========================================================
   [BEARBEITBAR] DATUM & UHRZEIT (Mit Icons & Klarheit)
   ========================================================= */
.post-meta-clean {
    display: flex;
    gap: 20px;
    padding: 20px 25px;
    background: transparent; 
}

.meta-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 12px; /* Etwas eckiger für modernen Look */
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem; /* Schrift etwas größer */
    font-weight: 700;
    box-shadow: 0 3px 6px rgba(0,0,0,0.06);
    border-left: 3px solid var(--kks-yellow); /* Gelber Akzent passend zum KKS */
}

/* Icons explizit stylen */
.meta-pill i {
    color: var(--kks-blue);
    font-size: 1.1rem; /* Icons deutlich präsenter */
}
/* =========================================================
   [SPERRZONE 2: BEGRÜSSUNG & TRENNER] - NICHT ÄNDERN
   ========================================================= */
.app-welcome-section {
    padding: 10px 5%;
    margin-top: 10px;
    text-align: center; /* Zentriert den Text */
}

.welcome-text-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Zentriert H1 und Icon horizontal */
    gap: 10px;
}

.welcome-text-row h1 {
    font-size: 1.5rem; /* Etwas kleiner für besseren App-Look */
    font-weight: 700;
    color: var(--kks-blue);
    margin: 0;
}

.welcome-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Trenner-Überschrift (Aktuelles) */
.newsSectionHeadingContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 30px 0 20px 0;
    padding: 0 5%;
}

.newsSectionLine {
    flex-grow: 1;
    height: 1px;
    background-color: rgba(5, 69, 130, 0.15);
}

.newsSectionHeading {
    padding: 0 15px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kks-blue);
    text-transform: uppercase;
}

/* =========================================================
   [BEARBEITBARER BEREICH: INHALT & GRID]
   ========================================================= */

/* Pinnwand Container Zentrierung & Breite */
.pinnwand-full-width-container {
    padding: 0 5%;
    max-width: 1300px;
    margin: 0 auto 10px auto;
    box-sizing: border-box;
}

.pinnwand-link-wrapper {
    text-decoration: none;
    display: block;
}

.pinnwand-card {
    border-left: 8px solid var(--kks-red) !important; /* Balken bleibt Rot */
    background: #fff;
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Der Titel-Kasten in GELB */
.pinnwand-badge {
    background: var(--kks-yellow) !important; /* Erzwingt KKS-Gelb */
    color: var(--kks-blue) !important; /* Blaue Schrift */
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Hover-Effekt Pinnwand */
@media (min-width: 1024px) {
    .pinnwand-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
    }
}

/* Haupt-Grid Zentrierung & Breite */
.main-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 10px 5% 40px;
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .main-grid-container {
        grid-template-columns: 2fr 1fr;
    }
}

/* Sidebar Kacheln mit Balken links */
.static-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px 20px 22px 25px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-left: 5px solid var(--kks-blue);
    display: flex;
    flex-direction: column;
}

/* Trenner-Fix für Symmetrie */
.newsSectionHeadingContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1300px;
    margin: 20px auto;
    padding: 0 5%;
    box-sizing: border-box;
}
/* =========================================================
   [BEARBEITBARER BEREICH: SIDEBAR KACHELN]
   ========================================================= */

.sidebar-right {
    display: flex;
    flex-direction: column;
    /* Erhöhter Abstand zwischen den einzelnen Kacheln */
    gap: 25px; 
}

.static-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px 20px 22px 25px;
    
    /* Weicherer, tieferer Schlagschatten für mehr Tiefe */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
    
    /* Akzent-Balken links */
    border-left: 5px solid var(--kks-blue); 
    
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Verstärkter Schatten beim Hover (nur Desktop) */
@media (min-width: 1024px) {
    .static-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }
}

.static-card h4 {
    margin: 0 0 12px 0;
    color: var(--kks-blue);
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.static-card-body {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6; /* Etwas mehr Zeilenabstand für bessere Lesbarkeit */
}

/* =========================================================
   [DETAILSEITE / SINGLE.PHP]
   ========================================================= */

/* Header ohne Slider kürzen */
.app-header.no-slider {
    height: 180px; /* Deutlich kürzer als auf der Startseite */
    background: var(--kks-blue);
    position: relative;
    margin-bottom: 70px; /* Platz für den Avatar-Überhang */
}

/* Meta-Bar für Datum und Zeit */
.post-meta-bar {
    background: #f8f9fa;
    padding: 12px 30px;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
}

.meta-item i {
    color: var(--kks-blue);
    margin-right: 5px;
}

/* Abgrenzung des Inhalts */
.single-post-title {
    margin-top: 10px;
    color: var(--kks-blue);
    font-size: 1.8rem;
    line-height: 1.2;
}

.single-view-header h1 {
    font-size: 1.4rem; /* Etwas kleiner als "Guten Tag" */
    color: var(--kks-blue);
}
/* =========================================================
   [SPERRZONE 3: NAVIGATION] - FINALE TOP-NAV EDITION
   ========================================================= */

/* 1. DIE HAUPTLEISTE (FIXIERT OBEN) */
.app-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px; /* FIX: Höher gemacht (von 70px auf 90px), damit die runden Buttons perfekt reinpassen */
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 9999;
    padding-top: env(safe-area-inset-top);
    border-bottom: 1px solid #eee;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-top-nav-list {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 10px 5px !important;
}

.app-top-nav-list li { 
    position: relative; 
    flex: 1; 
    display: flex !important; 
    justify-content: center !important; 
}

/* 2. DIE RUNDEN HAUPTBUTTONS */
.app-top-nav-list > li > a {
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important; 
    color: #666 !important; 
    width: 64px !important; 
    height: 64px !important;
    border-radius: 50% !important; 
    transition: all 0.3s ease !important;
}

.app-top-nav-list > li > a i { font-size: 1.4rem !important; margin-bottom: 2px !important; }
.app-top-nav-list > li > a span { font-size: 0.62rem !important; font-weight: 700 !important; text-transform: uppercase !important; line-height: 1 !important; }

/* AKTIV-LOGIK (Gelber Kreis für Standard-Buttons) */
.app-top-nav-list li:not(.highlight).current-menu-item > a,
.app-top-nav-list li:not(.highlight).current-menu-ancestor > a {
    background-color: var(--kks-yellow) !important; 
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(249, 187, 3, 0.4) !important;
}

/* 3. HIGHLIGHT-BUTTON (DER SPEZIAL-PUNKT) */
/* Roter Kreis bleibt immer */
.app-top-nav-list li.highlight a i {
    background-color: var(--kks-red) !important; 
    color: #ffffff !important;
    width: 52px !important; 
    height: 52px !important; 
    border-radius: 50% !important;
    display: flex !important; 
    align-items: center; 
    justify-content: center;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    margin-bottom: -15px !important; 
    transition: all 0.3s ease !important;
}

/* Highlight Aktiv-Zustand: Icon (i) und Schrift (span) werden Blau */
.app-top-nav-list li.highlight.current-menu-item > a i,
.app-top-nav-list li.highlight.current-menu-ancestor > a i {
    color: var(--kks-blue) !important;
}

.app-top-nav-list li.highlight.current-menu-item > a span,
.app-top-nav-list li.highlight.current-menu-ancestor > a span {
    color: var(--kks-blue) !important;
    font-weight: 800 !important;
}

.app-top-nav-list li.highlight a span { margin-top: 18px !important; }

/* 4. DIE SICHEL-NAVIGATION (NACH UNTEN) */
.sub-menu {
    position: absolute; 
    top: 32px; 
    left: 50%; 
    transform: translateX(-50%);
    margin: 0; padding: 0; list-style: none; 
    pointer-events: none; opacity: 0;
    transition: opacity 0.3s ease;
}

.app-top-nav-list li:hover .sub-menu {
    opacity: 1; pointer-events: auto; z-index: 10000;
}

.sub-menu li {
    position: absolute !important; 
    top: -32px !important; 
    left: -32px !important;
    width: 64px !important; height: 64px !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translate(0, 0) scale(0); opacity: 0;
}

/* Sichel-Positionen (Nach unten ausfahrend) */
.app-top-nav-list li:hover .sub-menu li:nth-child(1) { transform: translate(0px, 75px) scale(1); opacity: 1; transition-delay: 0.02s; }
.app-top-nav-list li:hover .sub-menu li:nth-child(2) { transform: translate(12px, 145px) scale(1); opacity: 1; transition-delay: 0.05s; }
.app-top-nav-list li:hover .sub-menu li:nth-child(3) { transform: translate(32px, 215px) scale(1); opacity: 1; transition-delay: 0.08s; }
.app-top-nav-list li:hover .sub-menu li:nth-child(4) { transform: translate(60px, 285px) scale(1); opacity: 1; transition-delay: 0.11s; }
.app-top-nav-list li:hover .sub-menu li:nth-child(5) { transform: translate(95px, -355px) scale(1); opacity: 1; transition-delay: 0.14s; }

/* 5. SCHLANKE DYNAMISCHE FANGZONE */
.sub-menu::after {
    content: ''; 
    position: absolute; 
    top: -10px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 250px; 
    height: 400px; 
    pointer-events: auto; 
    z-index: -1; 
    clip-path: polygon(48% 0%, 52% 0%, 100% 80%, 20% 80%);
}

.sub-menu li a {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    justify-content: center !important; width: 64px !important; height: 64px !important;
    border-radius: 50% !important; background-color: #ffffff !important;
    color: var(--kks-blue) !important; border: 2px solid var(--kks-blue) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;
}

.sub-menu li.current-menu-item a {
    background-color: var(--kks-yellow) !important;
    border-color: var(--kks-yellow) !important;
    color: #ffffff !important;
}

/* =========================================================
   [SPERRZONE 3 - FIX] SCROLL-SPERRE FÜR DETAILSEITEN
   ========================================================= */
/* Auf der Single-Page wird die .scrolled-Klasse optisch komplett neutralisiert */

body.single .app-top-nav,
body.single .app-top-nav.scrolled {
    height: 90px !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    padding-top: env(safe-area-inset-top) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* Das Logo bleibt ebenfalls starr auf 90px */
body.single .app-top-nav.scrolled .nav-overlap-logo {
    top: 10px !important;
}

body.single .app-top-nav.scrolled .nav-overlap-logo img {
    width: 90px !important;
    height: 90px !important;
}

/* =========================================================
   [NEU] DAS ÜBERLAPPENDE LOGO IN DER NAV (FIXIERT)
   ========================================================= */

.nav-overlap-logo {
    position: absolute;
    right: 20px;
    top: 10px; 
    z-index: 10005;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-overlap-logo img {
    width: 90px !important;
    height: 90px !important;
    /* FIX: Alle Rahmen, Schatten und weißen Hintergründe entfernt */
    background: transparent !important; 
    border: none !important; 
    border-radius: 0 !important; 
    box-shadow: none !important; 
    object-fit: contain !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* =========================================================
   [NEU] SCROLL-ZUSTAND DER NAVIGATION (.scrolled)
   ========================================================= */

/* Die Leiste wird kompakter beim Scrollen */
.app-top-nav.scrolled {
    background-color: rgba(255, 255, 255, 0.9) !important;
    height: 65px !important; /* Leiste schrumpft leicht (angepasst an die neue 90px Basis) */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* Logo-Konter-Bewegung beim Scrollen */
.app-top-nav.scrolled .nav-overlap-logo {
    top: 5px; 
}

.app-top-nav.scrolled .nav-overlap-logo img {
    width: 75px !important; /* Logo schrumpft synchron mit */
    height: 75px !important;
}

/* Admin-Bar Interaktion für eingeloggte User */
.admin-bar .nav-overlap-logo {
    top: 42px; /* 10px + 32px WP Admin-Bar */
}
.admin-bar .app-top-nav.scrolled .nav-overlap-logo {
    top: 37px; /* 5px + 32px WP Admin-Bar */
}


/* =========================================================
   [BEARBEITBAR] INDEX-SEITE: NEWS-KACHELN
   ========================================================= */

.news-card-tile {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #d1d5db; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.news-card-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.news-tile-header {
    padding: 20px 25px 10px 25px;
}

.news-tile-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--kks-blue);
    font-weight: 800;
}

/* Hier nutzen wir die Meta-Zeile, die wir schon für die Single.php haben */
.news-card-tile .post-meta-inline {
    background-color: #f8fafc;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #475569;
}

.news-tile-body {
    padding: 20px 25px 25px 25px;
    line-height: 1.6;
    color: #333;
}

.news-tile-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   [NEU] EINHEITLICHES BUTTON-DESIGN & NEWS-KACHELN
   ========================================================= */

/* 1. Der leichte Weiterlesen-Button (Pinnwand & News) */
.kks-btn-light, 
.more-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 6px 18px;
    background-color: #054582; /* KKS-Blau */
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 20px; /* Pill-Shape für Leichtigkeit */
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

/* Hover-Effekt für die Buttons */
.kks-btn-light:hover, 
.more-link:hover {
    background-color: #F9BB03; /* KKS-Gelb */
    color: #054582 !important;
    transform: translateX(3px); /* Sanfter Schub nach rechts */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 2. Die News-Kacheln (News-Tiles) */
/* Die Duplikate wurden hier zu einem sauberen Design zusammengeführt */
.news-card-tile {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.news-card-tile:hover {
    border-color: #cbd5e1;
}

/* Header innerhalb der Kachel */
.news-tile-header h3 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
}

.news-tile-header a {
    text-decoration: none;
    color: #054582;
}

/* Beitragsbild in der Kachel */
.news-tile-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Textbereich in der Kachel */
.news-tile-body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334155;
}

/* Spezielle Korrektur für die Pinnwand-Card - Rahmen entfernt */
.pinnwand-card {
    border-radius: 12px;
    border: 1px solid #e2e8f0; /* Gleicher dezenter Rahmen wie bei den anderen Kacheln */
    background: #ffffff;
    padding: 25px; /* Etwas mehr Platz für den Inhalt */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Gleicher Schatten wie News-Tiles */
}

/* Badge (Titel) innerhalb der Pinnwand etwas schöner */
.pinnwand-badge {
    color: #054582;
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* Kopf-Navigation in der Detailansicht */
.single-post-header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 20px;
    width: 100%;
}

.nav-button-wrapper {
    flex: 1; /* Gibt allen drei Bereichen den gleichen Platz */
    display: flex;
}

/* Spezial-Anpassung für die Nav-Buttons */
.nav-btn {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    min-width: 80px;
}

.nav-button-wrapper.left { justify-content: flex-start; }
.nav-button-wrapper.center { justify-content: center; }
.nav-button-wrapper.right { justify-content: flex-end; }

/* Kompaktes Button-Design für den Kopf */
.single-post-header-nav .nav-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
    min-width: 40px;
    white-space: nowrap;
}

/* Mobile Optimierung */
@media (max-width: 480px) {
    .single-post-header-nav .btn-text {
        display: none; /* Nur Icons auf kleinen Handys */
    }
    .single-post-header-nav .nav-btn {
        padding: 8px 12px;
    }
}

/* =========================================================
   [SPERRZONE 3 - MOBILE FIX] MICRO-ADJUSTING FÜR SMARTPHONES
   ========================================================= */
@media (max-width: 768px) {
    /* 1. Navigations-Liste nach rechts schieben */
    .app-top-nav-list {
        justify-content: flex-end !important;
        gap: 5px !important;
        padding-left: 65px !important; /* Schutzraum für das Logo links */
        padding-right: 10px !important;
    }

    /* 2. Logo als kleines "Branding-Badge" absolut links pinnen */
    .nav-overlap-logo {
        right: auto !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Logo auf Smartphone-Größe reduzieren */
    .nav-overlap-logo img {
        width: 45px !important;
        height: 45px !important;
    }

    /* 3. Menüpunkte verkleinern und zusammenrücken */
    .app-top-nav-list > li > a {
        width: 50px !important;
        height: 50px !important;
    }

    .app-top-nav-list > li > a i {
        font-size: 1.1rem !important;
    }

    /* 4. Den roten Highlight-Button anpassen */
    .app-top-nav-list li.highlight a i {
        width: 42px !important;
        height: 42px !important;
        margin-bottom: -10px !important; /* Ragt weiterhin leicht nach unten raus */
    }

    .app-top-nav-list li.highlight a span {
        margin-top: 14px !important;
    }
}

/* =========================================================
   [NEU] FRONTEND PROFIL-SEITE (APP-FEELING)
   ========================================================= */
.kks-profil-container {
    max-width: 500px;
    margin: 40px auto;
    padding: 0 5%;
}

.kks-profil-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 5px solid var(--kks-blue);
    padding: 30px;
    text-align: center;
}

.kks-profil-header {
    margin-bottom: 30px;
}

.kks-profil-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px auto;
    border: 4px solid #f8f9fa;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: block;
}

.kks-profil-avatar.fallback-icon {
    background: var(--kks-blue);
    color: var(--kks-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.kks-profil-header h3 {
    color: var(--kks-blue);
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 5px 0;
}

.kks-profil-email {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* Der Logout-Button in KKS-Rot */
.kks-btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--kks-red);
    color: #ffffff !important;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.kks-btn-logout:hover {
    background-color: #8a0c10;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(184, 16, 21, 0.3);
}

/* =========================================================
   STYLING DES NATIVEN WP-LOGIN-FORMULARS
   ========================================================= */
.kks-profil-login-form .login-username,
.kks-profil-login-form .login-password {
    text-align: left;
    margin-bottom: 15px;
}

.kks-profil-login-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
}

.kks-profil-login-form input[type="text"],
.kks-profil-login-form input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f8f9fa;
    box-sizing: border-box;
    font-family: var(--font-family);
    transition: border-color 0.3s ease;
}

.kks-profil-login-form input[type="text"]:focus,
.kks-profil-login-form input[type="password"]:focus {
    border-color: var(--kks-blue);
    outline: none;
    background: #fff;
}

.kks-profil-login-form .login-remember {
    text-align: left;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 20px;
}

.kks-profil-login-form .login-submit input {
    width: 100%;
    background-color: var(--kks-blue);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kks-profil-login-form .login-submit input:hover {
    background-color: var(--kks-yellow);
    color: var(--kks-blue);
}

/* =========================================================
   PROFILSEITE: METADATEN (DATUM/UHRZEIT) AUSBLENDEN
   ========================================================= */
body.page-profil .post-meta-inline,
body.pagename-profil .post-meta-inline,
body.page-profil .post-meta-clean,
body.pagename-profil .post-meta-clean,
body.page-profil .post-meta-bar,
body.pagename-profil .post-meta-bar {
    display: none !important;
}