:root {
    --accent: #ff1a75;
    --ribbon-color: #ff1a75;         /* Zurück zur originalen Pink-Farbe */
    --ribbon-height: 3.2rem;         /* Doppelte Größe */
    
    /* Logo sizes override: 3x desktop, 2x mobile (base was 34px) */
    --height-logo-header: 102px;            /* desktop header (3x) */
    --height-logo-footer: 102px;            /* desktop footer (3x) */
    --height-logo-mobile-header: 68px;      /* mobile header (2x) */
    --height-logo-mobile-footer: 68px;      /* mobile footer (2x) */
}

/* === Ribbon-Card =========================================== */
.cta-ribbon-card {
    position: relative;
    overflow: hidden;                /* Ribbon bleibt innerhalb der Card */
    width: 100%;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    
    /* Konsistente Abstände vor und nach der CTA-Card - stärker forciert */
    margin: 3rem auto !important;   /* 3rem oben/unten, auto links/rechts, forciert */
    display: block !important;       /* Sicherstellen dass es als Block-Element behandelt wird */
}

/* Zusätzliche Abstände für bessere Sichtbarkeit */
.post-content .cta-ribbon-card,
.gh-content .cta-ribbon-card {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

/* ---------- Ribbon (nur über Bild-Ecke) ---------- */
.ribbon {
    position: absolute;
    top: 15px;
    right: -50px;                    /* Mehr Platz für größeres Ribbon */
    width: 200px;                    /* Doppelt so breit */
    height: var(--ribbon-height);
    background: var(--ribbon-color); /* Zurück zur originalen Farbe */
    color: #fff;
    font-size: 1.3rem;               /* Doppelt so große Schrift */
    font-weight: 700;
    line-height: var(--ribbon-height);
    text-align: center;
    letter-spacing: .5px;
    text-transform: uppercase;
    transform: rotate(45deg);
    transform-origin: center;
    z-index: 10;
    pointer-events: none;
}

/* ---------- Bild ---------- */
.cta-ribbon-card img {
    width: 100%;
    aspect-ratio: 16 / 9; /* fixed ratio for consistent look */
    height: auto; /* height derived from aspect ratio */
    object-fit: cover;
    display: block;
    border-radius: 1rem 1rem 0 0;
}

/* ---------- Textbereich ---------- */
.cta-body {
    padding: 1.4rem 1.2rem;
    text-align: center;
    background: linear-gradient(180deg, #fff4f9, #ffe8f3);
    border-radius: 0 0 1rem 1rem;
}

.cta-body h3 {
    font-family: var(--font-family-three);   /* Font-family-three wie gewünscht */
    font-weight: var(--font-weight-three-bold); /* Passende Schriftstärke für font-family-three */
    font-size: 2.4rem;                      /* Responsive wie Blockquotes - Desktop */
    line-height: 1.4;                       /* Gleiche Zeilenhöhe */
    margin: 0 0 1rem;
}

/* Responsive Font-Sizes wie bei Blockquotes */
@media (max-width: 480px) {
    .cta-body h3 {
        font-size: 2rem;                    /* Mobile Größe wie Blockquotes */
    }
}

.cta-body h3 a {
    color: #222;
    text-decoration: none;
}

.cta-body h3 a:hover {
    color: var(--accent);
}

.cta-btn {
    display: inline-block;
    padding: .7rem 1.6rem;
    border-radius: 99rem;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-family-three);   /* Gleiche Schrift wie andere Buttons */
    font-size: 1.8rem;                      /* Gleiche Größe wie andere Buttons */
    font-weight: var(--font-weight-three-medium); /* Gleiche Schriftstärke */
    text-decoration: none;
    transition: background .2s;
}

.cta-btn:hover {
    background: #cc005e;
}

/* --- Responsive Anpassungen --- */
@media (max-width: 359px) {
    /* Keep ratio; no fixed height on very small screens */
}

/* --- Spacing tweaks: Related posts (special section) --- */
.special-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.special-wrap {
    margin-bottom: 0 !important;
}

@media (max-width: 480px) {
    .special-wrap,
    .special-wrap .item {
        margin-bottom: 0 !important;
    }
}

/* --- Spacing tweaks: Comments above related --- */
.comments-section {
    margin-bottom: 0 !important; /* was 7vh */
}

.comments-content > div:last-of-type {
    padding-bottom: 2vh !important; /* was 8vh; keep a small buffer */
}

/* --- Spacing tweaks: Footer gap under post --- */
.footer-wrap {
    margin-top: 2vh !important; /* was 8vh in screen.css */
}

.footer-section .subscribe-form {
    margin-bottom: 2vh !important; /* was 8vh */
}

/* --- Spacing tweaks: Post content bottom gap --- */
.post-content {
    margin-bottom: 5vh !important; /* was 15vh in screen.css */
}

/* --- Footer: 2-column layout (links left, copyright right) --- */
.footer-nav {
    align-items: flex-start;
}

.footer-nav > .footer-copyright {
    margin-left: auto; /* push to the right */
    width: auto !important;
    margin-top: 0 !important;
    padding-left: 2vw;
}

@media (max-width: 768px) {
    .footer-nav > .footer-copyright {
        width: 100% !important;
        margin-left: 0;
        padding-left: 0;
        margin-top: 2vh !important;
    }
}

/* --- Disable social share buttons --- */
.post-share-wrap a {
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.5;
}

.post-share-wrap svg:hover {
    opacity: inherit !important;
    transform: none !important;
}

/* Hide copy feedback + input to avoid confusion */
.post-share .share-link-info,
.post-share #copy-link {
    display: none !important;
}