/* =========================================================
   BESTGEN IMMOBILIEN
   RATGEBER SINGLE ARTICLE

   STYLE SYSTEM
   ---------------------------------------------------------
   Max site grid: 1600px
   Headings: Playfair Display
   Body: Poppins

   Navy:       #17242E
   Body text:  #5B605C
   Cream:      #F6F4F0
   Sage:       #8A9583
   Orange:     #C48632

   Eyebrows:
   Poppins 400
   18px / 18px
   #000000
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.bestgen-ratgeber-single {

    --bestgen-side:
        max(46px, calc((100vw - 1600px) / 2));

    --bestgen-navy:
        #17242E;

    --bestgen-text:
        #5B605C;

    --bestgen-muted:
        #807B72;

    --bestgen-cream:
        #F6F4F0;

    --bestgen-cream-2:
        #FAF9F6;

    --bestgen-sage:
        #8A9583;

    --bestgen-sage-dark:
        #747F70;

    --bestgen-sage-soft:
        #EEF0EB;

    --bestgen-orange:
        #C48632;

    --bestgen-orange-hover:
        #D0913A;

    --bestgen-line:
        rgba(23, 36, 46, 0.12);

    --bestgen-serif:
        "Playfair Display",
        Georgia,
        serif;

    --bestgen-sans:
        "Poppins",
        Arial,
        sans-serif;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background: #FFFFFF;

    color: var(--bestgen-text);

    font-family: var(--bestgen-sans);
}


/* =========================================================
   GLOBAL RESET
========================================================= */

.bestgen-ratgeber-single *,
.bestgen-ratgeber-single *::before,
.bestgen-ratgeber-single *::after {

    box-sizing: border-box;
}


.bestgen-ratgeber-article {

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   SITE GRID
========================================================= */

.bestgen-rg-wrap {

    width: 100%;

    max-width: none;

    margin: 0 auto;

    padding-left:
        var(--bestgen-side);

    padding-right:
        var(--bestgen-side);
}


/* =========================================================
   BREADCRUMBS
   Hidden visually to remove the white gap above Hero.
   Rank Math schema is unaffected.
========================================================= */

.bestgen-rg-breadcrumb-section {

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* =========================================================
   EYEBROWS / KICKERS
   GLOBAL BESTGEN RATGEBER SYSTEM
========================================================= */

.bestgen-rg-kicker,
.bestgen-rg-toc-kicker,
.bestgen-rg-card-kicker,
.bestgen-rg-final-content > span {

    display: inline-block;

    width: fit-content;

    margin:
        0 0 18px 0;

    padding: 0;

    color:
        rgb(0, 0, 0) !important;

    font-family:
        "Poppins",
        sans-serif !important;

    font-style:
        normal !important;

    font-size:
        18px !important;

    font-weight:
        400 !important;

    line-height:
        18px !important;

    letter-spacing:
        0 !important;

    text-transform:
        uppercase;

    text-decoration:
        none !important;

    opacity:
        1 !important;
}


a.bestgen-rg-kicker,
a.bestgen-rg-kicker:link,
a.bestgen-rg-kicker:visited {

    color:
        rgb(0, 0, 0) !important;
}


a.bestgen-rg-kicker:hover,
a.bestgen-rg-kicker:focus {

    color:
        var(--bestgen-orange) !important;
}


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

.bestgen-rg-hero {

    position: relative;

    isolation: isolate;

    width: 100%;

    min-height: 650px;

    display: flex;

    align-items: stretch;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background:
        var(--bestgen-cream);
}


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

.bestgen-rg-hero-image-wrap {

    position: absolute;

    inset: 0;

    z-index: 0;

    margin: 0;
    padding: 0;
}


.bestgen-rg-hero-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;
}


/* =========================================================
   HERO GRADIENT
========================================================= */

.bestgen-rg-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            rgba(246, 244, 240, 1.00) 0%,
            rgba(246, 244, 240, 1.00) 31%,

            rgba(246, 244, 240, 0.96) 40%,
            rgba(246, 244, 240, 0.86) 50%,
            rgba(246, 244, 240, 0.68) 60%,
            rgba(246, 244, 240, 0.48) 69%,
            rgba(246, 244, 240, 0.28) 77%,
            rgba(246, 244, 240, 0.12) 84%,
            rgba(246, 244, 240, 0.03) 91%,
            rgba(246, 244, 240, 0.00) 97%
        );
}


.bestgen-rg-hero.no-image
.bestgen-rg-hero-overlay {

    background:
        var(--bestgen-cream);
}


/* =========================================================
   HERO INNER
========================================================= */

.bestgen-rg-hero-inner {

    position: relative;

    z-index: 2;

    min-height: 650px;

    display: flex;

    align-items: center;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.bestgen-rg-hero-content {

    width: 52%;

    max-width: 790px;

    padding:
        78px 0;
}


/* =========================================================
   HERO TITLE
========================================================= */

.bestgen-rg-title {

    max-width: 760px;

    margin:
        0 0 24px 0;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        clamp(48px, 4.5vw, 72px);

    font-weight:
        500;

    line-height:
        1.04;

    letter-spacing:
        -0.028em;
}


/* =========================================================
   HERO LEAD
========================================================= */

.bestgen-rg-lead {

    max-width: 680px;

    color:
        var(--bestgen-text);

    font-family:
        var(--bestgen-sans);

    font-size:
        17px;

    font-weight:
        400;

    line-height:
        1.72;
}


.bestgen-rg-lead p {

    margin: 0;
}


/* =========================================================
   HERO META
========================================================= */

.bestgen-rg-meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 18px;

    margin-top: 30px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(23, 36, 46, 0.16);
}


.bestgen-rg-meta-item {

    display: flex;

    flex-direction: column;

    gap: 2px;

    color:
        var(--bestgen-navy);

    font-size:
        12px;

    line-height:
        1.5;
}


.bestgen-rg-meta-label {

    color:
        #8B8E88;

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.bestgen-rg-meta-divider {

    width: 1px;

    height: 30px;

    background:
        rgba(23, 36, 46, 0.16);
}


/* =========================================================
   HERO REVIEW PROOF
========================================================= */

.bestgen-rg-hero-proof {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 21px;

    color:
        var(--bestgen-text);

    font-size:
        11px;
}


.bestgen-rg-hero-proof strong {

    color:
        var(--bestgen-navy);

    font-weight:
        500;
}


.bestgen-rg-proof-check {

    width: 25px;
    height: 25px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 25px;

    border-radius:
        50%;

    background:
        var(--bestgen-sage);

    color:
        #FFFFFF;

    font-size:
        11px;
}


/* =========================================================
   QUICK ANSWER
========================================================= */

.bestgen-rg-answer {

    width: 100%;

    padding-top: 68px;
    padding-bottom: 68px;

    background:
        #FFFFFF;
}


.bestgen-rg-answer-grid {

    display: grid;

    grid-template-columns:
        minmax(280px, 0.75fr)
        minmax(0, 1.25fr);

    gap:
        clamp(48px, 7vw, 110px);

    align-items: start;

    max-width: 1280px;
}


.bestgen-rg-answer-heading h2 {

    max-width: 440px;

    margin: 0;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        clamp(38px, 3.3vw, 54px);

    font-weight:
        500;

    line-height:
        1.07;

    letter-spacing:
        -0.025em;
}


.bestgen-rg-answer-text {

    padding-top: 23px;

    border-top:
        1px solid
        var(--bestgen-line);

    color:
        var(--bestgen-text);

    font-size:
        16px;

    line-height:
        1.78;
}


.bestgen-rg-answer-text p {

    margin: 0;
}


/* =========================================================
   KEY FACTS
========================================================= */

.bestgen-rg-keyfacts {

    padding-top: 54px;
    padding-bottom: 54px;

    background:
        var(--bestgen-cream);
}


.bestgen-rg-keyfacts-top {

    margin-bottom: 30px;
}


.bestgen-rg-keyfacts-top h2 {

    margin: 0;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        clamp(36px, 3vw, 50px);

    font-weight:
        500;

    line-height:
        1.08;

    letter-spacing:
        -0.025em;
}


/* =========================================================
   KEY FACTS GRID
========================================================= */

.bestgen-rg-keyfacts-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px, 1fr)
        );

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


.bestgen-rg-keyfact {

    position: relative;

    min-width: 0;

    margin: 0;

    padding:
        7px 28px 6px 28px;
}


.bestgen-rg-keyfact:first-child {

    padding-left: 0;
}


.bestgen-rg-keyfact:last-child {

    padding-right: 0;
}


.bestgen-rg-keyfact:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 3px;
    right: 0;

    width: 1px;

    height:
        calc(100% - 6px);

    background:
        var(--bestgen-line);
}


.bestgen-rg-keyfact-number {

    display: block;

    margin-bottom: 13px;

    color:
        var(--bestgen-sage);

    font-family:
        var(--bestgen-serif);

    font-size:
        28px;

    line-height:
        1;
}


.bestgen-rg-keyfact p {

    margin: 0;

    color:
        var(--bestgen-text);

    font-family:
        var(--bestgen-sans);

    font-size:
        13px;

    line-height:
        1.65;
}


/* =========================================================
   ARTICLE CONTENT SECTION
========================================================= */

.bestgen-rg-content-section {

    padding-top: 88px;
    padding-bottom: 100px;

    background:
        #FFFFFF;
}


.bestgen-rg-content-layout {

    display: grid;

    grid-template-columns:
        280px
        minmax(0, 880px);

    gap:
        clamp(50px, 5vw, 82px);

    align-items: start;

    justify-content: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.bestgen-rg-sidebar {

    position: sticky;

    top: 105px;

    min-width: 0;
}


/* =========================================================
   TABLE OF CONTENTS
========================================================= */

.bestgen-rg-toc {

    width: 100%;

    padding:
        27px 25px;

    background:
        var(--bestgen-cream);

    border:
        1px solid
        rgba(23, 36, 46, 0.10);
}


.bestgen-rg-toc-kicker {

    margin-bottom:
        12px;
}


.bestgen-rg-toc-title {

    margin-bottom: 18px;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        22px;

    font-weight:
        500;

    line-height:
        1.2;
}


.bestgen-rg-toc ol {

    display: flex;

    flex-direction: column;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}


.bestgen-rg-toc li {

    margin: 0;
    padding: 0;
}


.bestgen-rg-toc a {

    display: grid;

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

    gap: 8px;

    padding:
        9px 0;

    border-bottom:
        1px solid
        rgba(23, 36, 46, 0.08);

    color:
        var(--bestgen-text);

    font-size:
        11px;

    line-height:
        1.45;

    text-decoration:
        none;
}


.bestgen-rg-toc li:last-child a {

    border-bottom: 0;
}


.bestgen-rg-toc a:hover {

    color:
        var(--bestgen-orange);
}


.bestgen-rg-toc-number {

    color:
        var(--bestgen-orange);

    font-size:
        9px;

    font-weight:
        500;
}


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

.bestgen-rg-sidebar-cta {

    margin-top: 18px;

    padding:
        26px 24px;

    background:
        var(--bestgen-sage);

    color:
        #FFFFFF;
}


.bestgen-rg-sidebar-cta > span {

    display: block;

    margin-bottom: 12px;

    font-size:
        8px;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

    opacity:
        0.75;
}


.bestgen-rg-sidebar-cta strong {

    display: block;

    max-width: 210px;

    font-family:
        var(--bestgen-serif);

    font-size:
        23px;

    font-weight:
        500;

    line-height:
        1.18;
}


.bestgen-rg-sidebar-cta p {

    margin:
        12px 0 17px;

    font-size:
        11px;

    line-height:
        1.6;

    opacity:
        0.88;
}


.bestgen-rg-sidebar-cta a {

    display:
        inline-flex;

    align-items:
        center;

    gap: 8px;

    color:
        #FFFFFF;

    font-size:
        11px;

    font-weight:
        500;

    text-decoration:
        underline;

    text-underline-offset:
        4px;
}


/* =========================================================
   MAIN ARTICLE
========================================================= */

.bestgen-rg-main {

    width: 100%;

    min-width: 0;

    max-width: 880px;
}


.bestgen-article-body {

    color:
        var(--bestgen-text);

    font-family:
        var(--bestgen-sans);

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.78;
}


.bestgen-article-content {

    width: 100%;
}


/* =========================================================
   ARTICLE H2
========================================================= */

.bestgen-article-body h2 {

    scroll-margin-top:
        125px;

    margin:
        70px 0 22px 0;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        clamp(36px, 3.1vw, 48px);

    font-weight:
        500;

    line-height:
        1.08;

    letter-spacing:
        -0.025em;
}


.bestgen-article-body h2:first-child {

    margin-top: 0;
}


/* =========================================================
   ARTICLE H3
========================================================= */

.bestgen-article-body h3 {

    scroll-margin-top:
        125px;

    margin:
        43px 0 13px 0;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        27px;

    font-weight:
        500;

    line-height:
        1.22;

    letter-spacing:
        -0.015em;
}


/* =========================================================
   ARTICLE H4
========================================================= */

.bestgen-article-body h4 {

    margin:
        32px 0 10px 0;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-sans);

    font-size:
        17px;

    font-weight:
        500;

    line-height:
        1.4;
}


/* =========================================================
   ARTICLE PARAGRAPH
========================================================= */

.bestgen-article-body p {

    margin:
        0 0 22px 0;
}


.bestgen-article-body strong {

    color:
        var(--bestgen-navy);

    font-weight:
        500;
}


/* =========================================================
   ARTICLE LISTS
========================================================= */

.bestgen-article-body ul,
.bestgen-article-body ol {

    margin:
        8px 0 28px 0;

    padding-left:
        25px;
}


.bestgen-article-body li {

    margin-bottom: 8px;

    padding-left: 5px;
}


.bestgen-article-body li::marker {

    color:
        var(--bestgen-sage);
}


/* =========================================================
   ARTICLE LINKS
========================================================= */

.bestgen-article-body a {

    color:
        var(--bestgen-orange);

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        4px;
}


.bestgen-article-body a:hover {

    color:
        var(--bestgen-orange-hover);
}


/* =========================================================
   ARTICLE IMAGES
========================================================= */

.bestgen-article-body img {

    display: block;

    width: 100%;

    height: auto;

    margin:
        34px 0 38px 0;
}


.bestgen-article-body figure {

    margin:
        36px 0;
}


.bestgen-article-body figcaption {

    margin-top: 9px;

    color:
        #898C87;

    font-size:
        10px;

    line-height:
        1.5;
}


/* =========================================================
   ARTICLE QUOTE
========================================================= */

.bestgen-article-body blockquote {

    position: relative;

    margin:
        42px 0;

    padding:
        32px 38px;

    background:
        var(--bestgen-cream);

    border-left:
        3px solid
        var(--bestgen-orange);

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        23px;

    font-style:
        italic;

    font-weight:
        400;

    line-height:
        1.48;
}


/* =========================================================
   ARTICLE TABLE
========================================================= */

.bestgen-article-body table {

    width: 100%;

    margin:
        36px 0;

    border-collapse:
        collapse;

    font-size:
        13px;

    line-height:
        1.5;
}


.bestgen-article-body th,
.bestgen-article-body td {

    padding:
        14px 16px;

    border:
        1px solid
        rgba(23, 36, 46, 0.12);

    text-align:
        left;

    vertical-align:
        top;
}


.bestgen-article-body th {

    background:
        var(--bestgen-cream);

    color:
        var(--bestgen-navy);

    font-weight:
        500;
}


/* =========================================================
   PRACTICE BLOCK
========================================================= */

.bestgen-rg-practice {

    display: grid;

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

    gap: 27px;

    margin-top: 74px;

    padding:
        42px 44px;

    background:
        var(--bestgen-sage-soft);

    border:
        1px solid
        rgba(23, 36, 46, 0.08);
}


.bestgen-rg-practice-mark {

    color:
        var(--bestgen-sage);

    font-family:
        Georgia,
        serif;

    font-size:
        88px;

    line-height:
        0.75;
}


.bestgen-rg-practice-text {

    max-width: 680px;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        22px;

    font-style:
        italic;

    line-height:
        1.5;
}


.bestgen-rg-practice-text p {

    margin: 0;
}


.bestgen-rg-practice-source {

    display: block;

    margin-top: 17px;

    color:
        #81867F;

    font-family:
        var(--bestgen-sans);

    font-size:
        9px;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


/* =========================================================
   REVIEWER
========================================================= */

.bestgen-rg-review {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;

    margin-top: 26px;

    padding:
        24px 0;

    border-top:
        1px solid
        var(--bestgen-line);

    border-bottom:
        1px solid
        var(--bestgen-line);
}


.bestgen-rg-review-heading {

    display: flex;

    align-items: center;

    gap: 13px;
}


.bestgen-rg-review-check {

    width: 34px;
    height: 34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 34px;

    border-radius:
        50%;

    background:
        var(--bestgen-sage);

    color:
        #FFFFFF;

    font-size:
        12px;
}


.bestgen-rg-review-heading
div > span {

    display: block;

    margin-bottom: 2px;

    color:
        #898C87;

    font-size:
        8px;

    font-weight:
        500;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.bestgen-rg-review-heading strong {

    color:
        var(--bestgen-navy);

    font-size:
        13px;

    font-weight:
        500;
}


.bestgen-rg-review-meta {

    display: flex;

    flex-direction: column;

    gap: 3px;

    text-align: right;

    color:
        #858A84;

    font-size:
        10px;
}


/* =========================================================
   DOWNLOAD
========================================================= */

.bestgen-rg-download {

    display: grid;

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

    gap: 50px;

    align-items: center;

    margin-top: 68px;

    padding:
        38px 40px;

    background:
        var(--bestgen-cream);

    border:
        1px solid
        rgba(23, 36, 46, 0.10);
}


.bestgen-rg-download h2 {

    margin:
        0 0 10px 0;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        32px;

    font-weight:
        500;

    line-height:
        1.15;
}


.bestgen-rg-download p {

    max-width: 570px;

    margin: 0;

    color:
        var(--bestgen-text);

    font-size:
        12px;

    line-height:
        1.65;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.bestgen-rg-button {

    min-height: 52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 14px;

    padding:
        14px 26px;

    border:
        1px solid
        var(--bestgen-orange);

    border-radius:
        5px;

    background:
        var(--bestgen-orange);

    color:
        #FFFFFF !important;

    font-family:
        var(--bestgen-sans);

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.4;

    text-decoration:
        none !important;

    box-shadow:
        0 7px 18px
        rgba(23, 36, 46, 0.10);

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.bestgen-rg-button:hover {

    background:
        var(--bestgen-orange-hover);

    border-color:
        var(--bestgen-orange-hover);

    color:
        #FFFFFF !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 23px
        rgba(23, 36, 46, 0.14);
}


/* =========================================================
   SOURCES
========================================================= */

.bestgen-rg-sources {

    margin-top: 70px;

    padding-top: 34px;

    border-top:
        1px solid
        var(--bestgen-line);
}


.bestgen-rg-sources h2 {

    margin:
        0 0 25px 0;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        32px;

    font-weight:
        500;

    line-height:
        1.18;
}


.bestgen-rg-sources ol {

    display: flex;

    flex-direction: column;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}


.bestgen-rg-sources li {

    display: grid;

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

    gap: 25px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        rgba(23, 36, 46, 0.08);

    font-size:
        11px;

    line-height:
        1.5;
}


.bestgen-rg-source-title a {

    color:
        var(--bestgen-navy);

    text-decoration:
        none;
}


.bestgen-rg-source-title a:hover {

    color:
        var(--bestgen-orange);
}


.bestgen-rg-source-publisher {

    color:
        #898D88;

    text-align:
        right;
}


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

.bestgen-rg-related {

    padding-top: 84px;
    padding-bottom: 90px;

    background:
        var(--bestgen-cream);
}


.bestgen-rg-related-head {

    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap: 40px;

    margin-bottom: 30px;
}


.bestgen-rg-related-head h2 {

    margin: 0;

    color:
        var(--bestgen-navy);

    font-family:
        var(--bestgen-serif);

    font-size:
        clamp(36px, 3vw, 50px);

    font-weight:
        500;

    line-height:
        1.08;

    letter-spacing:
        -0.025em;
}


.bestgen-rg-text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap: 10px;

    padding-bottom: 5px;

    border-bottom:
        1px solid
        rgba(196, 134, 50, 0.55);

    color:
        var(--bestgen-orange);

    font-size:
        11px;

    font-weight:
        500;

    text-decoration:
        none;
}


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

.bestgen-rg-related-grid {

    display: grid;

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

    gap: 18px;
}


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

.bestgen-rg-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(23, 36, 46, 0.10);

    transition:
        transform 0.25s ease;
}


.bestgen-rg-card:hover {

    transform:
        translateY(-3px);
}


.bestgen-rg-card-image {

    display: block;

    width: 100%;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    background:
        #E9E9E5;
}


.bestgen-rg-card-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


.bestgen-rg-card:hover
.bestgen-rg-card-image img {

    transform:
        scale(1.025);
}


.bestgen-rg-card-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding:
        23px 24px;
}


.bestgen-rg-card-kicker {

    margin-bottom:
        14px;
}


.bestgen-rg-card h3 {

    margin:
        0 0 12px 0;

    font-family:
        var(--bestgen-serif);

    font-size:
        25px;

    font-weight:
        500;

    line-height:
        1.16;
}


.bestgen-rg-card h3 a {

    color:
        var(--bestgen-navy);

    text-decoration:
        none;
}


.bestgen-rg-card p {

    margin:
        0 0 20px 0;

    color:
        var(--bestgen-text);

    font-size:
        11px;

    line-height:
        1.65;
}


.bestgen-rg-card-bottom {

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap: 20px;

    margin-top: auto;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(23, 36, 46, 0.08);

    color:
        #898D87;

    font-size:
        9px;
}


.bestgen-rg-card-bottom a {

    color:
        var(--bestgen-orange);

    font-size:
        18px;

    line-height:
        1;

    text-decoration:
        none;
}


/* =========================================================
   FINAL CTA
   FULL WIDTH
========================================================= */

.bestgen-rg-final {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    background:
        #8A9583 !important;
}


/* Wrapper keeps the Bestgen horizontal grid */

.bestgen-rg-final >
.bestgen-rg-wrap {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding-left:
        var(--bestgen-side) !important;

    padding-right:
        var(--bestgen-side) !important;
}


/* Inner content */

.bestgen-rg-final-inner {

    width: 100% !important;

    max-width: 1600px !important;

    display: grid;

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

    gap: 60px;

    align-items: center;

    margin:
        0 auto !important;

    padding:
        64px 0 !important;

    background:
        transparent !important;

    color:
        #FFFFFF;
}


.bestgen-rg-final-content > span {

    margin-bottom:
        18px !important;
}


.bestgen-rg-final h2 {

    max-width: 780px;

    margin:
        0 0 12px 0;

    color:
        #FFFFFF;

    font-family:
        var(--bestgen-serif);

    font-size:
        clamp(36px, 3.2vw, 50px);

    font-weight:
        500;

    line-height:
        1.08;
}


.bestgen-rg-final p {

    max-width: 700px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.84);

    font-size:
        13px;

    line-height:
        1.65;
}


/* =========================================================
   REMOVE GAP BEFORE FOOTER
========================================================= */

.bestgen-ratgeber-single {

    margin-bottom:
        0 !important;

    padding-bottom:
        0 !important;
}


.bestgen-ratgeber-article {

    margin-bottom:
        0 !important;

    padding-bottom:
        0 !important;
}


.bestgen-rg-final {

    margin-bottom:
        0 !important;
}


body.single-post
.elementor-location-footer,
body.single-post
footer {

    margin-top:
        0 !important;
}


/* =========================================================
   ULTRA WIDE
========================================================= */

@media (min-width: 1693px) {

    .bestgen-ratgeber-single {

        --bestgen-side:
            calc((100vw - 1600px) / 2);
    }

}


/* =========================================================
   <= 1400px
========================================================= */

@media (max-width: 1400px) {

    .bestgen-ratgeber-single {

        --bestgen-side:
            32px;
    }


    .bestgen-rg-hero-content {

        width: 56%;

        max-width: 720px;
    }


    .bestgen-rg-content-layout {

        grid-template-columns:
            250px
            minmax(0, 820px);

        gap: 55px;
    }

}


/* =========================================================
   <= 1200px
========================================================= */

@media (max-width: 1200px) {

    .bestgen-ratgeber-single {

        --bestgen-side:
            28px;
    }


    .bestgen-rg-hero,
    .bestgen-rg-hero-inner {

        min-height:
            600px;
    }


    .bestgen-rg-hero-content {

        width: 60%;

        max-width: 660px;
    }


    .bestgen-rg-content-layout {

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

        gap: 45px;
    }


    .bestgen-rg-keyfact {

        padding-left: 20px;
        padding-right: 20px;
    }

}


/* =========================================================
   TABLET <= 1024px
========================================================= */

@media (max-width: 1024px) {

    .bestgen-rg-hero,
    .bestgen-rg-hero-inner {

        min-height:
            570px;
    }


    .bestgen-rg-hero-content {

        width: 64%;

        max-width: 610px;
    }


    .bestgen-rg-answer-grid {

        gap: 45px;
    }


    .bestgen-rg-content-layout {

        grid-template-columns:
            1fr;

        gap: 40px;

        max-width: 900px;
    }


    .bestgen-rg-sidebar {

        position: static;
    }


    .bestgen-rg-sidebar-cta {

        display: none;
    }


    .bestgen-rg-toc {

        max-width: 100%;
    }


    .bestgen-rg-toc ol {

        display: grid;

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

        column-gap: 30px;
    }


    .bestgen-rg-main {

        max-width: 880px;
    }

}


/* =========================================================
   MOBILE / TABLET <= 767px
========================================================= */

@media (max-width: 767px) {

    .bestgen-ratgeber-single {

        --bestgen-side:
            20px;
    }


    /* EYEBROWS */

    .bestgen-rg-kicker,
    .bestgen-rg-toc-kicker,
    .bestgen-rg-card-kicker,
    .bestgen-rg-final-content > span {

        font-size:
            18px !important;

        line-height:
            18px !important;
    }


    /* HERO */

    .bestgen-rg-hero {

        min-height: auto;
    }


    .bestgen-rg-hero-inner {

        min-height: auto;

        padding-top: 0;
        padding-bottom: 0;
    }


    .bestgen-rg-hero-content {

        width: 100%;

        max-width: none;

        padding:
            54px 0;
    }


    .bestgen-rg-hero-overlay {

        background:
            rgba(
                246,
                244,
                240,
                0.91
            );
    }


    .bestgen-rg-title {

        font-size:
            clamp(
                40px,
                10vw,
                52px
            );

        line-height:
            1.05;
    }


    .bestgen-rg-lead {

        font-size:
            15px;
    }


    .bestgen-rg-meta {

        gap: 13px;
    }


    .bestgen-rg-meta-divider {

        display: none;
    }


    /* QUICK ANSWER */

    .bestgen-rg-answer {

        padding:
            50px 0;
    }


    .bestgen-rg-answer-grid {

        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .bestgen-rg-answer-text {

        padding-top: 20px;
    }


    /* KEY FACTS */

    .bestgen-rg-keyfacts {

        padding:
            46px 0;
    }


    .bestgen-rg-keyfacts-grid {

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


    .bestgen-rg-keyfact,
    .bestgen-rg-keyfact:first-child,
    .bestgen-rg-keyfact:last-child {

        padding:
            19px 20px;
    }


    .bestgen-rg-keyfact:nth-child(odd) {

        padding-left: 0;
    }


    .bestgen-rg-keyfact:nth-child(even) {

        padding-right: 0;
    }


    .bestgen-rg-keyfact::after {

        display: none;
    }


    .bestgen-rg-keyfact:nth-child(odd)::after {

        content: "";

        display: block;

        position: absolute;

        top: 19px;
        right: 0;

        width: 1px;

        height:
            calc(100% - 38px);

        background:
            var(--bestgen-line);
    }


    /* CONTENT */

    .bestgen-rg-content-section {

        padding:
            60px 0 72px;
    }


    .bestgen-rg-toc ol {

        grid-template-columns:
            1fr;
    }


    .bestgen-article-body {

        font-size:
            15px;

        line-height:
            1.78;
    }


    .bestgen-article-body h2 {

        margin-top:
            55px;

        font-size:
            clamp(
                32px,
                8vw,
                40px
            );
    }


    .bestgen-article-body h3 {

        margin-top:
            36px;

        font-size:
            25px;
    }


    /* PRACTICE */

    .bestgen-rg-practice {

        grid-template-columns:
            1fr;

        gap: 8px;

        margin-top: 55px;

        padding:
            30px 27px;
    }


    .bestgen-rg-practice-mark {

        font-size:
            65px;
    }


    .bestgen-rg-practice-text {

        font-size:
            20px;
    }


    /* REVIEW */

    .bestgen-rg-review {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .bestgen-rg-review-meta {

        text-align: left;
    }


    /* DOWNLOAD */

    .bestgen-rg-download {

        grid-template-columns:
            1fr;

        gap: 25px;

        padding:
            30px 27px;
    }


    .bestgen-rg-download
    .bestgen-rg-button {

        width:
            fit-content;
    }


    /* RELATED */

    .bestgen-rg-related {

        padding:
            62px 0;
    }


    .bestgen-rg-related-head {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 16px;
    }


    .bestgen-rg-related-grid {

        grid-template-columns:
            1fr;
    }


    /* FINAL CTA */

    .bestgen-rg-final-inner {

        grid-template-columns:
            1fr;

        gap: 28px;

        padding:
            46px 0 !important;
    }


    .bestgen-rg-final-action {

        justify-self:
            start;
    }

}


/* =========================================================
   SMALL MOBILE <= 520px
========================================================= */

@media (max-width: 520px) {

    .bestgen-rg-keyfacts-grid {

        grid-template-columns:
            1fr;
    }


    .bestgen-rg-keyfact,
    .bestgen-rg-keyfact:first-child,
    .bestgen-rg-keyfact:last-child,
    .bestgen-rg-keyfact:nth-child(odd),
    .bestgen-rg-keyfact:nth-child(even) {

        padding:
            19px 0;

        border-bottom:
            1px solid
            var(--bestgen-line);
    }


    .bestgen-rg-keyfact:last-child {

        border-bottom: 0;
    }


    .bestgen-rg-keyfact::after,
    .bestgen-rg-keyfact:nth-child(odd)::after {

        display: none;
    }


    .bestgen-rg-sources li {

        grid-template-columns:
            1fr;

        gap: 3px;
    }


    .bestgen-rg-source-publisher {

        text-align: left;
    }

}


/* =========================================================
   SMALL MOBILE <= 420px
========================================================= */

@media (max-width: 420px) {

    .bestgen-ratgeber-single {

        --bestgen-side:
            16px;
    }


    .bestgen-rg-hero-content {

        padding:
            46px 0;
    }


    .bestgen-rg-title {

        font-size:
            38px;
    }


    .bestgen-rg-answer-heading h2 {

        font-size:
            35px;
    }


    .bestgen-rg-keyfacts-top h2 {

        font-size:
            35px;
    }


    .bestgen-rg-final-inner {

        padding:
            40px 0 !important;
    }

}

/* =========================================================
   BESTGEN IMMOBILIEN
   RATGEBER HUB — ARTICLE GRID

   DESIGN:
   - 1 Artikel  = große Editorial Card
   - 2 Artikel  = 2 Columns
   - 3+ Artikel = 3 Columns
   - Tablet     = 2 Columns
   - Mobile     = 1 Column

   TYPOGRAPHY:
   Minimum readable font size = 16px

   COLORS:
   Navy:   #17242E
   Text:   #5B605C
   Cream:  #F6F4F0
   Sage:   #8A9583
   Orange: #C48632
========================================================= */


/* =========================================================
   HUB VARIABLES
========================================================= */

.bestgen-ratgeber-hub {

    --rh-side:
        max(
            46px,
            calc((100vw - 1600px) / 2)
        );

    --rh-navy:
        #17242E;

    --rh-text:
        #5B605C;

    --rh-muted:
        #7B807A;

    --rh-cream:
        #F6F4F0;

    --rh-white:
        #FFFFFF;

    --rh-sage:
        #8A9583;

    --rh-orange:
        #C48632;

    --rh-orange-hover:
        #D0913A;

    --rh-line:
        rgba(23, 36, 46, 0.12);

    --rh-serif:
        "Playfair Display",
        Georgia,
        serif;

    --rh-sans:
        "Poppins",
        Arial,
        sans-serif;

    width:
        100%;

    max-width:
        none;

    margin:
        0;

    padding:
        72px 0 90px;

    background:
        #FFFFFF;

    color:
        var(--rh-text);

    font-family:
        var(--rh-sans);
}


/* =========================================================
   RESET
========================================================= */

.bestgen-ratgeber-hub *,
.bestgen-ratgeber-hub *::before,
.bestgen-ratgeber-hub *::after {

    box-sizing:
        border-box;
}


/* =========================================================
   WRAPPER
========================================================= */

.bestgen-rh-wrap {

    width:
        100%;

    max-width:
        none;

    margin:
        0 auto;

    padding-left:
        var(--rh-side);

    padding-right:
        var(--rh-side);
}


/* =========================================================
   GRID — DEFAULT
========================================================= */

.bestgen-rh-grid {

    width:
        100%;

    display:
        grid;

    align-items:
        stretch;

    gap:
        28px;

    margin:
        0;

    padding:
        0;
}


/* =========================================================
   1 ARTICLE
   Large editorial layout
========================================================= */

.bestgen-rh-grid-count-1 {

    grid-template-columns:
        1fr;
}


.bestgen-rh-grid-count-1
.bestgen-rh-card {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    min-height:
        500px;
}


/* Single image */

.bestgen-rh-grid-count-1
.bestgen-rh-card-image {

    height:
        100%;

    min-height:
        500px;

    aspect-ratio:
        auto;
}


/* Single content */

.bestgen-rh-grid-count-1
.bestgen-rh-card-content {

    justify-content:
        center;

    min-height:
        500px;

    padding:
        54px 58px;
}


/* Single title bigger */

.bestgen-rh-grid-count-1
.bestgen-rh-card-title {

    max-width:
        700px;

    font-size:
        clamp(
            42px,
            3.7vw,
            60px
        );
}


/* Single description */

.bestgen-rh-grid-count-1
.bestgen-rh-card-text {

    max-width:
        680px;
}


/* =========================================================
   2 ARTICLES
========================================================= */

.bestgen-rh-grid-count-2 {

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


/* =========================================================
   3+ ARTICLES
========================================================= */

.bestgen-rh-grid-count-many {

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


/* =========================================================
   CARD
========================================================= */

.bestgen-rh-card {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        var(--rh-cream);

    border:
        1px solid
        rgba(23, 36, 46, 0.10);

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


.bestgen-rh-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(23, 36, 46, 0.18);

    box-shadow:
        0 18px 42px
        rgba(23, 36, 46, 0.08);
}


/* =========================================================
   IMAGE LINK
========================================================= */

.bestgen-rh-card-image {

    position:
        relative;

    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    background:
        #E7E7E2;

    text-decoration:
        none !important;
}


/* =========================================================
   IMAGE
========================================================= */

.bestgen-rh-card-image img,
.bestgen-rh-card-img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    margin:
        0;

    padding:
        0;

    object-fit:
        cover;

    object-position:
        center center;

    transition:
        transform 0.45s ease;
}


.bestgen-rh-card:hover
.bestgen-rh-card-image img {

    transform:
        scale(1.035);
}


/* =========================================================
   IMAGE PLACEHOLDER
========================================================= */

.bestgen-rh-placeholder {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    background:
        var(--rh-sage);

    color:
        #FFFFFF;

    font-family:
        var(--rh-serif);

    font-size:
        28px;

    font-weight:
        500;

    line-height:
        1.2;

    text-align:
        center;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.bestgen-rh-card-content {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    min-height:
        350px;

    padding:
        30px 30px 26px;
}


/* =========================================================
   CATEGORY
   Minimum 16px
========================================================= */

.bestgen-rh-category {

    display:
        inline-block;

    width:
        fit-content;

    margin:
        0 0 18px 0;

    padding:
        0;

    color:
        #000000;

    font-family:
        var(--rh-sans);

    font-size:
        16px;

    font-style:
        normal;

    font-weight:
        400;

    line-height:
        1.2;

    letter-spacing:
        0;

    text-transform:
        uppercase;

    text-decoration:
        none;
}


/* =========================================================
   TITLE
========================================================= */

.bestgen-rh-card-title {

    margin:
        0 0 18px 0;

    padding:
        0;

    color:
        var(--rh-navy);

    font-family:
        var(--rh-serif);

    font-size:
        clamp(
            30px,
            2.1vw,
            40px
        );

    font-weight:
        500;

    line-height:
        1.10;

    letter-spacing:
        -0.025em;
}


.bestgen-rh-card-title a,
.bestgen-rh-card-title a:link,
.bestgen-rh-card-title a:visited {

    color:
        var(--rh-navy);

    text-decoration:
        none !important;
}


.bestgen-rh-card-title a:hover,
.bestgen-rh-card-title a:focus {

    color:
        var(--rh-navy);
}


/* =========================================================
   DESCRIPTION
   Minimum 16px
========================================================= */

.bestgen-rh-card-text {

    margin:
        0 0 28px 0;

    padding:
        0;

    color:
        var(--rh-text);

    font-family:
        var(--rh-sans);

    font-size:
        16px;

    font-style:
        normal;

    font-weight:
        400;

    line-height:
        1.72;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.bestgen-rh-card-footer {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        22px;

    margin-top:
        auto;

    padding-top:
        21px;

    border-top:
        1px solid
        var(--rh-line);
}


/* =========================================================
   META
   Minimum 16px
========================================================= */

.bestgen-rh-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    min-width:
        0;

    color:
        var(--rh-muted);

    font-family:
        var(--rh-sans);

    font-size:
        16px;

    font-style:
        normal;

    font-weight:
        400;

    line-height:
        1.45;
}


.bestgen-rh-meta span {

    font-size:
        inherit;

    line-height:
        inherit;
}


.bestgen-rh-meta-dot {

    color:
        var(--rh-sage);
}


/* =========================================================
   ARROW BUTTON
========================================================= */

.bestgen-rh-arrow {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0;

    padding:
        0;

    border:
        1px solid
        var(--rh-orange);

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--rh-orange);

    text-decoration:
        none !important;

    box-shadow:
        none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


/* =========================================================
   SVG
========================================================= */

.bestgen-rh-arrow svg {

    display:
        block;

    width:
        21px;

    height:
        21px;

    margin:
        0;

    padding:
        0;

    overflow:
        visible;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}


/* Prevent global SVG/theme styling */

.bestgen-rh-arrow svg path {

    fill:
        none !important;

    stroke:
        currentColor !important;
}


/* =========================================================
   CARD HOVER ARROW
========================================================= */

.bestgen-rh-card:hover
.bestgen-rh-arrow {

    background:
        var(--rh-orange);

    border-color:
        var(--rh-orange);

    color:
        #FFFFFF;

    transform:
        translateX(2px);
}


.bestgen-rh-arrow:hover,
.bestgen-rh-arrow:focus {

    background:
        var(--rh-orange);

    border-color:
        var(--rh-orange);

    color:
        #FFFFFF;

    outline:
        none;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.bestgen-rh-empty {

    width:
        100%;

    margin:
        0;

    padding:
        50px 30px;

    background:
        var(--rh-cream);

    color:
        var(--rh-text);

    font-family:
        var(--rh-sans);

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.65;

    text-align:
        center;
}


/* =========================================================
   ULTRA WIDE
========================================================= */

@media (min-width: 1693px) {

    .bestgen-ratgeber-hub {

        --rh-side:
            calc((100vw - 1600px) / 2);
    }

}


/* =========================================================
   <= 1400px
========================================================= */

@media (max-width: 1400px) {

    .bestgen-ratgeber-hub {

        --rh-side:
            32px;
    }


    .bestgen-rh-grid {

        gap:
            24px;
    }


    .bestgen-rh-card-content {

        padding:
            28px 26px 24px;
    }


    /* ONE ARTICLE */

    .bestgen-rh-grid-count-1
    .bestgen-rh-card-content {

        padding:
            48px;
    }

}


/* =========================================================
   <= 1200px
========================================================= */

@media (max-width: 1200px) {

    .bestgen-ratgeber-hub {

        --rh-side:
            28px;
    }


    .bestgen-rh-grid-count-many {

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


    .bestgen-rh-grid-count-1
    .bestgen-rh-card {

        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);
    }


    .bestgen-rh-grid-count-1
    .bestgen-rh-card-title {

        font-size:
            clamp(
                38px,
                4vw,
                52px
            );
    }

}


/* =========================================================
   TABLET <= 1024px
========================================================= */

@media (max-width: 1024px) {

    .bestgen-rh-grid-count-1
    .bestgen-rh-card {

        grid-template-columns:
            1fr 1fr;

        min-height:
            440px;
    }


    .bestgen-rh-grid-count-1
    .bestgen-rh-card-image {

        min-height:
            440px;
    }


    .bestgen-rh-grid-count-1
    .bestgen-rh-card-content {

        min-height:
            440px;

        padding:
            38px 34px;
    }


    .bestgen-rh-grid-count-1
    .bestgen-rh-card-title {

        font-size:
            40px;
    }

}


/* =========================================================
   MOBILE <= 767px
========================================================= */

@media (max-width: 767px) {

    .bestgen-ratgeber-hub {

        --rh-side:
            20px;

        padding:
            52px 0 64px;
    }


    /* ALL GRIDS */

    .bestgen-rh-grid,
    .bestgen-rh-grid-count-1,
    .bestgen-rh-grid-count-2,
    .bestgen-rh-grid-count-many {

        grid-template-columns:
            1fr;

        gap:
            24px;
    }


    /* ONE ARTICLE BACK TO NORMAL CARD */

    .bestgen-rh-grid-count-1
    .bestgen-rh-card {

        display:
            flex;

        flex-direction:
            column;

        min-height:
            0;
    }


    .bestgen-rh-grid-count-1
    .bestgen-rh-card-image {

        height:
            auto;

        min-height:
            0;

        aspect-ratio:
            16 / 10;
    }


    .bestgen-rh-grid-count-1
    .bestgen-rh-card-content {

        min-height:
            0;

        padding:
            28px 24px 24px;
    }


    .bestgen-rh-card-image {

        aspect-ratio:
            16 / 10;
    }


    .bestgen-rh-card-content {

        min-height:
            0;

        padding:
            28px 24px 24px;
    }


    .bestgen-rh-card-title,
    .bestgen-rh-grid-count-1
    .bestgen-rh-card-title {

        font-size:
            clamp(
                31px,
                8vw,
                39px
            );
    }


    .bestgen-rh-category,
    .bestgen-rh-card-text,
    .bestgen-rh-meta {

        font-size:
            16px;
    }


    .bestgen-rh-arrow {

        width:
            46px;

        height:
            46px;

        flex-basis:
            46px;
    }


    .bestgen-rh-arrow svg {

        width:
            20px;

        height:
            20px;
    }

}


/* =========================================================
   SMALL MOBILE <= 420px
========================================================= */

@media (max-width: 420px) {

    .bestgen-ratgeber-hub {

        --rh-side:
            16px;
    }


    .bestgen-rh-card-content,
    .bestgen-rh-grid-count-1
    .bestgen-rh-card-content {

        padding:
            24px 20px 21px;
    }


    .bestgen-rh-card-footer {

        align-items:
            flex-end;

        gap:
            16px;
    }


    .bestgen-rh-meta {

        gap:
            5px;
    }

}

/* Ratgeber consistency: CTA label and editorial author. */
.bestgen-ratgeber-single .bestgen-rg-final-content > span {
    color: #FFFFFF !important;
}
.bestgen-ratgeber-single .bestgen-rg-hero-proof a,
.bestgen-ratgeber-single .bestgen-rg-hero-proof a:link,
.bestgen-ratgeber-single .bestgen-rg-hero-proof a:visited {
    color: var(--bestgen-navy);
    text-decoration: underline;
    text-decoration-color: var(--bestgen-line);
    text-underline-offset: .2em;
}
.bestgen-ratgeber-single .bestgen-rg-hero-proof a:hover,
.bestgen-ratgeber-single .bestgen-rg-hero-proof a:focus-visible {
    color: var(--bestgen-sage-dark);
    text-decoration-color: currentColor;
}

/* Category archives reuse the existing Ratgeber card grid. */
.bestgen-ratgeber-archive {
    --archive-side: max(46px, calc((100vw - 1600px) / 2));
    color: #17242E;
    font-family: "Poppins", Arial, sans-serif;
}
.bestgen-ratgeber-archive .bestgen-rh-archive-heading {
    background: #F6F4F0;
    padding: 70px var(--archive-side) 52px;
}
.bestgen-rh-archive-heading h1 {
    margin: 20px 0 24px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(40px, 4.5vw, 66px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: #17242E;
}
.bestgen-rh-archive-heading p {
    max-width: 70ch;
    margin: 0 0 30px;
    color: #5B605C;
    font-size: 17px;
    line-height: 1.72;
}
.bestgen-rh-archive-back,
.bestgen-rh-archive-back:visited {
    color: #5B605C;
    text-decoration: underline;
    text-underline-offset: .2em;
    font-size: 16px;
}
.bestgen-rh-archive-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.bestgen-rh-archive-nav a,
.bestgen-rh-archive-nav a:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(23,36,46,.16);
    color: #17242E;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
}
.bestgen-rh-archive-nav a[aria-current="page"] {
    background: #17242E;
    color: #FFFFFF;
    border-color: #17242E;
}
.bestgen-rh-archive-nav a:hover {
    background: #EEF0EB;
    color: #17242E;
}
.bestgen-ratgeber-archive a:focus-visible {
    outline: 2px solid #17242E;
    outline-offset: 3px;
}
.bestgen-rh-pagination {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}
.bestgen-rh-pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 14px;
    color: #17242E;
    border: 1px solid rgba(23,36,46,.16);
}
.bestgen-rh-pagination .current {
    color: #FFFFFF;
    background: #17242E;
}
@media (max-width: 767px) {
    .bestgen-ratgeber-archive { --archive-side: 20px; }
    .bestgen-ratgeber-archive .bestgen-rh-archive-heading {
        padding-top: 40px;
        padding-bottom: 36px;
    }
}
@media (max-width: 420px) {
    .bestgen-ratgeber-archive { --archive-side: 16px; }
}