/*
Theme Name: Flexblog Child
Template: flexblog
Theme URI: http://infinitythemes.ge/flex-blog/
Author: Infinity-Themes
Author URI: http://themeforest.net/user/infinity-themes
Description: Flexblog Child Theme
Version: 1.7.1
License: See in Zip Package
License URI: See in Zip Package
Tags: left-sidebar, right-sidebar, post-formats, theme-options, translation-ready
Text Domain: flexblog
*/


/**
 * ----------------------------------------------------------------------------------------
 * Theme customization Starts Here
 * ----------------------------------------------------------------------------------------
 */
/* =========================================================
   1. TYPOGRAFIE
   ========================================================= */

/* Überschriften in Beiträgen linksbündig */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    text-align: left !important;
}

/* H2-Größe im Beitragsinhalt */
.entry-content h2 {
    font-size: 25px !important;
}

/* Schriftart für Überschriften und Zitate */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body h1 a,
body h2 a,
body h3 a,
body h4 a,
body h5 a,
body h6 a,
body .wp-block-quote,
body .wp-block-quote p,
body .wp-block-quote strong {
    font-family: "Arvo", serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}


/* =========================================================
   2. BEITRAGSINHALT
   ========================================================= */

/* Fließtext in Beiträgen und Seiten linksbündig
   – außer Seite 24 */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote,
.page:not(.page-id-24) .entry-content > p,
.page:not(.page-id-24) .entry-content > ul,
.page:not(.page-id-24) .entry-content > ol,
.page:not(.page-id-24) .entry-content > blockquote {
    text-align: left !important;
}

/* Anrisstexte auf Startseite, Archiven und Suche zentrieren */
.home .entry-content p,
.archive .entry-content p,
.search .entry-content p {
    text-align: center !important;
}


/* =========================================================
   3. SIDEBAR – NEUESTE BEITRÄGE
   ========================================================= */

/* Darstellung der neuesten Beiträge */
.main-sidebar .widget_recent_entries li {
    line-height: 16px !important;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
}

/* Zeilenhöhe der Links */
#recent-posts-6.widget_recent_entries li a {
    line-height: 1.25 !important;
}

/* Nur die ersten fünf Beiträge anzeigen */
.main-sidebar .widget_recent_entries li:nth-child(n+6) {
    display: none;
}


/* =========================================================
   4. HAUPTMENÜ / SUCHE
   ========================================================= */

/* Suchfunktion im Hauptmenü vollständig ausblenden */
.header-bottom .search-btn,
.fixed-header-bottom .search-btn,
.header-search-wrap {
    display: none !important;
}


/* =========================================================
   5. MOBILE SCHNELLNAVIGATION
   ========================================================= */

@media only screen and (max-width: 768px) {

    .header-bottom > .center-width,
    .fixed-header-bottom > .center-width {
        height: 60px;
        display: flex;
        align-items: center;
    }

    /* Burger-Menü */
    .header-bottom .nav-btn,
    .fixed-header-bottom .nav-btn {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        flex: 0 0 auto;
        width: 28px;
        margin-right: 12px;
        line-height: 60px;
    }

    /* Navigation */
    .header-bottom .nav,
    .fixed-header-bottom .nav {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1;
    }

    .header-bottom .nav > ul,
    .fixed-header-bottom .nav > ul {
        display: flex !important;
        align-items: center;
        gap: 10px;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap;
    }

    /* Standardmäßig alle Menüpunkte ausblenden */
    .header-bottom .nav > ul > li,
    .fixed-header-bottom .nav > ul > li {
        display: none !important;
    }

    /* Nur die ersten vier Menüpunkte anzeigen */
    .header-bottom .nav > ul > li:nth-child(-n+4),
    .fixed-header-bottom .nav > ul > li:nth-child(-n+4) {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Menülinks */
    .header-bottom .nav > ul > li > a,
    .fixed-header-bottom .nav > ul > li > a {
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0 !important;
        line-height: 60px !important;
        padding: 0 2px !important;
    }

    /* Trenner entfernen */
    .header-bottom .nav > ul > li::after,
    .fixed-header-bottom .nav > ul > li::after {
        display: none !important;
    }

    /* Untermenüs ausblenden */
    .header-bottom .nav .sub-menu,
    .fixed-header-bottom .nav .sub-menu {
        display: none !important;
    }
}


/* =========================================================
   6. MOBILES TOP-MENÜ
   ========================================================= */

@media only screen and (max-width: 768px) {

    /* Top-Leiste */
    .header-top {
        display: block !important;
        height: 38px !important;
        padding: 0 10px !important;
    }

    .header-top .center-width {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        height: 38px;
        width: 100%;
        margin: 0;
    }

    /* Top-Navigation */
    .header-top .top-nav {
        position: static !important;
        display: block !important;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .header-top .top-nav > ul {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        margin: 0;
        padding: 0;
    }

    /* Alle Top-Menüpunkte ausblenden */
    .header-top .top-nav > ul > li {
        display: none !important;
        margin: 0;
        padding: 0;
    }

    /* Nur Datenschutz und Impressum anzeigen */
    .header-top .top-nav > ul > li:nth-child(1),
    .header-top .top-nav > ul > li:nth-child(2) {
        display: block !important;
    }

    .header-top .top-nav > ul > li > a {
        display: block;
        padding: 0;
        margin: 0;
        line-height: 38px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    /* Untermenüs und Zusatzfunktionen ausblenden */
    .header-top .sub-menu,
    .header-social,
    .random-btn,
    .sidebar-btn,
    .search-btn {
        display: none !important;
    }
}


/* =========================================================
   7. LOGO MOBIL
   ========================================================= */

@media only screen and (max-width: 768px) {

    .logo {
        text-align: center !important;
        margin: 0 auto !important;
    }

    .logo img {
        display: block !important;
        height: 200px !important;
        width: auto !important;
        max-height: 200px !important;
        margin: 0 auto !important;
    }
}


/* =========================================================
   8. BREADCRUMBS
   ========================================================= */

/* Groß-/Kleinschreibung beibehalten */
.infinity-breadcrumbs li strong {
    text-transform: none !important;
}


/* =========================================================
   9. BILDUNTERSCHRIFTEN
   ========================================================= */

.wp-block-image figcaption,
.wp-caption-text,
.gallery-caption,
.featured-image-caption {
    margin: 12px 0 30px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    text-align: center;
    font-style: normal;
    font-weight: 400;
}


/* =========================================================
   10. COVER-BLÖCKE
   ========================================================= */

/* Text im Cover-Block weiß */
.wp-block-cover p,
.wp-block-cover li {
    color: #fff !important;
}


/* =========================================================
   11. TRENNLINIEN
   ========================================================= */

.entry-content hr.wp-block-separator {
    width: 70%;
    max-width: none;
    height: 2px;
    margin: 30px auto;
    border: 0;
    background-color: #ccc;
    opacity: 1;
}


/* =========================================================
   12. RELATED POSTS
   ========================================================= */

/* Inhalte zentrieren */
.related-posts section {
    text-align: center;
}

.related-posts section h4 {
    margin-top: 12px;
}

.related-posts section .post-date {
    display: block;
    margin-top: 6px;
}

/* Abstand zwischen Kommentaren und Related Posts */
.single-post .related-posts {
    margin-top: 30px !important;
}


/* =========================================================
   13. ÜBERSCHRIFTEN MOBIL
   ========================================================= */

@media only screen and (max-width: 768px) {

    .home h1.post-title,
    .archive h1.post-title,
    .search h1.post-title {
        font-size: 23px;
        line-height: 1.2;
    }
}


/* =========================================================
   14. READ-MORE-BUTTON
   ========================================================= */

/* Read More beim ersten Artikel ausblenden */
body:not(.single-post) article:first-of-type .read-more {
    display: none !important;
}


/* =========================================================
   15. CAROUSEL
   ========================================================= */

/* Carousel-Überschrift Desktop */
.infinity-carousel .carousel-title,
.infinity-carousel .carousel-title a {
    font-size: 40px !important;
    line-height: 1.25 !important;
}

/* Carousel-Überschrift Mobil */
@media only screen and (max-width: 768px) {

    .infinity-carousel .carousel-title,
    .infinity-carousel .carousel-title a {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }
}

/* Dunkles Overlay */
.infinity-carousel .container {
    background-color: rgba(1, 1, 1, 0.60) !important;
}

/* Overlay beim Darüberfahren etwas heller */
.infinity-carousel .container:hover {
    background-color: rgba(1, 1, 1, 0.40) !important;
}

/* Nur die Pfeilsymbole verkleinern */
.infinity-carousel .carousel-prev::before,
.infinity-carousel .carousel-next::before {
    font-size: 30px !important;
}
/* Carousel-Punkte über das Bild legen */
.carousel {
    position: relative !important;
}
/* Carousel-Punkte über das Bild legen */
.slick-slider {
    position: relative !important;
}
/* Mobil: Artikel → Paginierung → Sidebar-Widgets */
@media screen and (max-width: 979px) {

    .main-container-outer {
        display: flex;
        flex-direction: column;
    }

    .main-container-inner {
        display: contents;
    }

    .main-container {
        order: 1;
    }

    .main-container-outer > .infinity-pagination {
        display: block !important;
        order: 2;
        width: 100%;
        margin-top: 0px;
        margin-bottom: 0;
    }

    .infinity-pagination .numbered-list {
        display: block !important;
    }

    .main-sidebar-wrap {
        order: 3;
    }

    .main-container-inner > .clear {
        display: none;
    }
}
.wp-block-cover .wp-block-cover__background.has-background-dim {
    background-color: #201813 !important;
    opacity: 0.45 !important;
}

/* =========================================================
   16. PUZZLE HAMSTER – NEUE STARTSEITE
   ========================================================= */

.ph-homepage {
    padding: 34px 0 70px;
    background: #fff;
}

.ph-homepage__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   Aufmacher
   --------------------------------------------------------- */

.ph-home-featured {
    margin-bottom: 48px;
}

.ph-home-hero {
    min-width: 0;
}

.ph-home-hero--main {
    margin-bottom: 22px;
    background: #fff;
}

.ph-home-hero__image-link,
.ph-home-hero__link {
    display: block;
    color: inherit !important;
    text-decoration: none !important;
}

.ph-home-hero__media {
    display: block;
    width: 100%;
    overflow: hidden;
    background: #fff;
    line-height: 0;
}

.ph-home-hero__image {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transition: transform 0.35s ease;
}

.ph-home-hero__image-link:hover .ph-home-hero__image,
.ph-home-hero__image-link:focus .ph-home-hero__image,
.ph-home-hero__link:hover .ph-home-hero__image,
.ph-home-hero__link:focus .ph-home-hero__image {
    transform: scale(1.015);
}

/* Hauptaufmacher: Dachzeile, Titel und Excerpt unter dem Bild. */
.ph-home-hero-main__body {
    padding: 17px 4px 4px;
    text-align: center;
}

.ph-home-hero-main__kicker {
    margin: 0 0 8px;
    color: #bf7918;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ph-home-hero-main__title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Arvo", serif !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.ph-home-hero-main__title a {
    color: #2c3338 !important;
    text-decoration: none !important;
}

.ph-home-hero-main__title a:hover,
.ph-home-hero-main__title a:focus {
    color: #bf7918 !important;
}

.ph-home-hero-main__excerpt {
    max-width: 720px;
    margin: 13px auto 0 !important;
    color: #555;
    font-size: 16px;
    line-height: 1.65;
    text-align: center !important;
}

/* Zwei kleinere Aufmacher mit Bild-Overlay. */
.ph-home-featured__secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ph-home-hero--secondary {
    position: relative;
    overflow: hidden;
    background: #1f1f1f;
}

.ph-home-hero--secondary .ph-home-hero__link {
    position: relative;
}

.ph-home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.03) 18%,
        rgba(0, 0, 0, 0.22) 50%,
        rgba(0, 0, 0, 0.88) 100%
    );
    pointer-events: none;
}

.ph-home-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px 21px;
    text-align: center;
}

.ph-home-hero__kicker {
    display: inline-block;
    margin: 0 auto 8px;
    padding: 4px 8px;
    background: #bf7918;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.ph-home-hero__title {
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    color: #fff;
    font-family: "Arvo", serif !important;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.23;
    text-align: center !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.38);
}

/* ---------------------------------------------------------
   Abschnitts-Trenner
   --------------------------------------------------------- */

.ph-home-section,
.ph-home-category-section {
    margin-top: 50px;
}

.ph-home-section-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    margin: 0 0 26px;
    padding-top: 0;
}

.ph-home-section-title::before,
.ph-home-section-title::after {
    content: "";
    height: 1px;
    background: #d9d9d9;
}

.ph-home-section-title span {
    display: inline-block;
    padding: 0 4px;
    color: #2c3338;
    font-family: "Arvo", serif !important;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
}

/* Keine zusätzlichen Akzentstriche unter den Bereichsüberschriften. */
.ph-home-section-title span {
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.ph-home-section-title span::before,
.ph-home-section-title span::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
    background: none !important;
    border: 0 !important;
}

.ph-home-section-title,
.ph-home-section-title span {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   Review- und Story-Typografie
   --------------------------------------------------------- */

.ph-home-card {
    min-width: 0;
    background: #fff;
}

.ph-home-card__image-link {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 736 / 510;
    background: #fff;
    line-height: 0;
}

.ph-home-card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.ph-home-card__image-link:hover .ph-home-card__image,
.ph-home-card__image-link:focus .ph-home-card__image {
    transform: scale(1.015);
}

.ph-home-card__body {
    padding-top: 14px;
    text-align: center;
}

.ph-home-card__kicker {
    margin: 0 0 8px;
    color: #bf7918;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.ph-home-card__kicker a {
    color: #bf7918 !important;
    text-decoration: none !important;
}

.ph-home-card__kicker a:hover,
.ph-home-card__kicker a:focus {
    color: #2c3338 !important;
}

.ph-home-card__title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Arvo", serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.ph-home-card__title a {
    color: #2c3338 !important;
    text-decoration: none !important;
}

.ph-home-card__title a:hover,
.ph-home-card__title a:focus {
    color: #bf7918 !important;
}

/* ---------------------------------------------------------
   Die besten Rätselspiele
   --------------------------------------------------------- */

.ph-home-best-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* ---------------------------------------------------------
   Aktuelle Storys – Desktop: 1 groß links, 2 bündig rechts
   --------------------------------------------------------- */

.ph-home-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    align-items: stretch;
}

/* Story 1 gibt die Gesamthöhe des Blocks vor. */
.ph-home-story-card--featured {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ph-home-story-card--featured .ph-home-card__body {
    flex: 0 0 auto;
}

.ph-home-story-card__excerpt {
    margin: 12px 0 0 !important;
    color: #666;
    font-size: 15px;
    line-height: 1.55;
    text-align: center !important;
}

/* Story 2 + 3 teilen sich die rechte Höhe exakt. Ihre Bilder dürfen dafür
   auf Desktop flacher werden; das Original-Seitenverhältnis wird mobil
   wiederhergestellt. Absolute Positionierung verhindert, dass die native
   Bildhöhe die Grid-Zeilen künstlich vergrößert. */
.ph-home-story-card--compact {
    grid-column: 2;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.ph-home-story-card--compact-2 {
    grid-row: 1;
}

.ph-home-story-card--compact-3 {
    grid-row: 2;
}

.ph-home-story-card--compact .ph-home-card__image-link {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
}

.ph-home-story-card--compact .ph-home-card__image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.ph-home-story-card--compact .ph-home-card__body {
    flex: 0 0 auto;
    padding-top: 10px;
    text-align: center;
}

.ph-home-story-card--compact .ph-home-card__kicker {
    margin-bottom: 6px;
    font-size: 15px;
    text-align: center;
}

.ph-home-story-card--compact .ph-home-card__title {
    font-size: 18px !important;
    line-height: 1.25 !important;
    text-align: center !important;
}


/* ---------------------------------------------------------
   Aktuelle Reviews – Desktop: 3 x 2, warm hervorgehoben
   --------------------------------------------------------- */

.ph-home-section--reviews {
    padding: 24px;
    box-sizing: border-box;
    background: #fbf3e8;
}

.ph-home-section--reviews .ph-home-section-title {
    margin-bottom: 24px;
}

.ph-home-section--reviews .ph-home-card {
    padding-bottom: 16px;
    background: #fff;
}

.ph-home-section--reviews .ph-home-card__body {
    padding-right: 10px;
    padding-left: 10px;
}

.ph-home-section--reviews .ph-home-card__title {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}

.ph-home-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* ---------------------------------------------------------
   Orangefarbener Widget-Balken unter den Reviews
   --------------------------------------------------------- */

.ph-home-info-strip {
    margin: 44px 0 8px;
    padding: 24px 20px;
    background: #df9631;
}

.ph-home-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.ph-home-widget-item {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
    min-height: 84px;
    padding: 0 22px;
    box-sizing: border-box;
}

.ph-home-widget-item + .ph-home-widget-item {
    border-left: 1px solid rgba(255, 255, 255, 0.38);
}

.ph-home-widget-item > .widget,
.ph-home-widget-item > .widget_block,
.ph-home-widget-item > .ph-home-widget-block {
    display: contents;
}

.ph-home-widget-item figure,
.ph-home-widget-item .wp-block-image {
    grid-column: 1;
    grid-row: 1;
    width: 78px;
    height: 78px;
    margin: 0 !important;
}

.ph-home-widget-item figure img,
.ph-home-widget-item .wp-block-image img,
.ph-home-widget-item > img {
    display: block;
    width: 78px !important;
    height: 78px !important;
    max-width: 78px !important;
    border-radius: 50%;
    object-fit: cover;
}

.ph-home-widget-item h1,
.ph-home-widget-item h2,
.ph-home-widget-item h3,
.ph-home-widget-item h4,
.ph-home-widget-item h5,
.ph-home-widget-item h6,
.ph-home-widget-item .widget-title,
.ph-home-widget-item p {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0 !important;
    color: #fff !important;
    font-family: "Arvo", serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.ph-home-widget-item a {
    color: #fff !important;
    text-decoration: none !important;
}

.ph-home-widget-item a:hover,
.ph-home-widget-item a:focus {
    text-decoration: underline !important;
}

/* ---------------------------------------------------------
   Kategorie-Teaser
   --------------------------------------------------------- */

.ph-home-category-section__title {
    margin-bottom: 26px;
}

.ph-home-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ph-home-category-tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #222;
    color: #fff !important;
    text-decoration: none !important;
}

.ph-home-category-tile__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease;
}

.ph-home-category-tile__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background: rgba(0, 0, 0, 0.70);
    transition: background 0.3s ease;
}

.ph-home-category-tile__title {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: #fff;
    font-family: "Arvo", serif !important;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
}

.ph-home-category-tile:hover .ph-home-category-tile__image,
.ph-home-category-tile:focus .ph-home-category-tile__image {
    transform: scale(1.03);
}

.ph-home-category-tile:hover .ph-home-category-tile__overlay,
.ph-home-category-tile:focus .ph-home-category-tile__overlay {
    background: rgba(0, 0, 0, 0.56);
}

/* ---------------------------------------------------------
   Flexblog-Sidebar auf der Startseite beibehalten
   --------------------------------------------------------- */

.ph-home-main-wrap .ph-homepage {
    box-sizing: border-box;
}

.ph-home-main-wrap .ph-homepage__inner {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media only screen and (max-width: 979px) {

    .ph-homepage {
        padding-top: 26px;
    }

    .ph-home-hero-main__title {
        font-size: 31px !important;
    }

    .ph-home-hero__title {
        font-size: 20px;
    }

    .ph-home-story-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 20px;
    }

    .ph-home-card-grid,
    .ph-home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ph-home-best-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ph-home-info-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ph-home-widget-item {
        padding: 18px 12px;
    }

    .ph-home-widget-item + .ph-home-widget-item {
        border-top: 1px solid rgba(255, 255, 255, 0.38);
        border-left: 0;
    }

    .ph-home-main-wrap .main-container-inner {
        display: flex;
        flex-direction: column;
    }

    .ph-home-main-wrap .main-container {
        order: 1;
    }

    .ph-home-main-wrap .main-sidebar-wrap {
        order: 2;
    }
}


@media only screen and (max-width: 768px) {
    .ph-home-category-section .ph-home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ---------------------------------------------------------
   Mobil
   --------------------------------------------------------- */

@media only screen and (max-width: 640px) {

    .ph-homepage {
        padding: 18px 0 48px;
    }

    .ph-home-featured {
        margin-bottom: 36px;
    }

    .ph-home-hero--main {
        margin-bottom: 20px !important;
        background: #fff !important;
    }

    .ph-home-hero--main .ph-home-hero__image-link,
    .ph-home-hero--main .ph-home-hero__media,
    .ph-home-hero-main__body {
        background: #fff !important;
    }

    .ph-home-hero--main::before,
    .ph-home-hero--main::after {
        display: none !important;
        content: none !important;
    }

    .ph-home-hero-main__body {
        padding-top: 14px;
    }

    .ph-home-hero-main__kicker {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .ph-home-hero-main__title {
        font-size: 25px !important;
        line-height: 1.22 !important;
    }

    .ph-home-hero-main__excerpt {
        margin-top: 10px !important;
        font-size: 15px;
        line-height: 1.55;
    }

    .ph-home-featured__secondary {
        grid-template-columns: 1fr;
        gap: 20px !important;
    }

    .ph-home-hero__content {
        padding: 18px;
    }

    .ph-home-hero__kicker {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .ph-home-hero__title {
        font-size: 20px;
        line-height: 1.22;
    }

    .ph-home-section,
    .ph-home-category-section {
        margin-top: 36px;
    }

    .ph-home-section-title {
        gap: 10px;
        margin-bottom: 20px;
        padding-top: 16px;
    }

    .ph-home-section-title span {
        font-size: 23px;
    }

    .ph-home-best-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ph-home-story-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
        column-gap: 0;
        row-gap: 0;
        align-items: start;
    }

    .ph-home-story-card--featured,
    .ph-home-story-card--compact {
        grid-column: auto;
        grid-row: auto;
        display: block;
        height: auto;
        min-height: 0;
        margin: 0 !important;
        overflow: visible;
    }

    /* Mobil einheitlich 20 px Abstand zwischen allen drei Story-Teasern. */
    .ph-home-story-card--featured {
        margin-bottom: 20px !important;
    }

    .ph-home-story-card--compact-2 {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

    .ph-home-story-card--compact-3 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Mobil haben alle drei Storys exakt dasselbe Bildformat. */
    .ph-home-story-card--featured .ph-home-card__image-link,
    .ph-home-story-card--compact .ph-home-card__image-link {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 736 / 510;
    }

    .ph-home-story-card--compact .ph-home-card__image {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
    }

    .ph-home-story-card__excerpt {
        margin-top: 10px !important;
        font-size: 15px;
        line-height: 1.55;
    }

    .ph-home-story-card--compact .ph-home-card__body {
        padding-top: 14px;
        text-align: center;
    }

    .ph-home-story-card--compact .ph-home-card__kicker {
        margin-bottom: 8px;
        font-size: 15px;
        text-align: center;
    }

    .ph-home-story-card--compact .ph-home-card__title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .ph-home-card-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ph-home-section--reviews {
        padding: 16px;
    }

    .ph-home-section--reviews .ph-home-section-title {
        margin-bottom: 20px;
    }

    .ph-home-section--reviews .ph-home-card {
        padding-bottom: 14px;
    }

    /* Mobil: Unterkante der Review-Bilder ohne graue 1-px-Naht. */
    .ph-home-section--reviews .ph-home-card__image-link {
        overflow: hidden !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .ph-home-section--reviews .ph-home-card__image {
        display: block !important;
        bottom: -1px !important;
        height: calc(100% + 1px) !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        vertical-align: top !important;
    }

    .ph-home-card__kicker {
        font-size: 15px;
    }

    .ph-home-card__title {
        font-size: 22px !important;
    }

    /* Reviews mobil etwas kompakter und ohne harte 3-Zeilen-Abschneidung. */
    .ph-home-section--reviews .ph-home-card__title {
        display: block !important;
        overflow: visible !important;
        font-size: 19px !important;
        line-height: 1.28 !important;
        -webkit-box-orient: initial;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
    }

    .ph-home-info-strip {
        margin-top: 36px;
        padding: 14px 16px;
    }

    .ph-home-widget-item {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 14px;
        min-height: 76px;
        padding: 16px 4px;
    }

    .ph-home-widget-item figure,
    .ph-home-widget-item .wp-block-image {
        width: 70px;
        height: 70px;
    }

    .ph-home-widget-item figure img,
    .ph-home-widget-item .wp-block-image img,
    .ph-home-widget-item > img {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px !important;
    }

    .ph-home-widget-item h1,
    .ph-home-widget-item h2,
    .ph-home-widget-item h3,
    .ph-home-widget-item h4,
    .ph-home-widget-item h5,
    .ph-home-widget-item h6,
    .ph-home-widget-item .widget-title,
    .ph-home-widget-item p {
        font-size: 18px !important;
    }

    .ph-home-widget-item p {
        font-size: 17px !important;
    }

    /* Sechs Spiele-Kategorien mobil: zwei Spalten, drei Reihen. */
    .ph-home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .ph-home-category-tile {
        aspect-ratio: 4 / 3;
    }

    .ph-home-category-section .ph-home-category-tile .ph-home-category-tile__title {
        padding: 8px !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
        font-family: "Arvo", serif !important;
        font-weight: 400 !important;
    }

    .ph-home-best-tile {
        aspect-ratio: 16 / 9;
    }

    .ph-home-best-tile .ph-home-category-tile__title {
        font-size: 20px;
    }
}


/* =========================================================
   17. INTERNE ARTIKELTEASER
   ========================================================= */

.ph-article-teaser {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 20px;
    padding: 24px 0;
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
}

.ph-article-teaser__link {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    width: 100%;
    color: inherit !important;
    text-decoration: none !important;
}

.ph-article-teaser--no-image .ph-article-teaser__link {
    grid-template-columns: minmax(0, 1fr);
}

.ph-article-teaser__media {
    display: block;
    width: 96px;
    height: 96px;
    overflow: hidden;
    background: #eee;
}

.ph-article-teaser__image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    margin: 0 !important;
}

.ph-article-teaser__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.ph-article-teaser__label {
    display: block;
    width: fit-content;
    margin: 0 0 7px;
    padding: 3px 7px;
    box-sizing: border-box;
    background: #bf7918;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .04em;
}

.ph-article-teaser__title {
    display: block;
    text-align: left !important;
    color: #2c3338;
    font-family: "Arvo", Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
}

.ph-article-teaser__link:hover .ph-article-teaser__title,
.ph-article-teaser__link:focus .ph-article-teaser__title {
    color: #df9631;
}

@media (max-width: 480px) {
    .ph-article-teaser {
        padding: 16px 0;
    }

    .ph-article-teaser__link {
        grid-template-columns: 82px minmax(0, 1fr);
        column-gap: 12px;
    }

    .ph-article-teaser--no-image .ph-article-teaser__link {
        grid-template-columns: minmax(0, 1fr);
    }

    .ph-article-teaser__media {
        width: 82px;
        height: 82px;
    }

    .ph-article-teaser__label {
        margin-bottom: 5px;
        padding: 2px 5px;
        font-size: 11px;
    }

    .ph-article-teaser__title {
        font-size: 16px;
        line-height: 1.3;
    }
}