/**
 * Beitragsnavigation (Elementor Pro "Post Navigation"-Widget, unten auf
 * jeder Projekte-Einzelseite): Vorheriges/nächstes Projekt.
 *
 * Ursache (live nachgewiesen): Elementor setzt für
 * ".elementor-post-navigation .elementor-post-navigation__link" fest
 * "white-space: nowrap; text-overflow: ellipsis; width: calc(50% - .5px)"
 * (widget-post-navigation.min.css) – auf schmalen Viewports nebeneinander
 * ergibt das für längere Projekttitel (z.B. "My Private Spa x München")
 * nur wenige Zeichen Platz, der Rest wird mit "…" abgeschnitten und beide
 * Titel rücken eng zusammen – nicht mehr unterscheidbar, was "zurück" und
 * was "weiter" ist (Kunden-Feedback).
 *
 * Die Titel selbst ("post-navigation__prev--title" / "...--next--title")
 * haben in widget-post-navigation.min.css zusätzlich eine EIGENE, separate
 * Regel ("overflow:hidden;text-overflow:ellipsis") – unabhängig vom
 * äußeren ".elementor-post-navigation__link". Beide müssen überschrieben
 * werden, sonst bleibt der Text trotz breiterem Container abgeschnitten.
 *
 * WICHTIG zu !important: ohne Browser-DevTools auf einem echten iOS-Gerät
 * ist die tatsächliche Ladereihenfolge unserer Datei relativ zu
 * widget-post-navigation.min.css nicht zuverlässig von hier aus prüfbar
 * (ein direkter Live-Test mit dynamisch eingefügtem <style> gewinnt in
 * JEDEM Browser automatisch, unabhängig von der echten Ladereihenfolge –
 * das hat beim ersten Versuch eine falsche Sicherheit vermittelt: in
 * Chrome sah es korrekt aus, auf einem echten iPhone/Safari blieb der
 * Container aber schmal, siehe Kunden-Screenshot). Deshalb hier bewusst
 * mit !important gearbeitet statt auf gleiche Spezifität + Ladereihenfolge
 * zu vertrauen.
 */
@media ( max-width: 1024px ) {

    .elementor-post-navigation {
        flex-direction: column !important;
    }

    .elementor-post-navigation .elementor-post-navigation__link {
        flex: 0 0 100% !important;
        width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .elementor-post-navigation .post-navigation__prev--title,
    .elementor-post-navigation .post-navigation__next--title {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .elementor-post-navigation .elementor-post-navigation__link__next,
    .elementor-post-navigation .elementor-post-navigation__link__prev {
        overflow: visible !important;
    }

    /* "Nächstes Projekt": volle Breite + rechtsbündig, damit der Titel
       direkt am (bereits rechts sitzenden) Pfeil endet statt mittig zu
       stehen. */
    .elementor-post-navigation .elementor-post-navigation__link__next {
        width: 100% !important;
    }

    .elementor-post-navigation .post-navigation__next--title {
        width: 100% !important;
        text-align: right !important;
    }

    /* Pfeil oben am Titel ausrichten statt vertikal über die ganze Höhe zu
       zentrieren: sobald der Titel auf zwei Zeilen umbricht, hängt der
       Pfeil sonst optisch zwischen den beiden Zeilen (live vom Kunden
       gemeldet, Elementor setzt hier von sich aus kein align-items – der
       Browser-Standard "stretch/center" zentriert den Pfeil dadurch über
       die volle, jetzt zweizeilige Höhe). */
    .elementor-post-navigation .elementor-post-navigation__prev a,
    .elementor-post-navigation .elementor-post-navigation__next a {
        align-items: flex-start !important;
    }
}