/* ============================================================
 * brand-overrides.css
 * ------------------------------------------------------------
 * TEMP override sheet — geladen als ALLERLETZTES stylesheet
 * (siehe functions.php: kyl_brand_overrides, prio 9999,
 *  dep auf elementor-frontend). Damit gewinnen diese Regeln
 *  ohne Prio-Kampf. Hier reinschreiben, später sauber ins
 *  Theme/Widget-CSS zurueckfuehren.  (angelegt 2026-07-15)
 * ============================================================ */

/* --- "Neueste Inhalte auf der Website" — Elementor Posts widget --- */
.elementor-widget-posts .elementor-post__title,
.elementor-widget-posts .elementor-post__title a {
    font-family: "Rajdhani", sans-serif !important;
    color: #000 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

/* "/// No Comments"-Meta / Avatar ausblenden */
.elementor-widget-posts .elementor-post-avatar,
.elementor-widget-posts .elementor-post__meta-data {
    display: none !important;
}

.elementor-widget-posts .elementor-post__excerpt p {
    font-family: "Open Sans", sans-serif !important;
    color: #333 !important;
}

/* Thumbnails sauber fuellen statt weiss/leer */
.elementor-widget-posts .elementor-post__thumbnail img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* "Read More" als Brand-Link statt Elementor-Gruen */
.elementor-widget-posts .elementor-post__read-more {
    color: #000 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* --- Landing "Mastering Transformation in Automobility" (page-id-52239) ---
 * Ueberschriften nicht mehr trennen (keine Silbentrennung / kein harter Umbruch) */
body.page-id-52239 h1,
body.page-id-52239 h2,
body.page-id-52239 h3,
body.page-id-52239 h4,
body.page-id-52239 h5,
body.page-id-52239 h6,
body.page-id-52239 .elementor-heading-title {
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
}

/* --- Landing (page-id-52239): "The format" Flip-Box-Kacheln (section c1d10e0) ---
 * Auf Mobile stapeln die 5 Kacheln. Zwei Probleme, beide nur mobil gefixt
 * (Desktop-Reihe bleibt unberuehrt):
 *  1) Der horizontale Column-Gap (margin-right:5px am .elementor-element-populated)
 *     faellt bei der letzten Spalte weg -> letzte Kachel war 5px breiter.
 *  2) Zwischen den gestapelten Kacheln fehlt vertikaler Abstand. */
@media (max-width: 767px) {
    body.page-id-52239 .elementor-element-c1d10e0 .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated {
        margin-right: 0 !important; /* alle Kacheln gleich breit -> letzte nicht mehr breiter */
    }
    body.page-id-52239 .elementor-element-c1d10e0 .elementor-container > .elementor-column:not(:last-child) {
        margin-bottom: 16px !important; /* Abstand zwischen den gestapelten Kacheln */
    }
}

/* --- Landing (page-id-52239): animierte "Journey"-Grafik unter "The format" ---
 * Markup wird per brand-overrides.js in .elementor-element-c1d10e0 injiziert.
 * Voller Container-Breite (bricht als Flex-Item auf eigene Zeile unter die Kacheln). */
.kyl-journey {
    width: 100%;
    margin: 12px auto 0;
}
.kyl-journey svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.kyl-journey__mobile { display: none; }
.kyl-journey__desktop { display: block; }
@media (max-width: 767px) {
    .kyl-journey__desktop { display: none; }
    .kyl-journey__mobile {
        display: block;
        max-width: 200px;
        margin: 0 auto;
    }
}

/* --- GLOBAL: Footer Social-Icons auf Mobile sichtbar machen ---
 * Ursache: .wrapper-middle im Footer (enthaelt eine Text-Nav + die Social-Icons)
 * ist auf Mobile display:none -> Icons erscheinen nicht (Desktop ok).
 * Fix: auf Mobile nur die Social-Icons dieses Wrappers einblenden, zentriert;
 * die Text-Nav im selben Wrapper bleibt ausgeblendet (kein Duplikat zum Akkordeon).
 * Breakpoint 768px = deckt exakt den Bereich ab, in dem der Footer .wrapper-middle
 * selbst versteckt (bis inkl. 768px). */
@media (max-width: 768px) {
    .kyl_footer_plugin .wrapper-middle {
        display: block !important;
    }
    .kyl_footer_plugin .wrapper-middle > .menu > li:not(.icon-social-wrapper) {
        display: none !important;
    }
    .kyl_footer_plugin .wrapper-middle .icon-social-wrapper > .sub-menu {
        display: flex !important;
        justify-content: center !important;
        gap: 22px !important;
        margin: 0 !important;
        padding: 10px 0 24px !important;
    }
    .kyl_footer_plugin .wrapper-middle .icon-social > a {
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
    }
    /* Akzent-Strich (border-left) nur beim Social-Menue entfernen;
     * bei den Text-Menuepunkten bleibt er erhalten. */
    .kyl_footer_plugin .wrapper-middle .icon-social-wrapper > a {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
}