/*
 Theme Name: SEOtologie Child Theme
 Theme URI: https://seotologie.de/
 Description: Child Theme für Astra – optimiert für Barrierefreiheit, Performance, Rechtssicherheit und einheitliches Corporate Design.
 Author: Peter
 Author URI: https://seotologie.de/
 Template: astra
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: seotologie-child
*/


/* Sticky Header */
#masthead {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    min-height: 60px;
    height: 60px;
    transition: box-shadow 0.2s, min-height 0.2s, height 0.2s;
}

/* Header-Suchfeld */
.header-searchform {
    display: flex;
    align-items: center;
    margin-left: 24px;
}
.header-searchinput {
    padding: 6px 32px 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    transition: border 0.2s;
}
.header-searchinput:focus {
    border: 1.5px solid #0057b8;
    outline: none;
}
.header-searchicon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* Logo-Abstand */
.brand-link {
    display: inline-block;
    margin-top: 12px;
    margin-bottom: 12px;
}
.brand-link img {
    display: block;
    margin: 0;
}

/* Astra Identity */
.ast-site-identity {
    min-width: 180px;
}

.ast-breadcrumbs-wrapper,
.ast-breadcrumbs-inner,
.ast-breadcrumbs {
    display: flex;
    align-items: center;
    min-height: 36px;
}

.ast-breadcrumbs {
    flex-wrap: wrap;
    font-size: 0.95rem;
    padding: 6px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ast-breadcrumbs .trail-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.ast-breadcrumbs .trail-item {
    white-space: normal;
    word-break: break-word;
    max-width: 90vw;
}

.ast-breadcrumbs .trail-separator {
    font-size: 1em;
    margin: 0 2px;
}

/* ==========================================================================
   Animationen (Lichtstrahl-Effekt) - GEZIELT & STABIL
   ========================================================================== */

/* Verhindert, dass die Animation den Bildschirm sprengt */
.ast-custom-button, 
.ast-scroll-top, 
.entry-content figure a {
    position: relative;
    overflow: hidden; /* WICHTIG: Begrenzt die Animation auf das Element */
    display: inline-block;
}

/* Der Lichtstrahl-Effekt selbst */
.ast-custom-button::before,
.ast-scroll-top::before,
.entry-content figure a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Startet sicher außerhalb */
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.4) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 10;
}

/* Animation triggern bei Hover */
.ast-custom-button:hover::before,
.ast-scroll-top:hover::before,
.entry-content figure a:hover::before {
    animation: light-stripe-optimized 0.7s ease-in-out;
}

@keyframes light-stripe-optimized {
    0% { left: -100%; }
    100% { left: 150%; }
}

/* ==========================================================================
   Links & Bilder-Schutz (Fix für Startseite)
   ========================================================================== */

/* Normale Text-Links: NUR Farbe, KEINE Animation */
.entry-content a:not(figure a):not(.ast-custom-button) {
    color: #0057b8;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none !important; /* Fix für flächige Animationen */
}

.entry-content a:not(figure a):not(.ast-custom-button):hover {
    color: #75151e;
    text-decoration: none;
}

/* Bilder-Fix: Nur Bilder INNERHALB von Artikeln animieren */
/* Die Startseite (Archive/Grid) bleibt so unberührt */
.single-post .entry-content figure a img,
.page .entry-content figure a img {
    transition: transform 0.3s ease;
}

.single-post .entry-content figure a:hover img,
.page .entry-content figure a:hover img {
    transform: scale(1.02); /* Leichter Zoom-Effekt zusätzlich zum Licht */
}

/* Verhindert Rahmen/Verschiebungen auf der Startseite */
.ast-article-inner img {
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}
/* TOC-Container */
.lwptoc {
    display: block !important;
    width: 100% !important;
    background: #f3f3f3;
    padding: 1.5rem;
    border-radius: 0;
    border: 1px solid #c0c0c0;
    box-sizing: border-box;
    margin: 2rem 0;
}

/* Innerer Container */
.lwptoc .lwptoc_i {
    background: transparent !important;
}

/* Listenpunkte im TOC */
.lwptoc ul,
.lwptoc ol {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style-type: none !important;
}

/* Globale Absätze */
p {
    margin: 0 0 18px 0;
    line-height: 1.65;
}

/* Globale Überschriften */
h1 {
    margin-top: 0 !important;
    margin-bottom: 24px;
    line-height: 1.0;
    font-size: 1.5rem !important;
    font-weight: 600;
}
h2 {
    font-size: 1.3rem !important;
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: 1rem;
    font-weight: 500;
    color: #0057b8;
}

h3 {
    font-size: 1.1rem !important;
    margin-top: 28px;
    margin-bottom: 10px;
    font-weight: 500;
    color: #69e9e9;
}
h4 {
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Globale Listen */
ul, ol {
    margin: 0 0 20px 0;
    padding-left: 22px;
}
li {
    margin-bottom: 6px;
}

/* Globale Tabellen */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 16px;
}
table th,
table td {
    border: 1px solid #ccc;
    padding: 10px 12px;
    text-align: left;
}
table th {
    background: #f5f5f5;
    font-weight: 600;
}

/* Globale Links */
a {
    color: #0057b8;
    text-decoration: underline;
    transition: color 0.2s;
}
a:hover,
a:focus {
    color: #75151e;
    text-decoration: none;
}

/* Subheader */
.subheader {
    background-color: #0057b8 !important;
    color: #ffffff !important;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
}

/* Bilder – Lichtstrahl-Effekt */
.entry-content figure a,
.entry-content .wp-block-image a,
/* Links optisch stabilisieren – Astra-kompatibel */
.entry-content a {
    line-height: inherit;          /* gleiche Zeilenhöhe wie der Text */
    vertical-align: baseline;      /* verhindert Hochstellung */
    text-underline-offset: 2px;    /* moderne, saubere Unterstreichung */
    text-decoration-thickness: 1px;
}

.entry-content a:hover,
.entry-content a:focus {
    border-bottom-color: transparent;
}

.entry-content figure a > img,
.entry-content .wp-block-image a > img,
.entry-content a > img {
    position: relative;
    z-index: 1;
    display: block;
}
.entry-content figure a::before,
.entry-content .wp-block-image a::before,
.entry-content a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 2;
    opacity: 0.7;
    display: none;
}
.entry-content figure a:hover::before,
.entry-content .wp-block-image a:hover::before,
.entry-content a:hover::before {
    display: block;
    animation: light-stripe-img 0.8s linear;
}

/* Beitragsbilder */
.wp-post-image {
    position: relative;
    overflow: hidden;
    z-index: 1;
    object-fit: cover !important;
    aspect-ratio: auto !important;
}
.wp-post-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 2;
    opacity: 0.7;
}
.wp-post-image:hover::before {
    animation: light-stripe-img 0.8s linear;
}

/* Keyframes für Bilder */
@keyframes light-stripe-img {
    0% { left: -75%; }
    100% { left: 120%; }
}

/* Abschnittstrenner */
.impressum-section {
    padding: 18px 0;
    border-bottom: 1px solid #eee;
}

/* Kontaktbox */
.impressum-contact {
    background: #D5DDDA;
    border-left: 4px solid #008080;
    padding: 16px;
    margin: 15px 0;
    border-radius: 4px;
    font-style: normal;
    line-height: 1.6;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .impressum-content {
        padding: 15px;
    }
    .impressum-contact a {
        display: inline-block;
        padding: 10px 0;
    }
}
/* Footer-Listen */
#colophon .footer-widget-area ul,
#colophon .footer-widget-area ol {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
#colophon .footer-widget-area li {
    margin-left: 0;
    padding-left: 0;
}

/* Footer-Farben */
#colophon,
#colophon a,
#colophon p,
#colophon li,
#colophon span {
    color: #d5ddda !important;
}
#colophon a {
    text-decoration: underline;
}
#colophon a:hover,
#colophon a:focus {
    color: #fff !important;
    text-decoration: none;
}
.custom-404 {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 20px;
}

.custom-404-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: left;
}

.custom-404-intro {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.custom-404-searchblock {
    margin-bottom: 40px;
}

.custom-404-searchform {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.custom-404-searchinputwrap {
    position: relative;
    flex: 1;
}

.custom-404-searchinput {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.custom-404-searchicon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.custom-404-searchbutton {
    background: #0057b8;
    color: #fff;
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}
.custom-404-searchbutton:hover {
    background: #004a9c;
}

.custom-404-actions ul,
.custom-404-reasons ul {
    margin-left: 20px;
}

.custom-404-actions li,
.custom-404-reasons li {
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .custom-404-searchform {
        flex-direction: column;
        align-items: stretch;
    }
    .custom-404-searchbutton {
        width: 100%;
    }
    .custom-404-title {
        font-size: 3rem;
    }
}
/* Fokus-Styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
a:focus {
    outline: 3px solid rgba(0, 128, 128, 0.3);
    outline-offset: 2px;
}

/* Hilfsklassen */
.text-green { color: #2e7d32; }
.bg-green { background-color: #2e7d32; }

.wpforms-error {
    color: #b00020;
    margin-top: 8px;
    font-size: 0.9rem;
}

/* Schrift-Ladeverhalten */
@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto/Roboto-Regular.woff2') format('woff2'),
         url('font/Roboto/Roboto-Regular.woff') format('woff');
    font-display: swap;
}

@media print {
    nav,
    .site-footer,
    .borlabs-cookie-box,
    .ast-scroll-top,
    #borlabs-cookie-box {
        display: none !important;
    }
    body {
        color: #000;
        background: #fff;
    }
}
/* Verhindert das Ausbrechen langer URLs im Impressum */
.legal-link {
    word-wrap: break-word;          /* Klassischer Umbruch */
    overflow-wrap: break-word;      /* Moderner Standard */
    word-break: break-all;          /* Erzwingt Umbruch an jeder Stelle (falls nötig) */
    display: inline-block;          /* Verbessert das Klick-Verhalten auf Mobilgeräten */
    max-width: 100%;                /* Stellt sicher, dass er nie breiter als der Textblock ist */
    text-decoration: underline;     /* Klassische UX: Links als solche erkennbar machen */


}

/* Container für Adresse und Bild */
.impressum-wrapper {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf Handys */
    gap: 20px;
    align-items: stretch; /* Sorgt dafür, dass beide Boxen theoretisch gleich hoch sind */
    margin-bottom: 25px;
}

/* Die graue Box (angepasst an dein Screenshot-Design) */
.impressum-box {
    background-color: #f1f3f2; /* Das Grau aus deinem Screenshot */
    padding: 20px;
    border-left: 4px solid #1c6360; /* Der grüne Akzentstreifen */
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    min-width: 280px;
}

/* Der Bild-Container */
.impressum-photo-container {
    flex: 0 0 auto;
    display: flex;
}

.impressum-photo-container img {
    width: 160px; /* Breite des Bildes */
    height: 100%; /* Füllt die Höhe der Adressbox aus */
    object-fit: cover; /* Verhindert Verzerrung */
    border-radius: 4px;
    display: block;
}

/* Mobile Ansicht: Bild über oder unter dem Text */
@media (max-width: 600px) {
    .impressum-wrapper {
        flex-direction: column;
    }
    .impressum-photo-container img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }
}
/* ==========================================================================
   RADIKALER ABSTANDS-FIX & HINTERGRUND (STARTSEITE)
   ========================================================================== */

/* 1. Hintergrund-Bereinigung: Entfernt alle grauen Flächen hinter den Karten */
.blog, .archive, .site-content, 
.ast-separate-container, 
.ast-separate-container #primary, 
.ast-separate-container .ast-article-post, 
.ast-separate-container .ast-article-inner {
    background-color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. Bild-Container: Verringert den Abstand unter dem Bild */
.ast-blog-featured-section {
    margin-bottom: 8px !important; /* Standard ist oft 20px+ */
    padding-top: 10px !important;
    display: flex !important;
    justify-content: center !important;
}

/* 3. Kategorie (z.B. "Allgemein"): Zieht sie näher an das Bild und den Titel */
.ast-blog-single-element.ast-taxonomy-container {
    margin-top: 0 !important;
    margin-bottom: 4px !important; /* Minimale Lücke zum Titel */
    line-height: 1 !important;
}

/* 4. Titel: Zieht die Überschrift radikal nach oben */
.entry-content .entry-title, 
.ast-blog-single-element.ast-blog-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 8px !important; /* Abstand zum Datum/Text darunter */
}

.ast-blog-single-element.ast-blog-title a {
    font-size: 1.25rem !important; /* Optional: Etwas kleiner, damit es kompakter wirkt */
    line-height: 1.2 !important;
    display: block;
}

/* 5. Bild-Rahmen & Zoom (bleibt erhalten) */
.ast-article-inner .wp-post-image, 
.ast-article-inner img {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    transition: transform 0.3s ease-in-out !important;
}

.ast-article-post:hover .wp-post-image,
.ast-article-post:hover img {
    transform: scale(1.04) !important;
}