/* =========================================================
   UHREN-FAN BLOG / RATGEBER
========================================================= */

body.blog,
body.single-post {
    background:
        #f7f2e9 !important;

    color:
        #17120c !important;
}


.uf-blog-page,
.uf-article-page,
.uf-blog-page *,
.uf-article-page * {
    box-sizing:
        border-box;
}


.uf-blog-wrap {
    width:
        min(1350px, calc(100% - 44px));

    margin:
        0 auto;
}


/* =========================================================
   BLOG HERO
========================================================= */

.uf-blog-hero {
    padding:
        82px
        0
        54px;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(200,155,69,.12),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fbf8f1 0%,
            #f7f2e9 100%
        );
}


.uf-blog-kicker {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0
        0
        13px;

    color:
        #9a6c24;

    font-family:
        "Inter",
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        750;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.uf-blog-kicker::before {
    content: "";

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #c89b45;
}


.uf-blog-main-title {
    max-width:
        900px;

    margin:
        0;

    color:
        #17120c;

    font-family:
        "Cormorant Garamond",
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px, 4.4vw, 53px);

    line-height:
        1.02;

    font-weight:
        500;

    letter-spacing:
        -.035em;
}


.uf-blog-main-title span {
    color:
        #b18435;
}


.uf-blog-lead {
    max-width:
        820px;

    margin:
        20px
        0
        0;

    color:
        rgba(23,18,12,.68);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        17px;

    line-height:
        1.7;
}


/* =========================================================
   BLOG GRID
========================================================= */

.uf-blog-list {
    padding:
        14px
        0
        92px;
}


.uf-blog-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        28px;
}


.uf-blog-card {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    margin:
        0 !important;

    background:
        #fffdf8;

    border:
        1px solid
        rgba(120,84,24,.14);

    box-shadow:
        0 16px 42px
        rgba(39,29,15,.065);

    overflow:
        hidden;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.uf-blog-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(120,84,24,.24);

    box-shadow:
        0 20px 48px
        rgba(39,29,15,.10);
}


.uf-blog-card-image {
    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        #fff;

    text-decoration:
        none !important;
}


.uf-blog-card-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .45s
        cubic-bezier(.22,1,.36,1);
}


.uf-blog-card:hover
.uf-blog-card-image img {
    transform:
        scale(1.025);
}


.uf-blog-image-placeholder {
    display:
        flex;

    width:
        100%;

    height:
        100%;

    align-items:
        center;

    justify-content:
        center;

    color:
        #9a6c24;

    font-weight:
        700;

    letter-spacing:
        .12em;
}


.uf-blog-card-body {
    display:
        flex;

    flex:
        1 1 auto;

    flex-direction:
        column;

    padding:
        24px
        25px
        27px;
}


.uf-blog-card-meta,
.uf-article-meta {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

    color:
        #9a6c24;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.2;

    font-weight:
        750;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.uf-blog-card-meta i,
.uf-article-meta i {
    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #c89b45;
}


.uf-blog-card-title {
    margin:
        14px
        0
        0 !important;

    font-family:
        "Cormorant Garamond",
        "Playfair Display",
        Georgia,
        serif !important;

    font-size:
        29px !important;

    line-height:
        1.08 !important;

    font-weight:
        500 !important;

    letter-spacing:
        -.025em !important;
}


.uf-blog-card-title a {
    color:
        #17120c !important;

    text-decoration:
        none !important;
}


.uf-blog-card-excerpt {
    margin:
        15px
        0
        0 !important;

    color:
        rgba(23,18,12,.68);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.65;
}


.uf-blog-readmore {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        auto;

    padding-top:
        22px;

    color:
        #17120c !important;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        12px;

    font-weight:
        750;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

    text-decoration:
        none !important;
}


.uf-blog-readmore span {
    color:
        #b18435;

    font-size:
        17px;

    transition:
        transform .18s ease;
}


.uf-blog-readmore:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   PAGINATION
========================================================= */

.uf-blog-pagination {
    margin-top:
        48px;
}


.uf-blog-pagination ul {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.uf-blog-pagination a,
.uf-blog-pagination span {
    display:
        inline-flex;

    min-width:
        42px;

    height:
        42px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(120,84,24,.17);

    background:
        #fffdf8;

    color:
        #17120c;

    text-decoration:
        none;
}


.uf-blog-pagination .current {
    background:
        #c89b45;

    border-color:
        #c89b45;
}


/* =========================================================
   SINGLE HEADER
========================================================= */

.uf-article-header {
    padding:
        60px
        0
        40px;

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(200,155,69,.10),
            transparent 31%
        ),
        #f7f2e9;
}


.uf-article-breadcrumb {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-bottom:
        38px;

    color:
        rgba(23,18,12,.52);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.5;
}


.uf-article-breadcrumb a {
    color:
        rgba(23,18,12,.67) !important;

    text-decoration:
        none !important;
}


.uf-article-breadcrumb a:hover {
    color:
        #9a6c24 !important;
}


.uf-article-title {
    max-width:
        1050px;

    margin:
        15px
        0
        0 !important;

    color:
        #17120c !important;

    font-family:
        "Cormorant Garamond",
        "Playfair Display",
        Georgia,
        serif !important;

    font-size:
        clamp(40px, 4.6vw, 53px) !important;

    line-height:
        1.01 !important;

    font-weight:
        500 !important;

    letter-spacing:
        -.04em !important;

    text-transform:
        none !important;
}


.uf-article-intro {
    max-width:
        850px;

    margin:
        22px
        0
        0 !important;

    color:
        rgba(23,18,12,.68);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        18px;

    line-height:
        1.65;
}


/* =========================================================
   SINGLE HERO IMAGE
========================================================= */

.uf-article-hero-image {
    width:
        100%;

    max-height:
        720px;

    margin:
        0;

    overflow:
        hidden;

    background:
        #fff;

    border:
        1px solid
        rgba(120,84,24,.13);
}


.uf-article-hero-image img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    max-height:
        720px;

    object-fit:
        cover;

    object-position:
        center;
}


/* =========================================================
   ARTIKELINHALT
========================================================= */

.uf-article-section {
    padding:
        58px
        22px
        76px;
}


.uf-article-content {
    width:
        min(860px, 100%);

    margin:
        0 auto;

    color:
        #312a22;

    font-family:
        "Inter",
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        17px;

    line-height:
        1.82;
}


.uf-article-content > *:first-child {
    margin-top:
        0 !important;
}


.uf-article-content p {
    margin:
        0
        0
        24px;
}


.uf-article-content h2 {
    margin:
        52px
        0
        18px;

    color:
        #17120c;

    font-family:
        "Cormorant Garamond",
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        36px;

    line-height:
        1.08;

    font-weight:
        500;

    letter-spacing:
        -.025em;
}


.uf-article-content h3 {
    margin:
        38px
        0
        14px;

    color:
        #17120c;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        28px;

    line-height:
        1.12;

    font-weight:
        500;
}


.uf-article-content h4 {
    margin:
        30px
        0
        12px;

    color:
        #17120c;

    font-size:
        18px;

    font-weight:
        700;
}


.uf-article-content strong {
    color:
        #17120c;

    font-weight:
        700;
}


.uf-article-content a {
    color:
        #9a6c24;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}


.uf-article-content ul,
.uf-article-content ol {
    margin:
        0
        0
        26px;

    padding-left:
        25px;
}


.uf-article-content li {
    margin-bottom:
        8px;
}


.uf-article-content blockquote {
    margin:
        36px
        0;

    padding:
        8px
        0
        8px
        28px;

    border-left:
        3px solid
        #c89b45;

    color:
        #4f4438;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        26px;

    line-height:
        1.35;
}


.uf-article-content img {
    display:
        block;

    max-width:
        100%;

    height:
        auto;

    margin:
        34px
        auto;
}


.uf-article-content figure {
    margin:
        38px
        0;
}


.uf-article-content figcaption {
    margin-top:
        8px;

    color:
        rgba(23,18,12,.52);

    font-size:
        12px;

    line-height:
        1.5;
}


/* =========================================================
   CTA
========================================================= */

.uf-article-cta {
    padding:
        0
        0
        78px;
}


.uf-article-cta-inner {
    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:
        46px;

    align-items:
        center;

    padding:
        40px
        44px;

    border:
        1px solid
        rgba(120,84,24,.16);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(200,155,69,.13),
            transparent 38%
        ),
        #fffdf8;

    box-shadow:
        0 18px 48px
        rgba(39,29,15,.07);
}


.uf-article-cta-kicker {
    display:
        block;

    margin-bottom:
        9px;

    color:
        #9a6c24;

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.uf-article-cta h2 {
    margin:
        0;

    color:
        #17120c;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        36px;

    line-height:
        1.05;

    font-weight:
        500;
}


.uf-article-cta p {
    max-width:
        660px;

    margin:
        11px
        0
        0;

    color:
        rgba(23,18,12,.65);

    font-size:
        14px;

    line-height:
        1.65;
}


.uf-article-cta-actions {
    display:
        flex;

    gap:
        10px;

    flex-wrap:
        wrap;
}


.uf-blog-btn {
    display:
        inline-flex;

    min-height:
        50px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        24px;

    border:
        1px solid
        rgba(120,84,24,.20);

    background:
        transparent;

    color:
        #17120c !important;

    font-size:
        11px;

    font-weight:
        750;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

    text-decoration:
        none !important;
}


.uf-blog-btn--gold {
    border-color:
        #c89b45;

    background:
        linear-gradient(
            135deg,
            #f5dc98 0%,
            #c89b45 100%
        );
}


/* =========================================================
   RELATED
========================================================= */

.uf-related-posts {
    padding:
        70px
        0
        78px;

    border-top:
        1px solid
        rgba(120,84,24,.11);
}


.uf-related-head {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        28px;
}


.uf-related-head h2 {
    margin:
        0;

    color:
        #17120c;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        40px;

    font-weight:
        500;

    line-height:
        1;
}


.uf-related-head > a {
    color:
        #9a6c24 !important;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none !important;
}


.uf-related-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        24px;
}


.uf-related-card {
    margin:
        0;

    border:
        1px solid
        rgba(120,84,24,.13);

    background:
        #fffdf8;
}


.uf-related-image {
    display:
        block;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;
}


.uf-related-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.uf-related-body {
    padding:
        18px
        20px
        22px;
}


.uf-related-body > span {
    color:
        #9a6c24;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .10em;
}


.uf-related-body h3 {
    margin:
        9px
        0
        0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        25px;

    line-height:
        1.12;

    font-weight:
        500;
}


.uf-related-body h3 a {
    color:
        #17120c !important;

    text-decoration:
        none !important;
}


.uf-article-back {
    width:
        min(1350px, calc(100% - 44px));

    margin:
        0 auto;

    padding-bottom:
        70px;
}


.uf-article-back a {
    color:
        #9a6c24 !important;

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px) {

    .uf-blog-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .uf-article-cta-inner {
        grid-template-columns:
            1fr;
    }

    .uf-related-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media(max-width:700px) {

    .uf-blog-wrap,
    .uf-article-back {
        width:
            min(100% - 30px, 1350px);
    }

    .uf-blog-hero {
        padding:
            54px
            0
            38px;
    }

    .uf-blog-main-title {
        font-size:
            42px;
    }

    .uf-blog-lead {
        font-size:
            15px;
    }

    .uf-blog-grid {
        grid-template-columns:
            1fr;
    }

    .uf-blog-list {
        padding-bottom:
            64px;
    }

    .uf-article-header {
        padding:
            38px
            0
            30px;
    }

    .uf-article-breadcrumb {
        margin-bottom:
            27px;
    }

    .uf-article-title {
        font-size:
            40px !important;
    }

    .uf-article-section {
        padding:
            40px
            18px
            55px;
    }

    .uf-article-content {
        font-size:
            16px;
    }

    .uf-article-content h2 {
        font-size:
            31px;
    }

    .uf-article-content h3 {
        font-size:
            25px;
    }

    .uf-article-cta {
        padding-bottom:
            55px;
    }

    .uf-article-cta-inner {
        padding:
            29px
            24px;
    }

    .uf-article-cta h2 {
        font-size:
            31px;
    }

    .uf-article-cta-actions {
        display:
            grid;

        grid-template-columns:
            1fr;
    }

    .uf-related-grid {
        grid-template-columns:
            1fr;
    }

    .uf-related-head {
        align-items:
            start;

        flex-direction:
            column;
    }

}


/* =========================================================
   BLOG HINTERGRUND – DURCHGEHEND OHNE FARBBRUCH
========================================================= */

body.blog {
    background: #f7f2e9 !important;
}

body.blog .uf-blog-page {
    min-height: 100vh !important;

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(200,155,69,.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fbf8f1 0%,
            #f7f2e9 100%
        ) !important;
}


/* Hero und Beitragsbereich benutzen denselben Seitenhintergrund */
body.blog .uf-blog-hero,
body.blog .uf-blog-list {
    background: transparent !important;
}


/* keine sichtbare Trennkante */
body.blog .uf-blog-hero {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body.blog .uf-blog-list {
    border-top: 0 !important;
}



/* =========================================================
   EINZELBEITRAG – DURCHGEHENDER HINTERGRUND
========================================================= */

body.single-post {
    background: #f7f2e9 !important;
}


/* Ein gemeinsamer Hintergrund für die komplette Beitragsseite */
body.single-post .uf-article-page {
    min-height: 100vh !important;

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(200,155,69,.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fbf8f1 0%,
            #f7f2e9 100%
        ) !important;
}


/* Einzelne Bereiche bekommen keinen eigenen Hintergrund mehr */
body.single-post .uf-article-header,
body.single-post .uf-article-section,
body.single-post .uf-article-cta,
body.single-post .uf-related-posts {
    background: transparent !important;
}


/* keine künstlichen Trennkanten */
body.single-post .uf-article-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* Bildbereich ebenfalls ohne eigenen Flächenwechsel */
body.single-post .uf-article-hero-image {
    background: #fff !important;
}


/* Bereich um das große Beitragsbild transparent */
body.single-post .uf-article-page > .uf-blog-wrap {
    background: transparent !important;
}


/* eventuell alte Hello-Elementor-Flächen entfernen */
body.single-post main.site-main,
body.single-post .site-main,
body.single-post .page-content {
    background: transparent !important;
}