/**
 * Theme Name: Eichi Grid Theme Styles
 * Beschreibung: Haupt-CSS für das Eichi Grid Theme. Enthält Variablen, Typografie und Fullscreen Navigation.
 */

/* ------------------ 1. CSS CUSTOM PROPERTIES (Variablen) ------------------- */

:root {
    /* Farben */
    --color-primary: #d8b200; /* Gold/Senfgelb */
    --color-secondary: #c3950f; /* Akzentfarbe */
    --color-background: #3c3c3c; /* Dunkelgrauer Hintergrund */
    --color-text-light: #f8f9fa; /* Heller Text */
    --color-text-dark: #212529; 
    --color-border: rgba(255, 255, 255, 0.1);

    /* Abstände (Spacing) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    /* Typografie - NEU: SYSTEM-SCHRIFTEN (KEINE LADUNG ERFORDERLICH) */
    --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 
    --font-size-base: 1rem;
    --border-radius-base: 4px;
}


/* Stellt sicher, dass die Hintergrundfarbe des Browsers abgedeckt wird */
html {
    background-color: var(--color-background); /* Ihre Standard-Hintergrundfarbe */
}


/* ------------------ 2. RESET & BASIS STYLES ------------------- */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    color: var(--color-text-light);
 
    
    /* Wichtig: Entfernt alle Height/Min-Height-Beschränkungen */
    height: auto; 
    min-height: auto; 
    
    /* Stellt sicher, dass die Standard-Hintergrundfarbe durchscheint,
       wenn der Gradient vorbei ist (was aber durch das html-Tag jetzt abgedeckt ist) */
    background-color: transparent; 
    /* Fallback-Farbe, falls der Gradient nicht funktioniert (Standardfarbe) */
    background-color: var(--color-background);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.menu-active {
    overflow: hidden;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-secondary);
}


/* Defines the full-width layout for the main content area */
.grid-container.grid-full-width {
    /* Use CSS Grid on the container */
    display: grid;
    
    /* Define a single column that takes 1 fractional unit (i.e., 100% width) */
    grid-template-columns: 1fr; 
    
    /* Ensure the content area (#content) spans the full width. 
       Note: If #page is the grid container, #content is likely a direct child grid-item. */
}

/* Optional: Since #content is defined as grid-item in your header.php, 
   we ensure it occupies the single defined grid column. */
#content.grid-item {
    grid-column: 1 / 1; 
    width: 100%;
}

/* ------------------ 3. FONT FACE INTEGRATION & TYPOGRAFIE ------------------- */


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--color-primary); 
    line-height: 1.2;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    font-weight: 700; 
}


/* ------------------ 4. FULLSCREEN BURGER NAVIGATION (RECHTS) ------------------- */

/* Grundlegende Icon-Platzierung (Container, fixiert rechts oben) */
.icon-wrapper {
    position: fixed;
    z-index: 1002;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    left: auto; 
    max-width: none;
    margin: 0;
    display: block; 
    padding: 0;
}

.icon-wrapper > div {
    pointer-events: auto;
}

/* Das Burger-Menü muss Klicks empfangen, da es fixed/absolute ist */
.icon-wrapper,
.icon-wrapper .burger-button {
    pointer-events: auto;
    z-index: 1002; /* Behält den hohen z-index */
}

/* Basis-Styling für Burger-Icon */
#burger-menu {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#burger-menu button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    transition: transform 0.3s ease-in-out;
}

/* HOVER EFFEKT: Leichte Drehbewegung beim Überfahren */
#burger-menu button:hover {
    transform: rotate(-10deg); 
}

.icon-svg {
    width: 30px;
    height: 30px;
    fill: var(--color-primary); 
    transition: fill 0.3s ease-in-out;
}

/* Hover-Effekt: Icon-Farbe wird Dunkelgrau */
#burger-menu button:hover .icon-svg {
    fill: var(--color-background); 
}

/* --- BURGER-MENÜ SPEZIFISCHE STYLES --- */

/* Burger-Striche (Linien) */
.burger-button .line {
    stroke: var(--color-primary); 
    stroke-width: 3; /* DICKE LINIE */
    stroke-linecap: round;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), stroke 0.3s ease-in-out;
}

/* Geöffnet Zustand: Linienfarbe wird Dunkelgrau */
.burger-button.open .line {
    stroke: var(--color-background); 
}

/* FIX: ALLE STRIICHE BLEIBEN IM GEÖFFNETEN ZUSTAND GLEICH LANG */
.burger-button.open .line:nth-child(1),
.burger-button.open .line:nth-child(2),
.burger-button.open .line:nth-child(3) {
    transform: none; 
}


/* -------------------------------------------------------------------------- */
/* --- FULLSCREEN-MENÜ OVERLAY --- */
/* -------------------------------------------------------------------------- */

.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Höhe 90vh (bestimmt durch den tiefsten Punkt: unten links) */
    height: 90vh; 
	    background: var(--color-primary); 



    display: flex;
    align-items: center;
    justify-content: center;
    
    transform: translateY(-100vh); 
transition: transform 0.7s ease-in-out;
    z-index: 999;
    overflow: hidden; 

    /* NEU: CLIP-PATH FÜR DIE GEWÜNSCHTE PARALLELOGRAMM-FORM */
    /* Alle Prozentangaben beziehen sich auf die 90vh Höhe */
    clip-path: polygon(
        /* 1. Oben links: 20vh (relativ zu 90vh: 11.11%) */
        0% 22.22%, 
        /* 2. Oben rechts: 10vh (relativ zu 90vh: 0%) */
        100% 0%, 
        /* 3. Unten rechts: 80vh (relativ zu 90vh: 88.88%) */
        100% 77.78%, 
        /* 4. Unten links: 90vh (relativ zu 90vh: 100%) */
        0% 100%
    );
}

.fullscreen-menu.open {
    transform: translateY(0); 
}


/* Navigation im Fullscreen-Menü */
.fullscreen-menu nav {
    text-align: center;
    width: 100%;
    /* Scrollbar bei Überlauf der Liste */
    overflow-y: auto; 
    overflow-x: hidden; 
}

.fullscreen-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    
    /* FIX: Erzwingt, dass die Elemente oben beginnen */
    justify-content: flex-start; 
    
    /* Puffer oben und unten stark reduziert für maximale Platzausnutzung */
    padding-top: 10vh; /* Genug Puffer für das Icon */
    padding-bottom: 5vh;
    
    /* WICHTIG: Erlaubt dem ul-Container zu schrumpfen und zu wachsen */
    height: auto; 
    min-height: auto; 
    flex-grow: 0; 
}

.fullscreen-menu nav ul li {
    /* Kleiner, aber fester vertikaler Margin */
    margin: 1vh 0; 
    
    /* Responsive Schriftgröße */
    font-size: clamp(24px, 4vw, 50px); 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 1; 
}

.fullscreen-menu nav ul li a {
    /* Feste Textfarbe auf Dunkelgrau */
    color: #3c3c3c; 
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    
    /* Typografie-Anpassungen */
    font-family: var(--font-family-heading); 
    letter-spacing: 1px;
    padding: 0 10px; 
    position: relative; 
    display: inline-block;
}

/* --- HOVER EFFEKT: UNTERSTRICH --- */

.fullscreen-menu nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -3px; 
    left: 0;
    width: 100%;
    height: 2px; 
    /* Feste Farbe für den Strich, damit er auf dem Gold sichtbar ist */
    background: #3c3c3c; 
    
    transform: scaleX(0); 
    transform-origin: left; 
    /* Langsame Geschwindigkeit */
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1); 
}

.fullscreen-menu nav ul li a:hover::after {
    transform: scaleX(1); 
}

.fullscreen-menu nav ul li a:hover {
    color: var(--color-background); 
}

/* Submenü-Indikatoren (Plus/Minus) */
.fullscreen-menu nav ul li.has-submenu > a::after {
    content: '+';
    font-size: 24px;
    margin-left: 10px;
    color: #3c3c3c; 
    transition: transform 0.3s ease-in-out;
}

.fullscreen-menu nav ul li.has-submenu.open > a::after {
    content: '-';
}

/* Versteckt das Submenü standardmäßig */
.fullscreen-menu nav ul li ul {
    display: none; 
}


/* Mobile Ansicht */
@media screen and (max-width: 768px) {
    .icon-wrapper {
        top: var(--spacing-md); 
        right: var(--spacing-sm); 
    }
}

/* ------------------ 5. CONTENT LAYOUT BASIS (Gestapelt) ------------------- */

.grid-container {
    display: block; 
    max-width: 1400px;
    margin: 0 auto;
     padding: var(--spacing-lg); /* Mehr Platz für Desktop/Tablet */
}

.site-header, .site-content, .widget-area, .site-footer {
    width: 100%;
    margin-bottom: var(--spacing-md); 
}

.site-header {
    padding: var(--spacing-lg); /* Auch hier mehr Platz */
    position: relative; 
    z-index: 10;
}



/* ---------------------------------------------------- */
/* ANPASSUNG FÜR KLEINE BILDSCHIRME (Mobile) */
/* ---------------------------------------------------- */
@media screen and (max-width: 768px) {
    .grid-container {
        /* Nutzen Sie hier den mittleren Abstand, um einen sichtbaren Rahmen
           um den Content zu schaffen (typischerweise 1rem bis 1.5rem). */
        padding: var(--spacing-lg); 
        
        /* FALLS spacing-md IMMER NOCH ZU GROSS IST, verwenden Sie einen festen Wert: */
        /* padding: 1rem; */
    }

    /* Das Header-Padding kann separat etwas kleiner sein, aber muss auch sichtbar bleiben */
    .site-header {
        /* Beispiel: Etwas kleiner als der Content, aber nicht zu nah am Rand */
        padding: var(--spacing-lg); 
    }
}



/* ------------------ 6. SYNCHRONISIERTE SOCIAL/KONTAKT-OVERLAY ------------------- */

.social-contact-overlay {
    position: fixed;
    z-index: 1000; /* Muss über dem Seiteninhalt, aber unter dem Menü liegen */
    bottom: var(--spacing-xl); /* Abstand vom unteren Rand */
    right: var(--spacing-xl);  /* Abstand vom rechten Rand */
    
    display: flex;
    flex-direction: column; /* Icons vertikal anordnen */
    align-items: flex-end; /* Rechtsbündige Ausrichtung */
    
    opacity: 0; /* Standardmäßig ausgeblendet */
    pointer-events: none; /* Klicks ignorieren, wenn ausgeblendet */

    /* WICHTIG: Nutzt die gleiche Dauer wie das Menü (0.7s) */
    transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
    
    /* Verschiebt die Elemente initial leicht aus dem Viewport */
    transform: translateY(20px); 
}

/* WENN DAS MENÜ GEÖFFNET WIRD: Einblenden und zurückschieben */
.fullscreen-menu.open + .social-contact-overlay {
    opacity: 1;
    pointer-events: auto; /* Klicks erlauben, wenn sichtbar */
    transform: translateY(0); /* Zurück zur ursprünglichen Position */
}

/* Styling der Links/Icons */
.social-contact-overlay a {
    color: var(--color-text-light); /* Dunkelgraue Icons */
    margin-top: var(--spacing-sm); 
    font-size: 1.5rem; /* Icon-Größe */
    display: block;
    transition: color 0.3s ease;
}

.social-contact-overlay a:hover {
    color: var(--color-primary); /* Akzentfarbe beim Hover */
}

/* Styling für die Telefonnummer */
.social-contact-overlay .phone-number {
    font-family: var(--font-family-body);
    font-size: 1rem;
    color: var(--color-text-light); /* Textfarbe */
    margin-top: var(--spacing-sm); 
    font-weight: 700;
}

/* ---------------------------------------------------- */
/* RESPONSIVE ANPASSUNGEN FÜR KLEINE BILDSCHIRME (MOBILE) */
/* ---------------------------------------------------- */

@media screen and (max-width: 768px) {
    
    /* 1. Positionierung an den Burger-Button anpassen */
    .social-contact-overlay {
        /* Setzt es oben links, um Platz für den Menü-Button zu machen,
           der oft oben rechts ist. Wenn der Burger-Button oben links ist,
           passe dies entsprechend an. (Hier: Oben rechts, Burger links) */
        
        /* Beispiel: Rechtsbündig, aber mit geringerem Abstand (wie der Burger) */
        right: var(--spacing-md); /* Kleinerer Abstand für Mobile (z.B. 1.5rem) */
        top: auto; /* Vertikale Positionierung aufheben */
        bottom: var(--spacing-md); /* An den oberen Rand setzen (oder wo der Burger NICHT ist) */
        
        /* Icons horizontal anordnen (z.B. in der oberen Leiste) */
        flex-direction: row; 
        align-items: center; 
    }
    
    /* 2. Styling der Links/Icons (horizontaler Abstand) */
    .social-contact-overlay a {
        margin-top: 0; /* Vertikalen Abstand entfernen */
        margin-right: var(--spacing-sm); /* Horizontalen Abstand zwischen den Icons */
        font-size: 1.3rem; /* Etwas kleiner für Mobile */
    }
    
    /* 3. Telefonnummer-Text ausblenden, um Platz zu sparen */
    .social-contact-overlay .phone-number {
        display: none; 
    }
    
    /* 4. Nur Instagram und Facebook nebeneinander (falls du sie gruppieren möchtest) */
    /* Du musst deinen HTML-Code wie folgt ändern, um dies zu gruppieren:
       <div class="social-icons-mobile">
           <a href="...">...</a>
           <a href="...">...</a>
       </div>
       <a href="tel:...">...</a>
    */
    
    /* Falls die Telefonnummer (mit dem mobilen Icon) bleiben soll, aber alle horizontal: */
    .social-contact-overlay a,
    .social-contact-overlay .phone-number {
        margin-left: var(--spacing-sm);
        margin-right: 0;
    }
}




.footer-widgets-area {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; /* 3 gleich breite Spalten */
    gap: 20px; /* Abstand zwischen den Spalten (passen Sie diesen Wert an) */
    padding-bottom: 30px; /* Abstand zur Copyright-Zeile */
    padding-top: 30px;
	margin-top: 0px;
	align-items: start; 
	border-top: none;
}

@media (max-width: 768px) {
    .footer-widgets-area {
        grid-template-columns: 1fr; /* Nur eine Spalte auf Mobile */
        text-align: center;
    }
}

/* Styling für die Rechtliche Spalte (3. Spalte) */
.footer-column.footer-legal {
    /* Setzt den Text und die Elemente innerhalb dieser Spalte rechtsbündig */
    text-align: right; 
}

.footer-column.footer-legal .legal-list {
    /* 1. Entfernt die Aufzählungszeichen */
    list-style: none;
    /* 2. Entfernt standardmäßigen Browser-Padding */
    padding-left: 0; 
    /* 3. Stellt sicher, dass die Liste selbst rechtsbündig im Container steht */
    margin-right: 0; 
}

/* Anpassung für Mobile: Auf kleinen Bildschirmen zentrieren wir wieder */
@media (max-width: 768px) {
    .footer-column.footer-legal,
    .footer-column.footer-legal h4 {
        text-align: center;
    }
}

/* Styling für das Navigations-Menü (2. Spalte) */
.footer-column.footer-menu-primary {
    /* Auf Desktop zentrieren, falls der Titel zentriert ist */
    text-align: center;
}

.footer-menu-list {
    /* 1. Entfernt die Standard-Listenpunkte */
    list-style: none;
    padding-left: 0;
    
    /* 2. Aktiviert Flexbox für die horizontale Anordnung der Listenelemente */
    display: flex;
    justify-content: center; /* Zentriert die Menüpunkte horizontal im Container */
    flex-wrap: wrap; /* Erlaubt das Umbrechen auf neue Zeilen bei wenig Platz */
}

.footer-menu-list li {
    /* Fügt Abstand zwischen den horizontalen Menüpunkten hinzu */
    margin: 0 10px; 
}

/* Optional: Korrigiert die Zentrierung auf Mobile, falls gewünscht */
@media (max-width: 768px) {
    .footer-column.footer-menu-primary {
        text-align: center;
    }
}

/* 1. Entfernt den oberen Abstand der Haupt-Footer-Navigationsliste */
.footer-column .footer-menu-list {
    margin-top: 0;
}

/* 2. Entfernt den oberen Abstand der rechtlichen Links */
.footer-column .legal-list {
    margin-top: 0;
}

/* OPTIONAL: Fügt einen einheitlichen Abstand nach unten für alle Spalten hinzu */
.footer-column {
    padding-top: 0; /* Stellt sicher, dass die Spalte selbst oben bündig ist */
}

/* Zentriert den Text in der Copyright-Zeile */
.site-info {
    text-align: center; 
    padding: 15px 0 30px; /* Fügt etwas vertikalen Abstand hinzu */
    /* Optional: Füge eine leichte obere Linie hinzu, um den Copyright-Bereich abzugrenzen */
    /* border-top: 1px solid #ddd; */ 
}

/* ------------------------------------------------------------------ */
/* STYLING FÜR DAS KLEINE FOOTER-LOGO IN DER MITTLEREN SPALTE */
/* ------------------------------------------------------------------ */

.footer-logo {
    /* 1. Zentriert den Inhalt (das Logo-Bild ist ein Inline-Element) */
    text-align: center;
    /* 2. Fügt etwas Abstand unter dem Logo hinzu */
    margin-bottom: 35px; 
}

/* Zielt auf das Custom Logo-Bild innerhalb des Footer-Logo-Containers ab */
.footer-logo .custom-logo,
.footer-logo img {
    /* Begrenzt die maximale Breite des Logos auf 100px */
    max-width: 200px; 
    height: auto;
    /* Setzt das Logo als Block-Element (hilfreich für zentrierte Bilder) */
    display: block; 
    /* Wenn display: block; verwendet wird, muss auto-margin zentrieren */
    margin-left: auto;
    margin-right: auto;
	margin-top: 0px;
}

/* Wir setzen den oberen Margin der Listen wieder auf 0, falls die h4-Entfernung 
   den Margin an anderer Stelle verursacht hat, damit alles bündig ist. */
.footer-column .footer-menu-list {
    margin-top: 0; 
}


/* ---------------------------------------------------- */
/* FOOTER MOTO ÜBERLAGERUNG */
/* ---------------------------------------------------- */

.footer-moto-overlay {
    /* Setzt den Text in die Mitte des Containers */
    text-align: center;
    
    /* Stellt sicher, dass das Overlay die volle Breite hat */
    width: 100%;
	margin-top: 200px;
}

.footer-moto-overlay span {
    /* Die Helle Textfarbe, die Sie im Footer verwenden */
    color: var(--color-text-dark); 
    opacity: 0.5;
    
    /* Hintergrundfarbe des Footers, um die Trennlinie zu verdecken */
    background-color: var(--color-background-dark); 
    padding: 0 20px; 
    
    /* Responsive Schriftgröße mit clamp() */
    /* Skaliert von min. 1.5rem bis max. 4rem */
    font-size: clamp(1.5rem, 5vw, 6rem); 
    
    /* Andere Text-Eigenschaften */
    font-family: var(--font-family-heading); /* Falls gewünscht */
    font-weight: 200;
    text-transform: lowercase;
    letter-spacing: 0.1em;
}

/* Anpassung für kleine Bildschirme */
@media screen and (max-width: 768px) {
    .footer-moto-overlay {
        /* Text auf Mobilgeräten nicht zu weit nach oben ziehen */
        margin-bottom: -30px; 
    }
    .footer-moto-overlay span {
        top: -10px; 
    }
}



#page-wrapper.blur-content-wrapper {
     /* Opazität zur Verdunkelung beibehalten */
    opacity: 0.1; 
    
    /* NEU: Verringert die Farbsättigung auf 80% (oder mehr/weniger) */
    /* 1 (oder 100%) wäre komplett Schwarz-Weiß */
    filter: grayscale(0.8); 
    
    /* Fügt eine Übergangs-Animation hinzu, damit der Effekt sanft erscheint */
    transition: opacity 0.3s ease-out, filter 0.3s ease-out; /* Übergang für beide Eigenschaften! */
    
    /* Deaktiviert die Interaktion mit dem gedimmten Inhalt */
    pointer-events: none;
    
    /* Wichtig für die Anwendung von Filtern auf Containern (erzwingt einen eigenen Stapelkontext) */
    transform: translateZ(0); 
}

/* Rückgängig machen, wenn die Klasse NICHT aktiv ist */
#page-wrapper {
    opacity: 1;
    transition: opacity 0.3s ease-out; 
    pointer-events: auto;
}


/* ------------------ 9. BLOG / BEITRAGS-VORSCHAU STYLING ------------------- */

/* ------------------ 9.1. Gezieltes Styling für den Bild-Container (KORREKTUR V4: Erweitertes Pseudo-Element) --- */

/* Annahme: Der Container, der das Vorschaubild (img) umschließt. */
.post-thumbnail, .entry-image-wrapper {
    position: relative; 
    width: 100%; 
    height: auto; 
    margin-bottom: var(--spacing-md); 
    padding: 0; 
    overflow: visible; /* Wichtig, damit das Pseudo-Element über den Rand ragen kann */
    
    /* Optionale Abrundung für den äußeren Container, falls das Bild selbst abgerundet sein soll */
    /* border-radius: var(--border-radius-base); */
}

/* --- Das Pseudo-Element erzeugt den gelben, schrägen Hintergrund --- */
.post-thumbnail::before, .entry-image-wrapper::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1; /* Muss hinter dem Bild (img) liegen */
    
    background-color: var(--color-primary); /* Gelber Hintergrund */
    
    /* 1. OFFSETS DES GELBEN HINTERGRUNDS (basierend auf Ihrem Beispielbild) */
    /* Verschiebung nach unten, um oben einen transparenten Bereich zu haben */
    top: 35px; 
    /* Verschiebung nach links, um links einen gelben Überstand zu haben */
    left: -25px; 
    /* Lässt den gelben Hintergrund unten überstehen */
    bottom: -50px; 
    /* Lässt den gelben Hintergrund rechts überstehen */
    right: 25px; 
    
    /* 2. KONISCHER EFFEKT (nur für das gelbe Pseudo-Element) */
    /* Dies erzeugt die gewünschte Schräge von unten links nach oben rechts */
    clip-path: polygon(
        0% 20%,     /* Oben links: Startpunkt auf der linken Seite, aber 20% von oben (ergibt die Schräge oben) */
        100% 0%,    /* Oben rechts: Startpunkt auf der rechten Seite, ganz oben */
        100% 100%,  /* Unten rechts: Ganz unten rechts */
        0% 100%     /* Unten links: Ganz unten links (ergibt die Schräge rechts) */
    );
    
    /* Um die Schräge genau wie im Bild zu treffen, müssen die Werte ggf. noch feinjustiert werden.
       Der untere linke Punkt kann auch so definiert werden: z.B. 0% 80% für eine Schräge links unten */
    
    /* ALTERNATIVE clip-path (mehr wie eine schräge Ebene): */
    /* clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%); */
    /* Oder für eine gleichmäßigere Neigung (rechts unten beginnt höher): */
    clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
    
    /* Oder, um das gezeigte Bild genauer zu treffen (untere Linie ist leicht schräg): */
    /* polygon(0 20%, 100% 0%, 100% 100%, 0% 90%) - Dies erzeugt die schräge UNTEN links */
    /* Um genau Ihr Bild zu treffen, müssen die unteren Punkte wahrscheinlich angepasst werden: */
    /* Der untere Rand scheint von links oben nach rechts unten leicht anzusteigen */
    clip-path: polygon(
        0% 20%,    /* Oben links (20% von der Oberkante des Pseudo-Elements) */
        100% 0%,   /* Oben rechts (oben bündig mit dem Pseudo-Element) */
        100% 100%, /* Unten rechts (unten bündig mit dem Pseudo-Element) */
        0% 90%     /* Unten links (80% von der Oberkante des Pseudo-Elements, für die Schräge) */
    );
}

/* --- Das eigentliche Bild muss über dem Pseudo-Element liegen (Z-Index) --- */
.post-thumbnail img, .entry-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    position: relative; 
    z-index: 2; 
    border-radius: 0; 
    
    /* NEU: BASIS-STYLING FÜR BILD-FILTER */
    filter: saturate(0.45) !important; /* Entsättigt das Bild standardmäßig auf 50% */
    transition: filter 0.5s ease-in-out; /* Sanfter Übergang von 0.5 Sekunden */
}

/* NEU: HOVER-EFFEKT FÜR DAS BILD */
.post-thumbnail:hover img, .entry-image-wrapper:hover img {
    filter: saturate(1) !important; /* Sättigung auf 100% bei Hover */
}




/* -------------------------------------------------------------------------- */


/* --- 9.2. Styling des Beitrags-Textes (Zurücksetzen) --- */

/* Wir stellen sicher, dass der Rest des Beitrags wieder in der Standardfarbe erscheint */
.entry-card, .post {
    background-color: transparent; /* Entfernt den globalen gelben Hintergrund */
    padding: 0; /* Entfernt unnötiges Padding, falls nur das Bild Padding braucht */
    color: var(--color-text-light); /* Textfarbe wie Standard-Theme */
    margin-bottom: var(--spacing-lg); 
}


/* --- 9.3. Styling für den "Weiterlesen"-Button (Beibehalten) --- */

.wp-block-post-excerpt__more-link {
    /* Der Link muss als Block-Element behandelt werden, um Padding und Margin zu erhalten */
    display: inline-block;
    
    /* Margin-Top von mindestens 25px, wie gewünscht */
    margin: 25px 0; 
    
    /* Visuelles Styling */
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: none;
    color: var(--color-text-light);
    
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    border-radius: 0;
    border: 2px solid var(--color-text-light);
    
    /* Übergang für den Hoover-Effekt */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* --- LÄSSIGER HOVER EFFEKT --- */

.wp-block-post-excerpt__more-link:hover {
    background-color: transparent; /* Hier scheint der Haupt-Hintergrund (dunkelgrau) durch */
    color: var(--color-primary); /* Goldener Text */
    transform: translateY(-2px); 
    border-color: var(--color-primary); /* Option: Goldener Rand */
}




/* ------------------ 10. EINZELNER BLOG-BEITRAG (SINGLE POST STYLING) ------------------- */

/* --- 10.1. Haupt-Container (z.B. #primary oder .site-main) --- */

/* Zentriert den Content und setzt eine maximale Breite für bessere Lesbarkeit */
.single .entry-content,
.single .post-content,
.single-post .entry-content {
    max-width: 900px; /* Breite für den Lesefluss */
    margin-left: auto;
    margin-right: auto;
    padding: var(--spacing-lg) 0;
}

/* --- 10.2. Titel & Meta-Daten --- */

.entry-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg) 0;
    
    /* Optionale Trennlinie */
    /* border-bottom: 2px solid var(--color-primary); */
}

.entry-title {
    /* Größerer, prominenter Titel */
    font-size: clamp(2.5rem, 5vw, 4rem); 
    color: var(--color-text-light); /* Heller Text für den Titel */
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
}

.entry-meta {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6); /* Leicht gedimmter Text */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.entry-meta a {
    color: var(--color-primary); /* Goldene Links in den Meta-Daten */
}


/* --- 10.3. Inhalt (Text und Elemente) --- */

/* Stellt sicher, dass die Textfarbe konsistent hell bleibt */
.entry-content p, 
.entry-content li,
.entry-content blockquote {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

/* Zitate hervorheben */
.entry-content blockquote {
    border-left: 5px solid var(--color-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    font-style: italic;
    background-color: rgba(216, 178, 0, 0.05); /* Sehr leichter goldener Hintergrund */
}

/* Horizontale Linien im Text */
.entry-content hr {
    border: none;
    border-top: 1px dashed var(--color-border);
    margin: var(--spacing-xl) 0;
}

/* --- 10.4. Featured Image / Cover-Bild --- */

/* Das Cover-Bild auf der Einzelansicht */
.post-thumbnail-single {
    width: 100%;
    max-width: 1200px; /* Optional: Bild breiter machen als Text-Container */
    margin: 0 auto var(--spacing-xl);
    display: block;
    
    /* Wenn Sie hier den konischen Effekt NICHT wünschen: */
    /* clip-path: none; */ 
}


/* --- 10.5. Kommentarbereich --- */

#comments {
    max-width: 900px;
    margin: var(--spacing-xl) auto;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

#comments h2 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

/* Hintergrund für die Kommentarfelder (Formularelemente) */
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    padding: var(--spacing-sm);
    width: 100%;
    margin-bottom: var(--spacing-md);
}

/* Styling des Submit-Buttons (Weiterführung des "Weiterlesen"-Buttons) */
#comments input[type="submit"] {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md); 
    background-color: var(--color-primary); /* Gelber Hintergrund */
    color: var(--color-text-dark); /* Dunkler Text auf Gelb */
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-base);
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

#comments input[type="submit"]:hover {
    background-color: var(--color-background); /* Dunkler Hintergrund */
    color: var(--color-primary); /* Goldener Text */
    border-color: var(--color-background);
}




/* -------------------------------------------------------------------------- */

/* ------------------ 11. SINGLE POST: FEATURED IMAGE STYLING ------------------- */

/* Annahme: Der Container, der das Titelbild auf der Einzelansicht umschließt. */
.post-thumbnail-single, 
.single-post .entry-content .post-thumbnail {
    /* 1. Reset und Vorbereitung für das Pseudo-Element */
    position: relative; 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto var(--spacing-xl);
    padding: 0; 
    overflow: visible; 
}

/* --- Das Pseudo-Element erzeugt den verschobenen, gelben Hintergrund (Konisch) --- */
.post-thumbnail-single::before, 
.single-post .entry-content .post-thumbnail::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1; /* Muss hinter dem Bild (img) liegen */
    
    background-color: var(--color-primary); /* Gelber Hintergrund */
    
    /* 2. OFFSETS DES GELBEN HINTERGRUNDS (Wie im Listing-View) */
    /* Verschiebung nach unten (oben transparent) */
    top: 25px; 
    /* Links Überstand */
    left: -20px; 
    /* Unten Überstand */
    bottom: -30px; 
    /* Rechts Überstand */
    right: -20px; 
    
    /* 3. KONISCHER EFFEKT (Gleicher Look wie auf der Übersichtsseite) */
    clip-path: polygon(
        0% 20%,    /* Oben links */
        100% 0%,   /* Oben rechts */
        100% 100%, /* Unten rechts */
        0% 80%     /* Unten links (erzeugt die Schräge) */
    );
}

/* --- Das eigentliche Bild muss über dem Pseudo-Element liegen --- */
.post-thumbnail-single img, 
.single-post .entry-content .post-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    position: relative; 
    z-index: 2; 
    border-radius: 0; 
    
    /* Hover-Effekt ist auf der Einzelansicht optional, hier entfernt */
    filter: none; 
    transition: none; 
}

/* -------------------------------------------------------------------------- */