/* =========================================================
   Schinke Immobilien — Brand Overrides
   Paleta klienta + globalna typografia
   Wczytywane PO custom.css (wyższy priorytet)
   ========================================================= */

:root {
    /* Paleta klienta */
    --brand-trust-navy: #0F2747;   /* główny dunkelblau */
    --brand-elegant-gold: #C7A35D; /* akcent / przyciski */
    --brand-dark-sapphire: #081421;/* bardzo ciemny */
    --brand-light-stone: #E4E1DC;  /* jasne tło */

    /* Aliasy semantyczne */
    --brand-primary: var(--brand-trust-navy);
    --brand-accent:  var(--brand-elegant-gold);
    --brand-dark:    var(--brand-dark-sapphire);
    --brand-light:   var(--brand-light-stone);

    /* Typografia */
    --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Typografia globalna ---------- */
body,
p, li, a, span, div, label, input, textarea, select, button,
.btn, .btn-default, .btn-secondary {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.section-title h1,
.section-title h2,
.section-title h3,
.section-title h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ---------- Kolor tekstu / nagłówków: dunkelblau ---------- */
body {
    color: var(--brand-primary);
}

h1, h2, h3, h4, h5, h6,
.section-title h1,
.section-title h2,
.section-title h3,
.section-title h4,
.section-title h3.wow,
.section-title h2 span {
    color: var(--brand-primary);
}

/* Sekcje na ciemnym tle — wymuszamy biel (ważniejsze niż globalne navy) */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section p,
.dark-section h2 span,
.dark-section .section-title h2,
.dark-section .section-title h3,
.dark-section .section-title h2 span {
    color: #ffffff !important;
}
.erfolge-zahlen h1,
.erfolge-zahlen h2,
.erfolge-zahlen h3,
.erfolge-zahlen h4,
.erfolge-zahlen p,
.erfolge-zahlen .section-title h2,
.erfolge-zahlen .section-title h3 {
    color: #ffffff !important;
}
.page-header h1,
.page-header h2,
.page-header h3,
.page-header p {
    color: #ffffff !important;
}
.cta-banner h2,
.cta-banner p {
    color: #ffffff !important;
}
/* Erfolge "in Zahlen" span: gold */
.erfolge-zahlen .section-title h2 span {
    color: var(--brand-accent) !important;
}

/* ---------- Akcent: gold ---------- */
.btn-default,
a.btn-default {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #ffffff;
}

.btn-secondary,
a.btn-secondary {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #ffffff;
}

.btn-default:hover,
a.btn-default:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

.btn-secondary:hover,
a.btn-secondary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

/* Eleganckie, mniejsze CTA (zgodnie z uwagą klienta) */
.btn-compact {
    font-size: 14px;
    padding: 12px 56px 12px 18px;
    letter-spacing: 0.2px;
}

.btn-compact::before {
    width: 18px;
    height: 18px;
    right: 14px;
}

@media (max-width: 767.98px) {
    .btn-compact {
        font-size: 13px;
        padding: 11px 50px 11px 16px;
    }
}

/* ---------- Hero: złoty gradient na mobile ---------- */
@media (max-width: 767.98px) {
    .hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(to top, rgba(199, 163, 93, 0.4) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }
    .hero .container {
        position: relative;
        z-index: 1;
    }
}

/* ---------- About us: jedno zdjęcie na pełną szerokość + mobile spacing ---------- */
@media (max-width: 991.98px) {
    .about-us .about-us-images {
        margin-bottom: 40px !important;
    }
    .about-us .about-us-content {
        padding-top: 20px !important;
    }
    .about-us .about-us-content .section-title h3 {
        margin-top: 0 !important;
    }
}

/* ---------- About us: jedno zdjęcie na pełną szerokość ---------- */
.about-us-images {
    padding: 0 !important;
    margin: 0 !important;
}
.about-us-images .about-image-1 {
    width: 100%;
}
.about-us-images .about-image-1 figure {
    border-radius: 12px;
    overflow: hidden;
}
.about-us-images .about-image-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 520px;
}

/* "Bekannt aus" label: dunkelblau statt grau (życzenie klienta) */
.bekannt-aus .bekannt-label {
    color: var(--brand-primary);
}

/* CTA-Banner: oba przyciski jednolite gold (życzenie klienta) */
.cta-banner .cta-btn-secondary {
    background-color: var(--brand-accent);
    background-image: none;
    color: #ffffff;
}
.cta-banner .cta-btn-secondary:hover {
    background-color: var(--brand-primary);
    color: #ffffff;
}

/* ---------- Page header split (foto rechts) ---------- */
.page-header-split {
    position: relative;
    overflow: hidden;
    min-height: 360px;
}
.page-header-split .page-header-box {
    position: relative;
    z-index: 2;
}
/* Breadcrumb: ganz oben, klein, gold links */
.page-header-split .page-header-box .breadcrumb {
    margin-bottom: 24px;
}
.page-header-split .breadcrumb-item a {
    color: var(--brand-accent) !important;
}
.page-header-split .breadcrumb-item.active {
    color: #ffffff !important;
    font-weight: 600;
}
.page-header-split .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.5) !important;
}
/* H1 split header: biały */
.page-header.page-header-split .page-header-box h1 {
    color: #ffffff !important;
}
/* Subtitle: weiß */
.page-header-subtitle {
    color: rgba(255,255,255,.85);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}
/* Foto rechts mit diagonalem Clip */
.page-header-split-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}
.page-header-split-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-header-split-photo::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 120px;
    background: linear-gradient(to right, var(--brand-primary) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}
@media (max-width: 991.98px) {
    .page-header-split-photo {
        display: none;
    }
}

/* ---------- Über uns: "Was uns auszeichnet" ---------- */
.auszeichnet-section {
    padding: 80px 0;
    background: #ffffff;
}
.auszeichnet-overtitle {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 10px;
}
.auszeichnet-heading {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 14px;
}
.auszeichnet-heading span {
    color: var(--brand-accent);
}
.auszeichnet-sub {
    font-size: 15px;
    color: #5a6577;
    max-width: 600px;
    margin: 0 auto;
}
.auszeichnet-card {
    text-align: center;
    padding: 40px 28px;
    height: 100%;
}
.auszeichnet-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}
.auszeichnet-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
.auszeichnet-card h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 14px;
    line-height: 1.35;
}
.auszeichnet-card h3 span {
    color: var(--brand-accent);
}
.auszeichnet-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #4a5568;
}
@media (max-width: 767.98px) {
    .auszeichnet-section { padding: 50px 0; }
    .auszeichnet-heading { font-size: 28px; }
}

/* ---------- Über uns: "Unser Anspruch" ---------- */
.anspruch-section {
    padding: 0 0 60px;
    margin-top: -20px;
}
.anspruch-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--brand-accent);
    border-radius: 14px;
    padding: 28px 36px;
    border: none;
}
.anspruch-bar .anspruch-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.anspruch-bar .anspruch-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.anspruch-text h3 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0 0 8px;
}
.anspruch-text p {
    font-size: 14px;
    color: rgba(255,255,255,.85);
    margin: 0;
    line-height: 1.6;
}
.anspruch-text strong {
    color: var(--brand-primary);
}
@media (max-width: 575.98px) {
    .anspruch-bar {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }
}

/* ---------- Maklergeschäft: 2x2 karty ---------- */
.makler-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    background: transparent;
    padding: 0;
}
.makler-card {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 2px 16px rgba(15, 39, 71, 0.06);
}
.makler-card-icon {
    flex-shrink: 0;
}
.makler-card-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.makler-card-body {
    flex: 1;
}
.makler-card-body h3 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0 0 8px;
}
.makler-card-body p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--brand-primary);
    opacity: 0.75;
    margin: 0 0 10px;
}
.makler-mehr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-accent);
    text-decoration: none;
}
.makler-mehr:hover {
    color: var(--brand-primary);
}
.makler-mehr i {
    font-size: 11px;
}
/* ---------- Gold underline pod głównymi nagłówkami (nie accordion) ---------- */
.service-single-content > .service-entry h2,
.service-single-content > .benefit-service-box h2,
.service-single-content > h2,
.page-header-split .page-header-box h1 {
    position: relative;
    padding-bottom: 16px;
}
.service-single-content > .service-entry h2::after,
.service-single-content > .benefit-service-box h2::after,
.service-single-content > h2::after,
.page-header-split .page-header-box h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--brand-accent);
    border-radius: 2px;
}
.accordion-header h2::after,
.section-title h2::after {
    display: none !important;
}
@media (max-width: 575.98px) {
    .makler-grid { grid-template-columns: 1fr; }
}

/* ---------- Maklergeschäft: Leistungen-Grid 3x2 ---------- */
.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #ffffff;
    border-top: 1px solid rgba(15, 39, 71, 0.08);
}
.leistungen-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 18px;
    border-bottom: 1px solid rgba(15, 39, 71, 0.08);
    border-right: 1px solid rgba(15, 39, 71, 0.08);
}
.leistungen-item:nth-child(3n) {
    border-right: none;
}
.leistungen-item .icon-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
}
.leistungen-item .icon-circle i {
    font-size: 18px;
}
.leistungen-item strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary);
    display: block;
    margin-bottom: 4px;
}
.leistungen-item p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--brand-primary);
    opacity: 0.75;
    margin: 0;
}
.leistungen-item .icon-circle {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
}
.leistungen-item .icon-circle img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}
@media (max-width: 767.98px) {
    .leistungen-grid { grid-template-columns: repeat(2, 1fr); }
    .leistungen-item:nth-child(3n) { border-right: 1px solid rgba(15, 39, 71, 0.08); }
    .leistungen-item:nth-child(2n) { border-right: none; }
}
@media (max-width: 480px) {
    .leistungen-grid { grid-template-columns: 1fr; }
    .leistungen-item { border-right: none !important; }
}

/* ---------- Finanzberatung: numerowana lista jak na PDF ---------- */
.finanz-list {
    background: transparent;
    padding: 0;
}
.finanz-item {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding: 30px 0;
    border-bottom: 1px solid rgba(15, 39, 71, 0.08);
}
.finanz-item:last-child {
    border-bottom: none;
}
/* Wrapper: numer-badge obok icon-circle, lekko nachodzi */
.icon-badge-wrap {
    position: relative;
    min-width: 100px;
    width: 100px;
    height: 90px;
    flex-shrink: 0;
}
.icon-badge-wrap .icon-circle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
}
.icon-badge-wrap .finanz-number {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(199, 163, 93, 0.4);
}
.finanz-number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--brand-accent);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Globalne kółko z ikoną — 1 klasa, 1 zmiana = wszędzie zmienione */
.icon-circle {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 50%;
    background: var(--brand-light);
    border: 1px solid rgba(15, 39, 71, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-circle i {
    font-size: 26px;
    color: var(--brand-primary);
}
/* Wariant: outline gold (bez wypełnienia) */
.icon-circle--outline {
    background: transparent;
    border: 2px solid var(--brand-accent);
}
/* Wariant: wypełniony gold */
.icon-circle--filled {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
}
.icon-circle--filled i {
    color: #ffffff;
}
/* Wariant: wypełniony navy */
.icon-circle--navy {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.icon-circle--navy i {
    color: #ffffff;
}
/* Wariant: stone/light (jak na Über uns 1. i 3. karta) */
.icon-circle--light {
    background: var(--brand-light);
    border-color: var(--brand-light);
}
.icon-circle--light i {
    color: var(--brand-primary);
}
.finanz-body h3 {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0 0 10px;
    letter-spacing: 0;
}
.finanz-body p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--brand-primary);
    margin: 0;
    opacity: 0.75;
}
.finanz-mehr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-accent);
    text-decoration: none;
}
.finanz-mehr:hover {
    color: var(--brand-primary);
}
.finanz-mehr i {
    font-size: 11px;
}
@media (max-width: 575.98px) {
    .finanz-item { flex-wrap: wrap; gap: 12px; }
    .finanz-body { width: 100%; }
}

/* ---------- Hero footer: ramka gold ---------- */
.hero-footer {
    border-color: var(--brand-accent) !important;
}

/* ---------- Sidebar Leistungen: strzałki granat ---------- */
.service-catagery-list ul li a::before {
    filter: brightness(0) !important;
}

/* ---------- Sidebar Leistungen: złoty box ---------- */
.service-catagery-list {
    background: var(--brand-accent) !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.service-catagery-list h3 {
    background: var(--brand-accent) !important;
    font-size: 24px !important;
    padding: 28px 30px !important;
    color: var(--brand-primary) !important;
}
.service-catagery-list ul {
    background: var(--brand-accent) !important;
}

/* ---------- Sidebar CTA box: granat + zaokrąglone rogi ---------- */
.sidebar-cta-box {
    background: var(--brand-primary) !important;
    border-radius: 12px !important;
}

/* ---------- Bündige Ränder: upload wyrównany z polami ---------- */
.contact-form .field-upload {
    margin-top: 4px !important;
}
.contact-form .field-upload .upload-label {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

/* ---------- Sidebar CTA: text gold ---------- */
.sidebar-cta-content h3 {
    color: var(--brand-accent) !important;
}

/* ---------- Sidebar CTA button: gold z białym tekstem ---------- */
.sidebar-cta-btn .btn-default.btn-highlighted {
    background: var(--brand-accent) !important;
    border: 2px solid var(--brand-accent) !important;
    transition: all 0.3s ease !important;
}
.sidebar-cta-btn .btn-default.btn-highlighted span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}
.sidebar-cta-btn .btn-default.btn-highlighted:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
}
.sidebar-cta-btn .btn-default.btn-highlighted:hover span {
    color: var(--brand-primary) !important;
    -webkit-text-fill-color: var(--brand-primary) !important;
}
.sidebar-cta-btn .btn-default.btn-highlighted::before {
    filter: brightness(0) invert(1) !important;
}
.sidebar-cta-btn .btn-default.btn-highlighted:hover::before {
    filter: brightness(0) !important;
}

/* ---------- PNG ikony — bez kółek, większe ---------- */
.icon-circle {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
}
.icon-circle img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: none;
}

/* ---------- Pierwszy service-entry: bez margin-top ---------- */
.service-single-content > .service-entry:first-child .benefit-service-box {
    margin-top: 0 !important;
}

/* ---------- Kontakt submit button: kompakter ---------- */
.contact-form .form-submit .btn-default {
    width: auto !important;
    display: inline-block !important;
}

/* ---------- Footer: gold linie między sekcjami ---------- */
.footer-privacy-policy {
    border-top: 1px solid var(--brand-accent) !important;
    padding-top: 36px !important;
    margin-top: 40px !important;
}
.footer-copyright {
    border-top: 1px solid var(--brand-accent) !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
}

/* ---------- Footer: gold underline pod tytułami ---------- */
.footer-links h3 {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 16px !important;
}
.footer-links h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--brand-accent);
    border-radius: 2px;
}

/* ---------- FAQ: złote + ikony ---------- */
.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
    display: block !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23C7A35D' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E") !important;
    background-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    transition: transform .3s;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
    display: block !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23C7A35D' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E") !important;
    transform: none !important;
}

/* ---------- Service items: gold gradient hover ---------- */
.service-image a figure::before {
    background: linear-gradient(0deg, rgba(199, 163, 93, 0.85) 0%, rgba(199, 163, 93, 0) 60%) !important;
}
.service-item.active .service-image a figure::before,
.service-item:hover .service-image a figure::before {
    background: linear-gradient(0deg, rgba(199, 163, 93, 0.9) 0%, rgba(199, 163, 93, 0.3) 100%) !important;
}

/* Team-Karten: Name & Position nicht über Bild */
.team-body {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 14px 18px !important;
}
.team-content h3 {
    font-size: 16px !important;
    margin-bottom: 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-content p {
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-image img,
.team-image a img,
.team-image figure img {
    aspect-ratio: 1 / 1.4 !important;
    object-position: center 10% !important;
}

/* Drobne akcenty linków na granat */
a {
    color: var(--brand-primary);
    transition: color 0.2s;
}
a:hover {
    color: var(--brand-accent);
}
a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
    outline: none;
}
*:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

/* =========================================================
   Referenz-Modal — zentriert, modern, foto+text side-by-side
   ========================================================= */
.ref-modal {
    display: none;
    align-items: center;
    justify-content: center;
}
.ref-modal.is-open {
    display: flex;
}
.ref-modal-dialog {
    max-width: 960px !important;
    margin: auto !important;
    border-radius: 14px !important;
    max-height: 85vh !important;
}
.ref-modal-grid {
    grid-template-columns: 1fr 1fr !important;
}
.ref-modal-image {
    min-height: auto !important;
    max-height: 70vh;
}
.rm-gallery-main {
    aspect-ratio: 4 / 3 !important;
}
.ref-modal-body {
    padding: 28px 32px 24px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ref-modal-body h2 {
    font-size: 24px !important;
}
.ref-modal-meta {
    justify-content: flex-start !important;
}
.ref-modal-actions {
    gap: 10px !important;
}
@media (max-width: 767.98px) {
    .ref-modal-dialog {
        margin: 10px !important;
        max-height: 95vh !important;
    }
    .ref-modal-grid {
        grid-template-columns: 1fr !important;
    }
    .rm-gallery-main {
        aspect-ratio: 16 / 10 !important;
    }
    .ref-modal-body {
        padding: 20px 18px 18px !important;
    }
}

/* =========================================================
   Referenz-Modal Gallery & Video
   ========================================================= */

/* Gallery main area — relative for arrows and counter */
.rm-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--brand-dark-sapphire);
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.rm-gallery-main img,
.rm-gallery-main iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.rm-gallery-main iframe {
    object-fit: contain;
    border: none;
}

/* Gallery navigation arrows */
.rm-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 39, 71, 0.7);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 5;
    backdrop-filter: blur(4px);
}

.rm-gallery-arrow:hover {
    background: var(--brand-accent);
    transform: translateY(-50%) scale(1.1);
}

.rm-arrow-left {
    left: 12px;
}

.rm-arrow-right {
    right: 12px;
}

/* Image counter badge */
.rm-gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(15, 39, 71, 0.75);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    z-index: 5;
}

/* Thumbnail strip */
.rm-thumbstrip {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    background: rgba(15, 39, 71, 0.05);
    scrollbar-width: thin;
    scrollbar-color: var(--brand-accent) transparent;
}

.rm-thumbstrip::-webkit-scrollbar {
    height: 4px;
}

.rm-thumbstrip::-webkit-scrollbar-thumb {
    background: var(--brand-accent);
    border-radius: 4px;
}

.rm-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 48px;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--brand-light-stone);
    padding: 0;
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.6;
}

.rm-thumb:hover {
    opacity: 1;
}

.rm-thumb.active {
    border-color: var(--brand-accent);
    opacity: 1;
}

.rm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video thumb icon */
.rm-thumb-video {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-dark-sapphire);
    color: #ffffff;
    font-size: 16px;
}

.rm-thumb-video.active {
    background: var(--brand-primary);
}

/* Video button in modal actions */
.ref-modal-actions .btn-outline {
    border: 2px solid var(--brand-accent);
    background: transparent;
    color: var(--brand-accent);
}

.ref-modal-actions .btn-outline:hover {
    background: var(--brand-accent);
    color: #ffffff;
}

/* Responsive adjustments for gallery modal */
@media (max-width: 767.98px) {
    .rm-gallery-main {
        aspect-ratio: 4 / 3;
        border-radius: 0;
    }

    .rm-gallery-arrow {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .rm-arrow-left {
        left: 8px;
    }

    .rm-arrow-right {
        right: 8px;
    }

    .rm-thumb {
        flex: 0 0 52px;
        width: 52px;
        height: 40px;
    }

    .rm-thumbstrip {
        padding: 8px 10px;
        gap: 5px;
    }
}