/* ==========================================================================
   CUSTOM CSS – Amelia Pro Overrides & Extras
   Praxis Anzhelika Wyss Theme v5.20.6
   Surgical overrides: only outer container + colors, never icon internals.
   ========================================================================== */

/* --- 1. OUTER CONTAINER ONLY: Remove widget look --- */
body .amelia-booking-wrapper {
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Direct children only (3 levels) – won't touch icons/badges deeper inside */
body .amelia-booking-wrapper > div,
body .amelia-booking-wrapper > div > div,
body .amelia-booking-wrapper > div > div > div,
body .amelia-v2-booking > div,
body .amelia-v2-booking > div > div,
body .amelia-v2-booking > div > div > div,
body [id^="amelia-app-booking"] > div,
body [id^="amelia-app-booking"] > div > div,
body [id^="amelia-app-booking"] > div > div > div {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- 2. BUTTONS: Gold --- */
body .amelia-v2-booking button[class*="primary"],
body .amelia-v2-booking .el-button--primary,
body [id^="amelia-app-booking"] button[class*="primary"] {
    background-color: #C5A55A !important;
    border-color: #C5A55A !important;
    color: #2D2D2D !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    border-radius: 0 !important;
    padding: 14px 32px !important;
    transition: all 0.3s ease !important;
}
body .amelia-v2-booking button[class*="primary"]:hover,
body [id^="amelia-app-booking"] button[class*="primary"]:hover {
    background-color: #A8893E !important;
    border-color: #A8893E !important;
    box-shadow: 0 8px 30px rgba(197,165,90,0.3) !important;
}

/* --- 3. HEADINGS: Playfair --- */
body .amelia-v2-booking h2,
body .amelia-v2-booking h3,
body .amelia-v2-booking h4 {
    font-family: 'Playfair Display', serif !important;
    color: #2D2D2D !important;
}

/* --- 4. LINKS: Gold --- */
body .amelia-v2-booking a:not([class*="icon"]):not(button) {
    color: #C5A55A !important;
}
body .amelia-v2-booking a:not([class*="icon"]):not(button):hover {
    color: #A8893E !important;
}

/* --- 5. FORM INPUTS: Gold focus, no radius --- */
body .amelia-v2-booking input:not([type="checkbox"]):not([type="radio"]),
body .amelia-v2-booking select,
body .amelia-v2-booking textarea,
body .amelia-v2-booking .el-input__inner {
    border-radius: 0 !important;
    font-family: 'Lato', sans-serif !important;
}
body .amelia-v2-booking input:focus,
body .amelia-v2-booking select:focus,
body .amelia-v2-booking textarea:focus,
body .amelia-v2-booking .el-input__inner:focus {
    border-color: #C5A55A !important;
    box-shadow: 0 0 0 2px rgba(197,165,90,0.15) !important;
}

/* --- 6. CHECKBOX/RADIO: Gold when checked --- */
body .amelia-v2-booking .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #C5A55A !important;
    border-color: #C5A55A !important;
}
body .amelia-v2-booking .el-switch.is-checked .el-switch__core {
    background-color: #C5A55A !important;
    border-color: #C5A55A !important;
}

/* --- 7. SELECT DROPDOWN ITEMS --- */
body .el-select-dropdown__item.selected,
body .el-select-dropdown__item.hover,
body .el-select-dropdown__item:hover {
    color: #866D2E !important;
    background-color: rgba(197,165,90,0.1) !important;
}

/* --- 8. CONFIRMATION --- */
body .amelia-v2-booking [class*="congratulations"] {
    background-color: #F8F5F0 !important;
}

/* --- 9. PROGRESS BAR --- */
body .amelia-v2-booking .el-progress-bar__inner {
    background-color: #C5A55A !important;
}

/* --- WhatsApp Floating Button --- */

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37,211,102,0.4);
}

.whatsapp-float svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

/* --- Responsive Amelia (Mobile-first) --- */

.amelia-booking-wrapper {
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Mobile: sidebar stacks on top, no horizontal scroll */
.amelia-v2-booking .amelia-v2-booking__wrapper {
    padding: 0 !important;
    border-radius: 0 !important;
}

@media (min-width: 769px) {
    .amelia-booking-wrapper {
        padding: inherit !important;
    }

    .amelia-v2-booking .amelia-v2-booking__wrapper {
        padding: inherit !important;
    }
}

/* Mobile: full-width buttons */
@media (max-width: 768px) {
    .amelia-v2-booking .el-button--primary,
    .amelia-v2-booking [class*="am-button"][class*="filled"] {
        width: 100% !important;
        padding: 16px 24px !important;
    }

    .amelia-v2-booking [class*="__sidebar"],
    .amelia-v2-booking [class*="am-fs__sidebar"] {
        border-radius: 0 !important;
    }
}

/* --- Print Styles --- */

@media print {
    .site-nav,
    .nav-toggle,
    .cta-banner,
    .whatsapp-float,
    .amelia-booking-wrapper {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}

/* ========================================
   NEURO WEBDESIGN ENHANCEMENTS
   ======================================== */

/* Topbar (Mobile Base: compact) */
.topbar {
    background: var(--anthracite);
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar__inner { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.72rem; flex-wrap: wrap; }
.topbar__phone { color: var(--gold); text-decoration: none; }
.topbar__phone:hover { color: var(--gold-dark); }
.topbar__sep { color: rgba(255,255,255,0.3); }
.topbar__text { color: rgba(255,255,255,0.5); }
.topbar__address { display: inline; }

@media (min-width: 769px) {
    .topbar__inner { flex-wrap: nowrap; gap: 24px; font-size: 0.8rem; }
}

/* Sticky Mobile CTA (Mobile Base: visible) */
.mobile-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--anthracite);
    padding: 12px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.mobile-cta.visible { transform: translateY(0); }
.mobile-cta .btn { width: 100%; max-width: 400px; font-size: 1rem; padding: 14px 24px; }
body { padding-bottom: 70px; }

@media (min-width: 769px) {
    .mobile-cta { display: none; }
    body { padding-bottom: 0; }
}

/* Anchor Pricing (Streichpreis) */
.price-anchor {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-right: 4px;
}
.price-savings { 
    display: inline-block;
    background: rgba(197,165,90,0.1);
    color: var(--gold-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

/* Before/After Slider */
.ba-slider {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
}
.ba-slider img {
    display: block;
    width: 100%;
    height: auto;
}
.ba-slider__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.ba-slider__overlay img {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}
.ba-slider__handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: var(--gold);
    transform: translateX(-50%);
    z-index: 2;
}
.ba-slider__handle::after {
    content: '⟷';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--gold);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ba-slider__label {
    position: absolute;
    bottom: 12px;
    padding: 4px 12px;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    z-index: 3;
}
.ba-slider__label--before { left: 12px; }
.ba-slider__label--after { right: 12px; }

/* Storytelling section */
.section--creme { background: var(--creme); }

/* Trust Partners Section */
.trust-partner:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(197,165,90,0.15);
}
.trust-partner img {
    transition: all 0.3s ease;
}
.trust-partner svg {
    transition: opacity 0.3s ease;
}
/* Trust Partners (Mobile Base: compact) */
.trust-partners { gap: 16px !important; }
.trust-partner { padding: 10px 14px !important; }

@media (min-width: 769px) {
    .trust-partners { gap: 40px !important; }
    .trust-partner { padding: 12px 20px !important; }
}

/* ==========================================================================
   V3.0 ADDITIONS – All 28 Feedback Points
   ========================================================================== */

/* --- OVERFLOW FIX (#27) --- */
html, body { overflow-x: hidden; max-width: 100vw; }

/* --- SCROLL REVEAL (#25 from earlier, scroll animations) --- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.15s; }
.reveal.delay-2 { transition-delay: 0.3s; }

/* --- TRUST BAR NUMBERS (#1) --- */
.trust-bar--numbers { background: var(--anthracite); color: #fff; padding: 2rem 20px; }
.trust-bar--numbers .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.trust-bar-item { display: flex; align-items: center; gap: 1rem; font-size: 0.78rem; color: rgba(255,255,255,0.6); }
.trust-bar-item .num { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--gold); line-height: 1; }
.trust-bar-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.1); }
@media (max-width: 768px) {
    .trust-bar--numbers .container { justify-content: center; gap: 1.5rem; }
    .trust-bar-divider { display: none; }
    .trust-bar-item .num { font-size: 1.5rem; }
}

/* --- SERVICE CARDS ENHANCED (#3) --- */
.service-card { cursor: pointer; text-align: left; }
.service-card::before { content: ''; position: absolute; inset: 0; background: var(--anthracite); transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s cubic-bezier(0.76,0,0.24,1); z-index: 0; }
.service-card:hover::before { transform: scaleY(1); }
.service-card > * { position: relative; z-index: 1; }
.sc-num { font-family: 'Playfair Display', serif; font-size: 3rem; color: rgba(0,0,0,0.06); font-weight: 300; line-height: 1; margin-bottom: 0.8rem; transition: color 0.4s; }
.service-card:hover .sc-num { color: rgba(255,255,255,0.08); }
.service-card:hover h3, .service-card:hover p { color: rgba(255,255,255,0.85); }
.sc-benefits { list-style: none; margin: 12px 0 20px; width: 100%; }
.sc-benefits li { font-size: 0.82rem; padding: 6px 0; color: var(--text-light); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 8px; transition: color 0.4s, border-color 0.4s; }
.sc-benefits li::before { content: '—'; color: var(--gold); flex-shrink: 0; }
.service-card:hover .sc-benefits li { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.08); }
.sc-footer { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: auto; }
.sc-price { font-size: 0.82rem; color: var(--text-light); transition: color 0.4s; }
.sc-price strong { font-size: 1.1rem; color: var(--anthracite); transition: color 0.4s; }
.service-card:hover .sc-price, .service-card:hover .sc-price strong { color: rgba(255,255,255,0.8); }
.sc-arrow { width: 36px; height: 36px; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 1rem; transition: all 0.3s; text-decoration: none; }
.service-card:hover .sc-arrow { border-color: var(--gold); color: var(--gold); }

/* --- PRICING TABS (#9, #11) --- */
.pricing-tabs { display: flex; border-bottom: 1px solid var(--border-light); margin-bottom: 2.5rem; justify-content: center; }
.p-tab { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.9rem 2rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-light); cursor: pointer; transition: all 0.3s; font-family: 'Lato', sans-serif; }
.p-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.p-panel { display: none; }
.p-panel.active { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 769px) { .p-panel.active { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .p-panel.active { grid-template-columns: repeat(3, 1fr); } }
.p-features { list-style: none; margin: 0 0 20px; padding: 0; }
.p-feature { font-size: 0.8rem; color: var(--text-light); padding: 5px 0; display: flex; gap: 6px; align-items: flex-start; }
.p-feature::before { content: '✓'; color: var(--gold); flex-shrink: 0; font-weight: 600; }

/* --- PRICING CARD FLEXBOX (#6) --- */
.pricing-card { display: flex; flex-direction: column; align-items: center; }
.pricing-card .btn { margin-top: auto; }

/* --- ICOONE FACTS BOX (#28) --- */
.icoone-facts { background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 8px; }
.icoone-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.06); }
.fact-box { background: var(--anthracite); padding: 1rem; text-align: center; }
.fact-box .fn { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--gold); display: block; line-height: 1; }
.fact-box .fl { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 0.3rem; display: block; }
@media (min-width: 769px) { .icoone-facts-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- ÖFFNUNGSZEITEN TABLE (#19) --- */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table tr { border-bottom: 1px solid var(--border-light); }
.hours-table td { padding: 0.75rem 0; font-size: 0.88rem; color: var(--text-light); }
.hours-table td:last-child { text-align: right; color: var(--anthracite); font-weight: 500; }

/* --- SOCIAL LINKS --- */
.social-links { display: flex; gap: 10px; margin-top: 16px; }
.social-link { width: 36px; height: 36px; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; text-decoration: none; transition: all 0.3s; border-radius: 4px; }
.social-link:hover { border-color: var(--gold); color: var(--gold); }

/* --- TRUST PARTNER BADGES (in Über mich, #18, #15) --- */
.trust-partner-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border-light); border-radius: 8px; text-decoration: none; color: var(--text-light); font-size: 0.72rem; transition: all 0.3s; }
.trust-partner-badge:hover { border-color: var(--gold); color: var(--gold); }
.trust-partner-badge img { filter: none; opacity: 1; }

/* --- BOOK BANNER (contact section) --- */
.book-banner { background: var(--anthracite); padding: 1.5rem; margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; border-radius: 8px; }
.book-banner p { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; }

/* --- SCROLL TO TOP (#25) --- */
.scroll-top { position: fixed; bottom: 90px; right: 24px; z-index: 997; width: 40px; height: 40px; background: var(--anthracite); color: var(--gold); border: 1px solid rgba(197,165,90,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; font-size: 1.1rem; text-decoration: none; }
.scroll-top.visible { opacity: 1; visibility: visible; }
.scroll-top:hover { background: var(--gold); color: #fff; }

/* --- MOBILE CTA SMALLER (#23) --- */
.mobile-cta .btn { font-size: 0.82rem; padding: 10px 20px; }

/* --- WHATSAPP POSITION FIX (#24) --- */
@media (min-width: 769px) {
    .scroll-top { bottom: 24px; }
}
.whatsapp-float { bottom: 90px; }
@media (min-width: 769px) {
    .whatsapp-float { bottom: 24px; }
}

/* --- FONT SIZE CONSISTENCY (#26) --- */
.section__header p { font-size: 0.95rem; }
.pricing-card__duration { font-size: 0.8rem; }
.pricing-card__details { font-size: 0.85rem; }
.contact-detail__label { font-size: 0.72rem; }
.contact-detail__value { font-size: 0.92rem; }

.topbar { position: relative; z-index: 1001; }

/* ==========================================================================
   V3.1 ADDITIONS – Points 29-41
   ========================================================================== */

/* --- ALL-IN-ONE CARDS (#36) --- */
.aio-card {
    background: #fff;
    border: 1px solid var(--border-light);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s, box-shadow 0.3s;
    position: relative;
}
.aio-card:hover { border-color: var(--gold); box-shadow: 0 8px 30px rgba(197,165,90,0.1); }
.aio-card__header { margin-bottom: 12px; }
.aio-card__prices { width: 100%; margin: 16px 0; border-top: 1px solid var(--border-light); padding-top: 16px; }
.aio-price-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.88rem; color: var(--text-light); }
.aio-price-row strong { color: var(--anthracite); font-size: 1rem; }
.aio-card__hint { font-size: 0.78rem; color: var(--gold-text); margin-bottom: 16px; font-weight: 500; }
.aio-card__kk { background: var(--creme); border-left: 3px solid var(--gold); padding: 12px 14px; margin: 12px 0 16px; font-size: 0.8rem; color: var(--text-light); line-height: 1.6; }
.aio-card .btn { margin-top: auto; }
.aio-card__more { display: block; text-align: center; margin-top: 12px; font-size: 0.78rem; color: var(--gold); text-decoration: none; transition: color 0.3s; }
.aio-card__more:hover { color: var(--anthracite); }

/* --- ABO TOGGLE (#37) --- */
.abo-toggle { display: flex; justify-content: center; gap: 0; margin-bottom: 2rem; }
.abo-toggle__btn { padding: 10px 28px; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--border-light); background: #fff; cursor: pointer; color: var(--text-light); transition: all 0.3s; font-family: 'Lato', sans-serif; }
.abo-toggle__btn:first-child { border-radius: 6px 0 0 6px; }
.abo-toggle__btn:last-child { border-radius: 0 6px 6px 0; }
.abo-toggle__btn.active { background: var(--anthracite); color: var(--gold); border-color: var(--anthracite); }
.abo-grid { display: none; grid-template-columns: 1fr; gap: 1.5rem; }
.abo-grid.active { display: grid; }
@media (min-width: 769px) { .abo-grid.active { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .abo-grid.active { grid-template-columns: repeat(3, 1fr); } }

/* --- FAQ ACCORDION (#40) --- */
.faq-list { margin-top: 2rem; }
.faq-item { border-bottom: 1px solid var(--border-light); }
.faq-q { width: 100%; background: none; border: none; padding: 1.3rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; text-align: left; font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 400; color: var(--anthracite); transition: color 0.3s; }
.faq-q:hover { color: var(--gold); }
.faq-icon { width: 24px; height: 24px; border: 1px solid var(--border-light); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1rem; transition: all 0.3s; line-height: 1; }
.faq-item.open .faq-icon { background: var(--gold); color: #fff; border-color: var(--gold); transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; }
.faq-a p { font-size: 0.88rem; line-height: 1.8; color: var(--text-light); }
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 1.2rem; }

/* --- TRUST BAR MOBILE FIX (#30: always one line) --- */
.trust-bar--numbers .container { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.trust-bar--numbers .container::-webkit-scrollbar { display: none; }
.trust-bar-item { flex-shrink: 0; white-space: nowrap; }
.trust-bar-item .num { font-size: 1.6rem; }
.trust-bar-item div { font-size: 0.68rem; line-height: 1.4; }
@media (min-width: 769px) {
    .trust-bar-item .num { font-size: 2rem; }
    .trust-bar-item div { font-size: 0.78rem; }
    .trust-bar--numbers .container { overflow-x: visible; }
}

/* --- SCROLL-TO-TOP LEFT SIDE --- */
.scroll-top { left: 24px; right: auto; bottom: 24px; }

/* --- NAVBAR FLUSH TO TOP (#38) --- */
.topbar + .site-nav { top: 0; }
.topbar { position: relative; z-index: 999; }

/* --- EMPFEHLUNGS-BANNER (#41) --- */
.section--dark .headline-md.text-white { color: #fff; }

/* ==========================================================================
   V4.0 – PREMIUM CONVERSION REBUILD CSS
   ========================================================================== */

/* --- HERO PREMIUM --- */
.hero--premium .hero__content { max-width: 700px; }
.hero--premium .hero__title { font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -0.02em; }
.hero__cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.btn--lg { padding: 14px 32px; font-size: 0.82rem; }
.btn--outline-light { border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); background: transparent; }
.btn--outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
.hero__proof { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 0.75rem; color: rgba(255,255,255,0.5); }
.hero__proof-stars { color: var(--gold); font-size: 0.85rem; }
.hero__proof-sep { opacity: 0.3; }

/* --- PROOF BAR --- */
.proof-bar { background: var(--creme); border-bottom: 1px solid var(--border-light); padding: 16px 20px; }
.proof-bar .container { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.proof-bar .container::-webkit-scrollbar { display: none; }
.proof-bar__item { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.proof-bar__item img { opacity: 1; filter: none; }
.proof-bar__stars { color: var(--gold); font-size: 0.85rem; }
.proof-bar__num { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--gold); line-height: 1; }

/* --- EYEBROW (consistent across all sections) --- */
.eyebrow { font-size: 0.68rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-family: 'Lato', sans-serif; font-weight: 600; }
.eyebrow--gold { color: var(--gold); }

/* --- BEFORE/AFTER GRID --- */
.ba-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 769px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .ba-grid { grid-template-columns: repeat(3, 1fr); } }
.ba-card { background: #fff; border: 1px solid var(--border-light); overflow: hidden; transition: box-shadow 0.3s; }
.ba-card:hover { box-shadow: var(--shadow-hover); }
.ba-card__images { display: grid; grid-template-columns: 1fr 1fr; }
.ba-card__img { position: relative; overflow: hidden; }
.ba-card__img img { width: 100%; height: 180px; object-fit: cover; }
/* BA labels – cover English BEFORE/AFTER on icoone documentation images */
.ba-label { position: absolute; bottom: 0; left: 0; background: var(--anthracite); color: #fff; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 28px; z-index: 2; min-width: 120px; text-align: center; }
.ba-label--after { left: auto; right: 0; background: var(--gold); color: var(--anthracite); }
.ba-card h3 { padding: 16px 16px 4px; font-size: 1rem; }
.ba-card p { padding: 0 16px 16px; font-size: 0.82rem; color: var(--text-light); }

/* --- ICOONE BENEFITS (structured list) --- */
.icoone-benefits { margin-top: 8px; }
.ib { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ib__icon { color: var(--gold); font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.ib strong { color: #fff; font-size: 0.88rem; }
.ib small { color: rgba(255,255,255,0.5); font-size: 0.78rem; }

/* --- ICOONE VIDEO WRAP --- */
.icoone-video-wrap { position: relative; overflow: hidden; border-radius: 8px; background: var(--anthracite); }
.icoone-video-wrap img { width: 100%; display: block; opacity: 0.5; transition: opacity 0.3s; }
.icoone-video-wrap:hover img { opacity: 0.35; }
.icoone-video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; cursor: pointer; }
.play-btn { width: 64px; height: 64px; border: 2px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: background 0.3s; }
.icoone-video-wrap:hover .play-btn { background: rgba(197,165,90,0.2); }
.icoone-video-play span { color: #fff; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; }

/* --- COMPACT TREATMENT CARDS --- */
.compact-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 769px) { .compact-grid { grid-template-columns: 1fr 1fr; } }
.compact-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-light); overflow: hidden; transition: box-shadow 0.3s; }
.compact-card:hover { box-shadow: var(--shadow-hover); }
.compact-card__img img { width: 100%; height: 220px; object-fit: cover; }
.compact-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.compact-card__body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.compact-card__body p { font-size: 0.88rem; color: var(--text-light); line-height: 1.7; margin-bottom: 12px; }
.compact-card__price { font-size: 0.82rem; color: var(--gold); font-weight: 600; margin-bottom: 16px; }
.compact-card .btn { margin-top: auto; align-self: flex-start; }

/* --- ABOUT SECTION PREMIUM --- */
.about-lead { font-size: 1.05rem; color: var(--anthracite); line-height: 1.7; font-style: italic; margin-bottom: 12px; }
.about-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.about-badges .trust-partner-badge { white-space: nowrap; }
@media (max-width: 768px) {
    .about-badges { justify-content: center; }
    .about-content .btn-mt { width: 100%; text-align: center; }
}
.btn--sm { padding: 12px 20px; font-size: 0.72rem; }

/* --- V4.0 MOBILE CTA BAR (simplified) --- */
.mobile-cta { display: flex; align-items: stretch; gap: 0; }
.mobile-cta__wa { display: flex; align-items: center; justify-content: center; width: 52px; background: #25D366; }
.mobile-cta__btn { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--gold); color: #fff; font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; font-family: 'Lato', sans-serif; font-weight: 600; padding: 12px 16px; }
.mobile-cta__btn:hover { background: var(--gold-dark); }
@media (min-width: 769px) { .mobile-cta { display: none !important; } }

/* --- SCROLL TOP (left side, above mobile CTA) --- */
.scroll-top { left: 16px; right: auto; bottom: 80px; z-index: 996; }
@media (min-width: 769px) { .scroll-top { bottom: 24px; } }

/* --- WhatsApp float hide on mobile (integrated in CTA bar) --- */
@media (max-width: 768px) { .whatsapp-float { display: none !important; } }

/* ==========================================================================
   V4.1 – CONVERSION MASTERPLAN IMPLEMENTATION
   ========================================================================== */

/* --- NAV DROPDOWN (ICOONE dominant) --- */
.nav-item--dropdown { position: relative; }
.nav-item--dropdown > .nav-link { display: flex; align-items: center; }
.nav-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.12); border-top: 2px solid var(--gold); z-index: 1001; }
.nav-dropdown a { display: block; padding: 12px 20px; font-size: 0.82rem; color: var(--text); border-bottom: 1px solid var(--border-light); transition: var(--transition); }
.nav-dropdown a:hover { background: var(--creme); color: var(--gold); }
.nav-item--dropdown:hover .nav-dropdown { display: block; }
@media (max-width: 768px) {
    .nav-dropdown { position: static; box-shadow: none; border-top: none; background: rgba(255,255,255,0.05); }
    .nav-dropdown a { padding: 10px 20px 10px 30px; color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.05); }
    .nav-dropdown a:hover { background: rgba(255,255,255,0.1); color: var(--gold); }
}

/* --- EXIT INTENT OVERLAY --- */
.exit-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.7); align-items: center; justify-content: center; }
.exit-overlay.active { display: flex; }
.exit-overlay__box { background: #fff; max-width: 460px; width: 90%; padding: 40px; text-align: center; position: relative; }
.exit-overlay__close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; }
.exit-overlay__title { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 12px; color: var(--anthracite); }
.exit-overlay__text { font-size: 0.9rem; color: var(--text-light); line-height: 1.7; margin-bottom: 24px; }
.exit-overlay__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- BELIEBT BADGE --- */
.pricing-card--featured { position: relative; }
.pricing-card--featured::before { content: "Beliebt"; position: absolute; top: -1px; right: 20px; background: var(--gold); color: #fff; font-size: 0.65rem; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; font-family: 'Lato', sans-serif; font-weight: 600; }

/* --- ICOONE UPSELL BANNER --- */
.upsell-banner { background: linear-gradient(135deg, var(--anthracite), var(--anthracite)); padding: 2.5rem; text-align: center; margin-top: 2rem; }
.upsell-banner h3 { color: #fff; font-size: 1.2rem; margin-bottom: 8px; }
.upsell-banner p { color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-bottom: 20px; line-height: 1.6; }

/* --- PRICE ANCHOR (Vergleich) --- */
.price-compare { background: var(--creme); padding: 20px 24px; text-align: center; margin: 2rem 0; border-left: 3px solid var(--gold); }
.price-compare__label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.price-compare__vs { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; align-items: center; }
.price-compare__item { font-size: 0.88rem; }
.price-compare__item s { color: var(--text-muted); }
.price-compare__item strong { color: var(--gold); font-size: 1.1rem; }

/* --- MOBILE ABO STACK --- */
@media (max-width: 768px) {
    .abo-grid.active { display: flex; flex-direction: column; gap: 16px; }
    .abo-grid .pricing-card { min-width: 0; width: 100%; }
}

/* --- BLOG SINGLE TEMPLATE --- */
.blog-content { max-width: 720px; margin: 0 auto; }
.blog-content h2 { margin-top: 2rem; margin-bottom: 0.8rem; font-size: 1.4rem; }
.blog-content h3 { margin-top: 1.5rem; margin-bottom: 0.6rem; font-size: 1.15rem; }
.blog-content p { margin-bottom: 1rem; line-height: 1.9; color: var(--text-light); }
.blog-content ul, .blog-content ol { margin: 1rem 0 1rem 1.5rem; color: var(--text-light); line-height: 1.9; }
.blog-content li { margin-bottom: 0.5rem; }
.blog-content a { color: var(--gold); border-bottom: 1px solid rgba(197,165,90,0.3); }
.blog-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 2rem; }
.blog-cta { background: var(--creme); padding: 2rem; text-align: center; margin-top: 3rem; border-top: 2px solid var(--gold); }
.blog-cta h3 { font-size: 1.2rem; margin-bottom: 8px; }
.blog-cta p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 16px; }
.blog-cta__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.blog-article { padding-top: 80px; }
.blog-content .headline-xl { margin-bottom: 8px; }
.blog-thumbnail { margin-bottom: 2rem; }
.blog-thumbnail img { width: 100%; height: auto; }
.blog-back { text-align: center; margin-top: 2rem; }
.blog-back a { color: var(--gold-text); font-size: 0.85rem; }

/* Blog recommendation boxes (in post content) */
.blog-recommend { background: var(--creme); border-left: 3px solid var(--gold); padding: 16px 20px; margin: 20px 0; border-radius: 4px; font-size: 0.9rem; line-height: 1.7; }
.blog-recommend strong { color: var(--anthracite); }
.blog-recommend__actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.blog-content .blog-recommend .btn { border-bottom: none !important; }
/* Legacy inline-style boxes (already in DB) – upgrade their links to buttons */
.blog-content div[style*="border-left:3px solid #c5a55a"] a { display: inline-block; padding: 10px 24px; background: var(--anthracite); color: #fff !important; font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none !important; border: none !important; border-bottom: none !important; margin-top: 10px; cursor: pointer; transition: all 0.3s; }
.blog-content div[style*="border-left:3px solid #c5a55a"] a:hover { background: var(--gold); color: var(--anthracite) !important; }

/* --- BLOG ARCHIVE (index.php) --- */
.blog-filter { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.blog-filter__btn { padding: 6px 16px; border: 1px solid var(--border-light); border-radius: 20px; font-size: 0.82rem; color: var(--text-light); text-decoration: none; transition: all 0.3s; }
.blog-filter__btn:hover { border-color: var(--gold); color: var(--gold); }
.blog-filter__btn.active { background: var(--anthracite); color: #fff; border-color: var(--anthracite); }
.blog-card { text-align: left; }
.blog-card img { width: 100%; margin-bottom: 20px; }
.blog-card__date { margin-bottom: 8px; font-size: 0.7rem; }
.blog-card__heading { font-size: 1.1rem; margin-bottom: 12px; }
.blog-card__text { font-size: 0.9rem; }
.blog-card__more { margin-top: 12px; display: inline-block; }
.blog-pagination { text-align: center; margin-top: 48px; }

/* --- BLOG RELATED POSTS (single.php) --- */
.blog-related { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border-light); }
.blog-related__title { font-size: 1rem; font-family: 'Playfair Display', serif; margin-bottom: 20px; }
.blog-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-related__card { display: block; text-decoration: none; color: var(--text); transition: all 0.3s; }
.blog-related__card:hover { color: var(--gold); }
.blog-related__card img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
.blog-related__card-title { font-size: 0.82rem; line-height: 1.4; display: block; }
@media (max-width: 480px) { .blog-related__grid { grid-template-columns: 1fr; gap: 12px; } .blog-related__card img { height: 80px; } }

/* --- PROGRESSION GALLERY --- */
.progression-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 900px; margin: 0 auto; }
.progression-gallery__item { position: relative; overflow: hidden; }
.progression-gallery__item img { width: 100%; height: 220px; object-fit: cover; }
.progression-gallery__label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; padding: 24px 12px 10px; font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; }
.progression-gallery__label strong { display: block; font-size: 0.82rem; color: var(--gold); margin-bottom: 2px; }
.progression-meta { text-align: center; margin-top: 12px; font-size: 0.82rem; color: var(--text-light); }
@media (max-width: 768px) {
    .progression-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 4px; scrollbar-width: none; }
    .progression-gallery::-webkit-scrollbar { display: none; }
    .progression-gallery__item { min-width: 75vw; flex-shrink: 0; scroll-snap-align: center; }
}

/* --- TRUST REASONS --- */
.trust-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .trust-reasons { grid-template-columns: 1fr; } }
.trust-reason { padding: 24px; border: 1px solid var(--border-light); transition: box-shadow 0.3s; }
.trust-reason:hover { box-shadow: var(--shadow-hover); }
a.trust-reason--link { text-decoration: none; color: inherit; display: block; cursor: pointer; transition: box-shadow 0.3s, border-color 0.3s; }
a.trust-reason--link:hover { box-shadow: var(--shadow-hover); border-color: var(--gold); }
a.trust-reason--link .link-gold { display: block; margin-top: 8px; }
.trust-reason h3 { font-size: 1rem; margin-bottom: 8px; }
.trust-reason p { font-size: 0.85rem; color: var(--text-light); line-height: 1.7; }
.trust-reason .link-gold { display: block; margin-top: 8px; }

/* --- DESKTOP STICKY CONVERSION BAR --- */
.desktop-sticky { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 999; background: #fff; border-bottom: 1px solid var(--border-light); padding: 10px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transform: translateY(-100%); transition: transform 0.3s ease; }
.desktop-sticky.visible { display: block; transform: translateY(0); }
.desktop-sticky__info { font-size: 0.82rem; color: var(--text-light); display: flex; align-items: center; gap: 6px; }
.desktop-sticky__info strong { color: var(--anthracite); }
.desktop-sticky__stars { color: var(--gold); }
.desktop-sticky__sep { opacity: 0.3; }
.desktop-sticky__actions { display: flex; gap: 8px; }
@media (max-width: 768px) { .desktop-sticky { display: none !important; } }

/* ==========================================================================
   V4.4 – BUGFIX & TYPOGRAPHY SYSTEM
   ========================================================================== */

/* --- FIX 1: HERO BACKGROUND (fallback when no image) --- */
.hero--premium { background: var(--anthracite); }
.hero--premium .hero__background { opacity: 0.5; }
.hero--premium .hero__overlay { background: linear-gradient(180deg, rgba(45,45,45,0.6) 0%, rgba(45,45,45,0.85) 100%); }

/* --- FIX 2: PROOF BAR – Bigger icons, more visual weight --- */
.proof-bar { padding: 20px; }
.proof-bar__item { gap: 10px; font-size: 0.82rem; }
.proof-bar__item img { height: 32px !important; width: auto !important; max-width: 100px; }
.proof-bar__stars { font-size: 1rem; }
.proof-bar__num { font-size: 1.4rem; }

/* --- FIX 3: REMOVE FAKTEN-BOX from front-page (CSS hide) --- */
.icoone-facts { display: none !important; }

/* --- FIX 7: TYPOGRAPHY DESIGN SYSTEM --- */
/* 8 defined sizes only: xs, sm, base, md, lg, xl, 2xl, 3xl */
.text-xs   { font-size: 0.75rem !important; } /* 12px - fine print, labels */
.text-sm   { font-size: 0.85rem !important; } /* 13.6px - captions, meta */
.text-base { font-size: 1rem !important; }    /* 16px - body text */
.text-md   { font-size: 1.1rem !important; }  /* 17.6px - lead text */
.text-lg   { font-size: 1.25rem !important; } /* 20px - section intro */

/* Consistent body text across all sections */
.section p, .compact-card__body p, .trust-reason p, .about-content p,
.ba-card p, .testimonial-card p, .contact-detail__value {
    font-size: 0.9rem;
    line-height: 1.75;
}

/* Consistent heading sizes */
.service-card h3, .compact-card__body h3, .trust-reason h3, .ba-card h3,
.pricing-card h3 { font-size: 1.15rem; }

/* Remove conflicting Beliebt badge from style.css (custom.css wins) */
.pricing-card--featured::before {
    content: "Beliebt";
    position: absolute;
    top: -1px;
    right: 20px;
    left: auto;
    transform: none;
    background: var(--gold);
    color: #fff;
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
}

/* --- FIX 8: TABLET PROOF BAR – always horizontal --- */
@media (min-width: 481px) and (max-width: 768px) {
    .proof-bar .container {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 24px;
        padding: 0 16px;
    }
    .proof-bar__item {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
@media (max-width: 480px) {
    .proof-bar .container {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 20px;
        justify-content: flex-start;
        padding: 0 12px;
    }
    .proof-bar__item { flex-shrink: 0; }
}

/* --- FIX 9: MOBILE/TABLET HERO – padding fix, no navbar overlap --- */
@media (max-width: 768px) {
    .hero--premium {
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: calc(var(--nav-height, 64px) + 40px) !important;
        padding-bottom: 40px;
    }
    .hero__content {
        padding: 0 20px;
    }
    .hero--premium .hero__title {
        font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
    }
    .hero__subtitle {
        font-size: 0.92rem !important;
        line-height: 1.7;
    }
    .hero__cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .hero__cta-row .btn {
        text-align: center;
        width: 100%;
    }
}

/* --- FIX 10: MOBILE – hide hero proof (shown in proof bar instead) --- */
@media (max-width: 768px) {
    .hero__proof { display: none !important; }
}

/* --- FIX 12: MOBILE FOOTER – reduce spacing --- */
@media (max-width: 768px) {
    .site-footer { padding: 40px 0 20px !important; }
    .site-footer .nav-cta,
    .site-footer .footer-cta { 
        margin: 16px 0 !important;
        padding: 12px 24px !important;
    }
    .site-footer .container { gap: 24px; }
}

/* --- Testimonial grid: 2 columns on tablet, scroll on mobile --- */
@media (max-width: 768px) {
    .testimonial-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .testimonial-grid::-webkit-scrollbar { display: none; }
    .testimonial-card {
        min-width: 280px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* --- About grid responsive --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 769px) {
    .about-grid { grid-template-columns: 2fr 3fr; }
}
.about-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* --- Contact grid responsive --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 769px) {
    .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* --- ICOONE Documentation Gallery (full-width B/A images) --- */
.doc-gallery { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 769px) { .doc-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .doc-gallery { grid-template-columns: repeat(3, 1fr); } }
.doc-card { background: #fff; border: 1px solid var(--border-light); overflow: hidden; transition: box-shadow 0.3s; }
.doc-card:hover { box-shadow: var(--shadow-hover); }
.doc-card img { width: 100%; height: auto; display: block; }
a.doc-card--link { text-decoration: none; color: inherit; display: block; }
a.doc-card--link:hover { box-shadow: var(--shadow-hover); border-color: var(--gold); }
.doc-card__info { padding: 16px; }
.doc-card__category { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.doc-card__title { font-family: 'Playfair Display', serif; font-size: 1rem; margin-bottom: 6px; color: var(--anthracite); }
.doc-card__meta { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }
.doc-card__meta span { display: inline-block; margin-right: 12px; }
@media (max-width: 768px) {
    .doc-gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
    .doc-card__info { padding: 10px; }
    .doc-card__title { font-size: 0.88rem; }
}

/* ==========================================================================
   V5.0 – COMPLETE FEEDBACK IMPLEMENTATION (43 Points)
   ========================================================================== */

/* --- #1: HERO BACKGROUND – elegant gradient instead of placeholder --- */
.hero--premium {
    background: var(--anthracite);
    position: relative;
}
.hero--premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(197,165,90,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 30%, rgba(197,165,90,0.05) 0%, transparent 50%);
    z-index: 0;
}
.hero--premium .hero__content { position: relative; z-index: 2; }
.hero--premium .hero__overlay { 
    background: linear-gradient(180deg, rgba(45,45,45,0.3) 0%, rgba(45,45,45,0.6) 50%, rgba(45,45,45,0.8) 100%);
    z-index: 1;
}

/* --- #8, #12: EQUAL HEIGHT CARDS + BUTTONS AT BOTTOM --- */
.pricing-grid, .abo-grid.active, .compact-grid, .trust-reasons, .ba-grid {
    align-items: stretch;
}
.pricing-card, .aio-card, .compact-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.pricing-card .btn,
.aio-card .btn,
.compact-card .btn {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
}
.pricing-card .p-features,
.pricing-card__details {
    flex-grow: 1;
}

/* --- #5: PRICE-ANCHOR FIX (render correctly, not raw HTML) --- */
.price-anchor {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-right: 6px;
}

/* --- #5: SAVINGS PROMINENTLY VISIBLE --- */
.p-feature--savings {
    color: var(--gold) !important;
    font-weight: 700;
    font-size: 0.88rem !important;
}
.p-feature--savings::before {
    content: '✓' !important;
    color: var(--gold) !important;
}

/* --- #14: TRUST BAR – Remove 21600 Impulse, keep clean --- */
.proof-bar__item--impulse { display: none !important; }

/* --- #16, #17: SIGNATURE TREATMENT – Larger desktop text + prominent price --- */
@media (min-width: 769px) {
    .section--dark .headline-lg { font-size: 2.2rem; }
    .section--dark p { font-size: 1rem; }
    .ib strong { font-size: 1rem; }
    .ib small { font-size: 0.88rem; }
}
.icoone-price-badge {
    display: inline-block;
    background: rgba(197,165,90,0.15);
    border: 1px solid rgba(197,165,90,0.4);
    color: var(--gold);
    font-size: 1rem;
    font-weight: 700;
    padding: 8px 20px;
    margin-top: 8px;
    letter-spacing: 0.5px;
}
.icoone-cta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
@media (max-width: 768px) {
    .icoone-cta-row {
        align-items: center;
    }
    .icoone-cta-row .btn,
    .icoone-cta-row .icoone-price-badge {
        width: 100%;
        max-width: 400px;
        display: block;
        text-align: center;
        box-sizing: border-box;
    }
}

/* --- #20: ALL PORTRAITS ROUND --- */
.about-image img,
.portrait-round {
    border-radius: 50% !important;
    aspect-ratio: 1;
    object-fit: cover;
}
.about-image img {
    max-width: 320px;
}

/* --- #22: GOOGLE MAPS STATIC PREVIEW --- */
.paw-maps-preview {
    width: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-light);
}
.paw-maps-preview img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s;
}
.paw-maps-preview:hover img { opacity: 0.85; }
.paw-maps-preview__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.15);
    transition: background 0.3s;
}
.paw-maps-preview:hover .paw-maps-preview__overlay { background: rgba(0,0,0,0.25); }
.paw-maps-preview__btn {
    background: #fff;
    color: var(--anthracite);
    padding: 10px 24px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    cursor: pointer;
}
.paw-maps-preview__hint {
    font-size: 0.72rem;
    color: #fff;
    margin-top: 8px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* --- #24, #37: NO WHITE GAP between navbar and content --- */
main#main-content > section:first-child,
main#main-content > .breadcrumb-wrap + section {
    margin-top: 0;
}
.breadcrumb-wrap {
    background: var(--creme);
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}
.breadcrumb-wrap + .section--dark {
    margin-top: 0 !important;
}

/* --- #25: ICOONE WEBSITE LINK – larger + logo --- */
.icoone-official-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--gold);
    text-decoration: none;
    padding: 12px 24px;
    border: 1px solid rgba(197,165,90,0.3);
    transition: all 0.3s;
    margin-top: 20px;
}
.icoone-official-link:hover {
    background: rgba(197,165,90,0.08);
    border-color: var(--gold);
}
.icoone-official-link img {
    height: 24px;
    width: auto;
}

/* --- #29: CROSS-LINKS MORE VISIBLE --- */
.cross-links-section {
    background: var(--creme);
    padding: 32px 20px;
    border-top: 2px solid var(--gold);
}
.cross-links-section .eyebrow {
    text-align: center;
    margin-bottom: 16px;
}
.cross-links-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.cross-links-list a {
    display: inline-block;
    padding: 4px 0;
    border: none;
    color: var(--text);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s;
    background: transparent;
}
.cross-links-list a:hover {
    color: var(--gold);
}

/* --- #30: VERIFICATION LINKS --- */
.verification-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 20px 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.verification-links a {
    color: var(--gold);
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid rgba(197,165,90,0.3);
    transition: all 0.3s;
}
.verification-links a:hover {
    background: rgba(197,165,90,0.08);
}

/* --- #31: AKUPRESSUR ICONS (no emoji, SVG style) --- */
.aku-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}
@media (min-width: 769px) { .aku-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .aku-grid { grid-template-columns: repeat(4, 1fr); } }
.aku-card {
    background: #fff;
    padding: 24px 16px;
    text-align: center;
    border: 1px solid var(--border-light);
    transition: all 0.3s;
}
.aku-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(197,165,90,0.1);
}
.aku-card__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(197,165,90,0.1);
    color: var(--gold);
}
.aku-card__icon svg { width: 24px; height: 24px; }
.aku-card h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
    font-family: 'Playfair Display', serif;
}
.aku-card p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* --- #32: MERIDIANE – Visual body illustration area --- */
/* Meridiane visual grid */
.meridiane-visual {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 769px) { .meridiane-visual { grid-template-columns: 1fr 2fr; } }
.meridiane-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}
.meridiane-benefits li {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-light);
}
.meridiane-benefits li strong {
    color: var(--anthracite);
    font-size: 0.92rem;
}

/* --- #41: SCROLL-TO-TOP – LARGER ON DESKTOP --- */
@media (min-width: 769px) {
    .scroll-top {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }
}

/* --- #42: SOCIAL MEDIA ICONS (SVG style instead of text) --- */
.social-links { display: flex; gap: 10px; }
.social-link {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 50%;
}
.social-link:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(197,165,90,0.1);
}
.social-link svg { width: 18px; height: 18px; fill: currentColor; }

/* --- #43: FOOTER TRUST BAR – therapeutic selling points --- */
.desktop-sticky__info {
    font-size: 0.85rem;
}
.footer-trust-points {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-trust-points span {
    font-size: 0.78rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 4px;
}
.footer-trust-points .sep { opacity: 0.3; }

/* --- LIGHTBOX (B/A images #15, #26) --- */
.paw-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.92);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.paw-lightbox.active { display: flex; }
.paw-lightbox__content {
    max-width: 900px;
    width: 100%;
    position: relative;
}
.paw-lightbox__close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}
.paw-lightbox__slider {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: ew-resize;
}
.paw-lightbox__slider img {
    width: 100%;
    display: block;
}
.paw-lightbox__info {
    color: #fff;
    text-align: center;
    padding: 16px;
    font-size: 0.9rem;
}
.paw-lightbox__info h3 {
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: 4px;
}

/* --- B/A Card clickable --- */
.ba-card { cursor: pointer; }

/* --- Fix: Prevent icoone-facts from showing --- */
.icoone-facts { display: none !important; }

/* --- PRICING GRID responsive --- */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 769px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Feature grid (icoone section) responsive --- */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 769px) { .feature-grid { grid-template-columns: 1fr 1fr; } }

/* --- Testimonial grid desktop --- */
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 769px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- #10: FONT SIZES – Consistent hierarchy --- */
h1, .headline-xl { font-size: clamp(2rem, 5vw, 3.2rem); }
h2, .headline-lg { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3, .headline-md { font-size: clamp(1.1rem, 2vw, 1.4rem); }

.faq-q { font-size: clamp(0.95rem, 1.5vw, 1.1rem); }

/* --- Gold line (section divider) --- */
.gold-line {
    width: 50px;
    height: 2px;
    background: var(--gold);
    margin: 12px auto 20px;
}

/* --- Section spacing mobile fix --- */
@media (max-width: 768px) {
    .section { padding: 48px 16px; }
}

/* --- Booking features icons (fix #2) --- */
.booking-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 2rem 0;
}
.booking-feature {
    text-align: center;
    padding: 16px;
}
.booking-feature__icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}
.booking-feature__text {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
}
@media (max-width: 768px) {
    .booking-features { grid-template-columns: 1fr; gap: 8px; }
    .booking-feature { display: flex; gap: 12px; text-align: left; padding: 10px 0; }
}

/* --- NEW: Massage technique cards --- */
.massage-techniques {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (min-width: 769px) { .massage-techniques { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .massage-techniques { grid-template-columns: repeat(4, 1fr); } }
.technique-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 3/4;
}
.technique-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.technique-card:hover img { transform: scale(1.05); }
.technique-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 16px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
}
.technique-card__overlay h3 {
    font-size: 0.95rem;
    color: #fff;
    margin: 0;
}
.technique-card__overlay p {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin: 4px 0 0;
}


/* ==========================================
   V5.4 – Visual Breathing Room (ICOONE page)
   ========================================== */

/* Spacer between dense content blocks */
.section--breathe { padding-top: 80px; padding-bottom: 80px; }
@media (min-width: 768px) { .section--breathe { padding-top: 120px; padding-bottom: 120px; } }

/* FAQ styling for SEO subpages */
.faq-list { max-width: 700px; margin: 2rem auto 0; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); padding: 1rem 0; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 1rem; color: var(--anthracite); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--gold); transition: transform 0.2s; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { color: var(--text-light); line-height: 1.7; margin-top: 0.75rem; font-size: 0.95rem; }
.faq-item a { color: var(--gold); text-decoration: underline; }

/* Testimonial cards – grid */
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 640px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.testimonial-card__stars { color: var(--gold); font-size: 1.1rem; margin-bottom: 0.75rem; }
.testimonial-card p { color: var(--text-light); font-size: 0.92rem; line-height: 1.7; font-style: italic; }
.testimonial-card__author { margin-top: 1rem; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }

/* Massage technique cards */
.massage-techniques { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .massage-techniques { grid-template-columns: repeat(3, 1fr); } }
.technique-card { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.technique-card img { width: 100%; height: 100%; object-fit: cover; }
.technique-card__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; }
.technique-card__overlay h3 { font-size: 0.95rem; margin: 0; }
.technique-card__overlay p { font-size: 0.78rem; margin: 2px 0 0; opacity: 0.8; }

/* ==========================================================================
   v5.13.0 – Luxury Logos Grid, Table Source, Social Icon Fix
   ========================================================================== */

/* Luxury reference logos */
.luxury-refs__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin: 20px 0;
}
.luxury-refs__logo {
    opacity: 0.5;
    transition: opacity 0.3s;
    filter: grayscale(100%);
}
.luxury-refs__logo:hover {
    opacity: 0.8;
    filter: grayscale(0%);
}
.luxury-refs__logo img {
    height: 48px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
@media (max-width: 600px) {
    .luxury-refs__logos { gap: 20px; }
    .luxury-refs__logo img { height: 36px; max-width: 100px; }
}

/* Comparison table source footnote */
.comparison-table__source {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 12px;
    font-style: italic;
}

/* Footer social icons – SVG sizing fix for circles */
.social-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   v5.14.0 – Session A Feedback Fixes (Points 1-14)
   ========================================================================== */

/* Point 2: Remove white gaps between sections */
.breadcrumb { margin-bottom: 0; padding-bottom: 6px; }
.section + .section { margin-top: 0; }
.hero-page + .section { padding-top: 40px; }

/* Point 3: icoone row in comparison table – stronger emphasis */
.comparison-table__highlight { background: rgba(197,165,90,0.15); font-weight: 600; }
.comparison-table__highlight td { color: var(--anthracite); font-weight: 600; border-bottom: 2px solid var(--gold); }
.comparison-table__highlight td:first-child { color: var(--gold); }

/* Point 4: Stars alignment fix in hero proof bar */
.hero__proof { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero__proof svg { vertical-align: middle; display: inline-block; }

/* Point 5: Quick facts bar – luxury style (no emojis in CSS, handled in PHP) */
/* Quick-Facts Bar – full-width dark bar, no gaps */
.quick-facts-bar {
    background: var(--anthracite);
    width: 100%;
    margin: 0;
    padding: 0;
}
.quick-facts-bar .quick-facts {
    background: transparent;
    margin: 0;
    border-radius: 0;
    max-width: var(--max-width);
    margin: 0 auto;
}
.quick-facts { background: var(--anthracite); display: flex; align-items: center; justify-content: center; gap: 32px; padding: 20px 24px; flex-wrap: wrap; border-radius: 0; }
.quick-facts__item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); font-size: 0.82rem; letter-spacing: 0.02em; }
.quick-facts__icon { color: var(--gold); font-size: 0.9rem; line-height: 1; }
.quick-facts__label { font-weight: 400; }
@media (max-width: 600px) { .quick-facts { gap: 12px 24px; padding: 16px; } .quick-facts__item { font-size: 0.78rem; } }

/* Point 8: Pricing cards equal height + consistent frame */
.pricing-cards-grid, .p-panel.active { display: grid; gap: 24px; }
.pricing-card { display: flex; flex-direction: column; border: 1px solid var(--border-light); padding: 32px 24px; position: relative; min-height: 380px; }
.pricing-card .btn { margin-top: auto; }
.pricing-card--featured { border: 2px solid var(--gold); }

/* Point 9: Single badge – remove CSS pseudo-element BELIEBT, use only PHP badge */
.pricing-card--featured::before { display: none; }

/* Point 11: Cross-links – visual group separation */
.cross-links-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cross-links-list a { padding: 4px 0; border: none; font-size: 0.82rem; color: var(--text-light); text-decoration: none; transition: color 0.3s; }
.cross-links-list a:hover { color: var(--gold); }
.cross-links-list a::after { content: '·'; margin-left: 8px; color: rgba(255,255,255,0.2); }
.cross-links-list a:last-child::after { content: ''; margin-left: 0; }
.cross-links-group { margin-bottom: 12px; }
.cross-links-group__label { font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; text-align: center; }
@media (max-width: 768px) {
    .cross-links-section { padding: 20px 0; }
    .cross-links-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .cross-links-list a { padding: 3px 0; font-size: 0.75rem; text-align: center; white-space: nowrap; }
    .cross-links-group { margin-bottom: 8px; }
    .cross-links-group__label { margin-bottom: 4px; font-size: 0.6rem; }
}

/* Point 12: B/A gallery – 3 columns on desktop */
.ba-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 769px) { .ba-gallery { grid-template-columns: repeat(3, 1fr); } }

/* Point 14: "Weitere Behandlungen" section – more prominent */
.cross-links-section { background: var(--anthracite); padding: 40px 0; color: #fff; }
.cross-links-section .eyebrow { color: var(--gold); }
.cross-links-section .cross-links-list a { color: rgba(255,255,255,0.7); }
.cross-links-section .cross-links-list a:hover { color: var(--gold); }
.cross-links-section .verification-links { color: rgba(255,255,255,0.4); }
.cross-links-section .verification-links a { color: var(--gold); }

/* ==========================================================================
   v5.15.0 – Session B Feedback Fixes (Points 15-25)
   ========================================================================== */

/* Point 15: Compact commitment plans preview for landing pages */
.compact-plans { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin: 24px auto; max-width: 900px; }
.compact-plans__card { border: 1px solid var(--border-light); padding: 28px 20px; text-align: center; min-width: 180px; flex: 1 1 0; max-width: 280px; position: relative; border-radius: 4px; }
.compact-plans__card--featured { border: 2px solid var(--gold); }
.compact-plans__badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: 0.65rem; letter-spacing: 1px; text-transform: uppercase; padding: 2px 12px; white-space: nowrap; }
.compact-plans__name { font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); margin-bottom: 8px; }
.compact-plans__price { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--anthracite); margin-bottom: 4px; }
.compact-plans__detail { font-size: 0.82rem; color: var(--text-muted); }

/* Point 18: CTA buttons in one line on akupressur and all hero pages */
.hero-page__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-page__cta .btn { white-space: nowrap; }
.seo-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Point 19: Uniform booking area sizing across all pages */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 700px; margin: 0 auto; }
@media (min-width: 600px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
.pricing-grid--narrow { max-width: 560px; margin-left: auto; margin-right: auto; }

/* Point 20: "Mehr erfahren" links more visible in massage table */
.comparison-table td a { color: var(--gold); font-weight: 600; text-decoration: none; padding: 4px 12px; border: 1px solid var(--gold); border-radius: 4px; display: inline-block; transition: all 0.3s; font-size: 0.82rem; }
.comparison-table td a:hover { background: var(--gold); color: #fff; }

/* Point 25: Körperzonen – consolidated above */

/* Point 13 v5.16.0: Force-remove portrait decorative frame (specificity override) */
.about-image::after,
.about-image::before {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   v5.16.0 – Feedback Round 3 CSS Fixes
   ========================================================================== */

/* Point 4+14: Uniform text spacing and font sizes across all sections */
.section .text-body { font-size: 1rem; line-height: 1.7; margin-bottom: 16px; }
.section p { margin-bottom: 12px; }
.section h2 + p, .section h2 + .gold-line + p { margin-top: 0; }
.section__header { margin-bottom: 40px; }
.section__header + .text-body { margin-top: 0; }

/* Point 7: Akupressurpunkte list centered */
.akupunkte-list { text-align: left; max-width: 600px; margin: 0 auto; }
.akupunkte-list li { padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 0.88rem; }
.akupunkte-list li strong { color: var(--anthracite); }

/* Point 10: KK sub-pages uniform format */
.kk-step { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
.kk-step__nr { background: var(--gold); color: #fff; width: 36px; min-width: 36px; height: 36px; min-height: 36px; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; flex-shrink: 0; }
.kk-step p { margin: 0; font-size: 0.85rem; line-height: 1.6; }
@media (max-width: 768px) {
    .kk-step { padding: 12px 16px; gap: 12px; }
    .kk-step__nr { width: 32px; min-width: 32px; height: 32px; min-height: 32px; aspect-ratio: 1; font-size: 0.75rem; }
    .kk-step p { font-size: 0.82rem; }
}

/* ==========================================================================
   v5.17.0 – Feedback Round 4 CSS Fixes (22 Points)
   ========================================================================== */

/* Point 2: Hide desktop sticky bar entirely – nav is already fixed, bar creates unprofessional double effect */
.desktop-sticky { display: none !important; }

/* Point 5: Social icons – force circle with overflow hidden, uniform SVG sizing */
.social-link {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
.social-link svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

/* Point 7+14: Consistent text sizing on ueber-mich and all pages */
.about-content p { font-size: 0.95rem; line-height: 1.8; color: var(--text-light); }
.about-lead { font-style: italic; font-size: 1.05rem !important; color: var(--text) !important; }

/* Point 8: Uniform button sizing across all pricing/service cards */
.service-card .btn,
.pricing-card .btn,
.compact-card .btn { width: 100%; text-align: center; padding: 14px 24px; }

/* Point 19: Remove any image border artifacts */
.aku-card__icon,
.technique-card img,
.about-image img,
.doc-card img { border: none !important; outline: none !important; }
img { border: 0; }

/* Point 22: Körperzonen – consolidated in block at L1165 */

/* Point 3: NoMad logo – invert on light background for visibility */
.luxury-refs__logo img[alt*="NoMad"] { filter: grayscale(100%) invert(1); mix-blend-mode: multiply; }
.luxury-refs__logo:hover img[alt*="NoMad"] { filter: invert(1); mix-blend-mode: multiply; }

/* Point 16: B/A gallery horizontal scroll on mobile, grid on desktop */
.doc-gallery {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
}
.doc-gallery .doc-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
}
@media (min-width: 769px) {
    .doc-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow-x: visible;
    }
    .doc-gallery .doc-card { flex: none; }
}

/* Point 18: Stars alignment – stronger fix for icoone subpage hero */
.seo-hero__proof,
.hero-page .hero__proof,
.hero__proof {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center;
}
.hero__proof svg,
.seo-hero__proof svg {
    vertical-align: middle !important;
    position: relative;
    top: -1px;
}

/* ==========================================================================
   v5.17.0 PATCH – web5.docx Feedback (15 Points)
   ========================================================================== */

/* Point 7: Cross-links section – check background matches dark theme */
.cross-links-section .cross-links-group__label { color: var(--gold); }

/* Point 10: Treatment steps – left-aligned headings */
.section-narrow .section__header { text-align: left; }
.section-narrow .section__header .eyebrow { text-align: left; }
.text-center .section__header { text-align: center; }
.text-center .section__header .eyebrow { text-align: center; }


/* Point 14: More spacing between pricing intro and toggle */
.abo-toggle { margin-top: 24px; margin-bottom: 24px; }
.section-subtitle { margin-top: 40px; }

/* Point 15: Cross-links text uniform */
.cross-links-list a {
    min-width: 0;
    text-align: center;
    padding: 4px 0 !important;
    font-size: 0.82rem !important;
}

/* Point 3: B/A card metadata more visible */
.doc-card__meta {
    font-size: 0.82rem !important;
    color: var(--anthracite) !important;
    background: rgba(197,165,90,0.1);
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 8px;
    font-weight: 500;
}

/* Problemfinder Ratgeber links */
.problemfinder-table .pf-ratgeber a {
    color: var(--gold) !important;
    font-weight: 600;
    font-size: 0.78rem;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
}
.problemfinder-table .pf-ratgeber a:hover {
    color: var(--gold-dark) !important;
}

/* ==========================================================================
   v5.18.0 – MEGA UPDATE: Mobile, Overflow, Tables, Buttons, Gaps
   ========================================================================== */

/* --- GLOBAL OVERFLOW PROTECTION (already set at line 342) --- */

/* --- WHITE BARS FIX: Remove gaps between sections --- */
.page-content > .breadcrumb + .section,
.page-content > .section + .section,
.breadcrumb + .section--creme,
.section--dark + .section,
.section + .section--dark { margin-top: 0; }
.breadcrumb { padding-bottom: 6px; margin-bottom: 0; }
.page-content .section:first-child { padding-top: 0; }

/* --- MOBILE BUTTONS: Equal width on stack (#all button issues) --- */
@media (max-width: 768px) {
    .hero-page__cta .btn,
    .seo-hero__cta .btn,
    .blog-cta .btn,
    .paw-maps-consent .btn,
    .cross-links-section .btn,
    .upsell-banner .btn,
    section > .container > .btn,
    .section > .container > [style*="text-align"] .btn {
        width: 100%;
        max-width: 400px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8px;
        text-align: center;
        box-sizing: border-box;
    }
    /* Button pairs in flex containers */
    .hero-page__cta,
    .seo-hero__cta,
    .blog-cta__buttons,
    .paw-maps-consent > div > div[style*="flex"] {
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* --- MAPS BUTTONS EQUAL SIZE + VISIBLE BORDER --- */
.paw-maps-consent .btn--sm {
    min-width: 200px;
    text-align: center;
    box-sizing: border-box;
}
.paw-maps-consent .btn--outline {
    border: 2px solid var(--gold) !important;
    color: var(--gold-text) !important;
    font-weight: 500;
}

/* --- BLOG CTA BUTTON FIX (invisible text) --- */
.blog-content .btn { border-bottom: none !important; }
.blog-content .btn.btn--gold { color: #fff !important; }
.blog-content .btn.btn--outline { color: var(--gold) !important; }

/* --- MOBILE TABLES → STACKED CARDS --- */
@media (max-width: 768px) {
    /* Hide tables on mobile, show card alternatives */
    .comparison-table-wrap .comparison-table { display: none; }
    .comparison-table-wrap .mobile-cards { display: block; }

    /* Problemfinder: horizontal scroll on mobile */
    .problemfinder-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .problemfinder-wrap::-webkit-scrollbar { display: none; }
    .problemfinder-table { min-width: 580px; width: auto; table-layout: auto; font-size: 0.82rem; }
    .problemfinder-table td:first-child,
    .problemfinder-table th:first-child {
        white-space: normal;
    }
    .problemfinder-table th,
    .problemfinder-table td { padding: 8px 10px; white-space: nowrap; }
    .problemfinder-table th:first-child { text-align: left; }

    /* icoone comparison table: horizontal scroll */
    .comparison-table-wrap--scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .comparison-table-wrap--scroll .comparison-table { display: table; min-width: 500px; }
}
@media (min-width: 769px) {
    .comparison-table-wrap .mobile-cards { display: none; }
}

/* Mobile comparison cards styling */
.mobile-cards { display: none; }
.mobile-card {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 12px;
}
.mobile-card--highlight {
    border: 2px solid var(--gold);
    background: rgba(197,165,90,0.04);
}
.mobile-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--anthracite);
    margin: 0 0 12px;
}
.mobile-card__row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
}
.mobile-card__row:last-child { border-bottom: none; }
.mobile-card__label { color: var(--text-muted); }
.mobile-card__value { color: var(--anthracite); font-weight: 500; text-align: right; }

/* --- AKU-GRID: compact 2-column on narrow mobile --- */
@media (max-width: 479px) {
    .aku-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important; }
    .aku-card { padding: 12px 8px; overflow: hidden; word-break: break-word; }
    .aku-card__icon { width: 32px; height: 32px; margin: 0 auto 6px; }
    .aku-card__icon svg { width: 16px; height: 16px; }
    .aku-card h3 { font-size: 0.82rem; margin-bottom: 2px; }
    .aku-card p { font-size: 0.72rem; line-height: 1.3; }
    .trust-reasons { grid-template-columns: 1fr !important; }
}

/* --- KÖRPERZONEN: Mobile --- */
@media (max-width: 768px) {
    .meridiane-visual { grid-template-columns: 1fr !important; }
}

/* --- FAQ PADDING MOBILE --- */
@media (max-width: 768px) {
    .faq-item { padding: 0 4px; }
    .faq-item summary { padding: 16px 8px; font-size: 0.92rem; }
}

/* --- BOOKING INFO: Stack on mobile (#page-termin) --- */
@media (max-width: 768px) {
    div[style*="grid-template-columns: repeat(3"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
}

/* --- DISCLAIMER: Remove double gold line --- */
.paw-amelia-privacy > div {
    border-left: 3px solid var(--gold);
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* --- PREISE PAGE: Detail buttons equal width --- */
.preise-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}
.preise-links .btn {
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-sizing: border-box;
}

/* ==========================================================================
   v5.18.1 PATCH – web6.docx Feedback (6 Points)
   ========================================================================== */

/* Point 3: White bar between breadcrumb and dark section */
.breadcrumb + .section--dark,
.page-content > .section--dark:first-child {
    margin-top: -1px;
}
.breadcrumb {
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
}

/* Point 4: Stars next to 5.0 (not wrapping) */
.hero__proof,
.seo-hero__proof {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}
.hero__proof-stars,
.seo-hero__proof-stars {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Point 5: White bar under Quick-Facts bar */
.trust-bar--numbers + .section,
.trust-bar + .section,
.section--dark + .section--creme {
    margin-top: 0 !important;
    padding-top: 40px;
}

/* Point 6: Consistent fonts on Cellulite page */
.seo-hero__lead,
.seo-hero__lead p,
.page-content .section p,
.blog-article-body p,
.feature-grid p {
    font-family: 'Lato', -apple-system, sans-serif !important;
}
.headline-xl, .headline-lg, .headline-md, h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* Override style.css quick-facts base (removes border-radius and margin) */
.quick-facts-bar + .section { margin-top: 0 !important; }
.section--dark + .quick-facts-bar { margin-top: 0; }

/* Quick-facts inside dark hero: transparent wrapper, no extra background */
.section--dark .quick-facts-bar {
    background: transparent;
}
.section--dark .quick-facts-bar .quick-facts {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 16px 20px;
}

/* Pricing cards: Gold border swaps on hover */
.pricing-grid:hover .pricing-card--featured,
.abo-grid:hover .pricing-card--featured {
    border-color: var(--border-light);
    border-width: 1px;
}
.pricing-grid:hover .pricing-card--featured:hover,
.abo-grid:hover .pricing-card--featured:hover {
    border-color: var(--gold);
    border-width: 2px;
}
.pricing-grid .pricing-card:hover,
.abo-grid .pricing-card:hover {
    border: 2px solid var(--gold);
    box-shadow: var(--shadow-soft);
}

/* Pricing cards: entire card clickable */
.pricing-card { cursor: pointer; }
.pricing-card:active { transform: scale(0.98); }

/* Steps: left-aligned headings and text */
.step-item__body { text-align: left; }
.step-item__body strong { text-align: left; }
.step-item__body span { text-align: left; }

/* Reduce gap between video section and next section */
.section--creme + .section { padding-top: 40px; }
.section + .section { padding-top: 40px; }
.section--creme + .section--creme { padding-top: 40px; }

/* Luxury logos: name + location labels */
.luxury-refs__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.luxury-refs__name {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
    max-width: 120px;
}

/* ==========================================================================
   v5.19.0 – UTILITY CLASSES (Inline-Style Migration)
   ========================================================================== */

/* --- Layout --- */
.container--narrow { max-width: 800px; }
.container--sm { max-width: 700px; }
.container--xs { max-width: 600px; }
.text-center { text-align: center; }

/* --- Spacing --- */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

/* --- Hero --- */
.hero-padding { padding-top: calc(var(--nav-height) + 40px); }
.hero-padding-lg { padding-top: 100px; padding-bottom: 80px; }

/* --- Text --- */
.text-muted { color: var(--text-light); }
.text-muted-soft { color: rgba(255,255,255,0.7); }
.text-muted-softer { color: rgba(255,255,255,0.6); }
.text-sm { font-size: 0.88rem; }
.text-sm-light { font-size: 0.88rem; color: var(--text-light); line-height: 1.8; }
.text-xs { font-size: 0.78rem; }
.text-xs-muted { font-size: 0.78rem; color: var(--text-muted); }
.text-body { color: var(--text-light); line-height: 1.7; }
.text-detail { font-size: 0.82rem; color: var(--text-light); margin: 8px 0 16px; }
.text-price { font-size: 1.2rem; margin: 16px 0; }
.text-legal { font-size: 1.1rem; margin: 2rem 0 0.5rem; }
.text-note { font-size: 0.9rem; color: var(--text-light); }

/* --- Links --- */
.gold-link { color: var(--gold-text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.gold-link:hover { color: var(--gold-dark, #b8943f); }

/* --- Flex --- */
.flex-center { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.flex-start { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 768px) {
    .seo-hero .flex-start,
    .hero .flex-start {
        flex-direction: column;
        align-items: stretch;
    }
    .seo-hero .flex-start .btn,
    .hero .flex-start .btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* --- Section Variants --- */
.section--pad-sm { padding: 1rem 0; }
.section + .section--pad-sm { margin-top: -30px; }
.section--pad-md { padding: 4rem 0; }
.section--crosslink { padding: 1.5rem 0; background: var(--creme); }

/* --- Responsive Images --- */
.img-full { width: 100%; border-radius: 8px; }

/* --- Max-width text containers --- */
.prose { max-width: 800px; }
.prose--center { max-width: 800px; text-align: center; margin-left: auto; margin-right: auto; }
.prose--sm { max-width: 650px; text-align: center; margin-left: auto; margin-right: auto; }

/* v5.19.0 – Utility Classes Phase 2 */
.text-center.mt-16 { text-align: center; margin-top: 16px; }
.text-center.mt-12 { text-align: center; margin-top: 12px; }
.text-center.mt-20 { text-align: center; margin-top: 20px; }
.text-center.mt-24 { text-align: center; margin-top: 24px; }
.text-center.mb-20 { text-align: center; margin-bottom: 20px; }
.container--md { max-width: 900px; }
.container--lg { max-width: 1000px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.text-xs-muted { font-size: 0.78rem; color: var(--text-muted); }
.text-hero-sub { color: rgba(255,255,255,0.7); font-size: 1.05rem; line-height: 1.8; margin-bottom: 28px; }
.text-faded { color: rgba(255,255,255,0.5); }
.rounded { border-radius: 8px; }
.text-md { font-size: 1rem; }
.text-lg { font-size: 1.5rem; margin-bottom: 8px; }
.text-sm-note { color: var(--text-light); font-size: 0.88rem; margin-top: 16px; }
.gold-link-sm { color: var(--gold-text); font-size: 0.82rem; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 2px; }
.section-gap { margin: 3rem 0 1.5rem; }
.pad-box { text-align: center; padding: 24px; }
.pad-box-left { text-align: left; padding: 20px; }
.hero-padding-top { padding-top: 100px; }
.mt-8 { margin-top: 8px; }

/* v5.19.0 – Utility Classes Phase 3 */
.text-body.mt-16 { color: var(--text-light); line-height: 1.7; margin-top: 16px; }
.text-right.mt-4 { text-align: right; margin-top: 4px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-32 { margin-bottom: 2rem; }
.text-center-light { color: var(--text-light); line-height: 1.9; text-align: center; }

/* ==========================================================================
   v5.19.1 – ICOONE DOMINANCE STYLING
   ========================================================================== */

/* --- C: Golden Nav Link for icoone® --- */
.nav-item--icoone > .nav-link {
    color: var(--gold) !important;
    font-weight: 600;
}
.nav-item--icoone > .nav-link:hover {
    color: var(--gold-dark, #b8943f) !important;
}
@media (max-width: 768px) {
    .nav-item--icoone > .nav-link {
        color: var(--gold) !important;
    }
}

/* --- B: Proof Bar label styling --- */
.proof-bar__label {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* --- E: Problemfinder icoone column dominant --- */
.problemfinder-table thead th:nth-child(2) {
    background: var(--gold);
    color: #fff;
    font-weight: 700;
}
.problemfinder-table thead th:nth-child(1),
.problemfinder-table thead th:nth-child(3),
.problemfinder-table thead th:nth-child(4),
.problemfinder-table thead th:nth-child(5) {
    background: var(--anthracite);
}
.problemfinder-table td.pf-main {
    color: var(--gold);
    font-weight: 700;
    font-size: 1.1em;
}

/* --- Google badge on testimonial cards --- */
.testimonial-card__google {
    display: inline-block;
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--creme);
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* v5.19.2 – Hero proof line + B/A gallery */
.mb-28 { margin-bottom: 28px; }
.flex-start.mb-28 { margin-bottom: 28px; }

/* v5.19.2 – Inline-Style Migration Kat.1+2 */
.playfair-heading { margin-top: 20px; font-family: 'Playfair Display', serif; }
.text-body-center { color: var(--text-light); line-height: 1.7; text-align: center; }
.text-intro-center { font-size: 1.1rem; margin: 16px 0; text-align: center; }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-sm-left { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); text-align: left; }
.mb-28 { margin-bottom: 28px; }
.mt-48 { margin-top: 3rem; }
.mt-60 { margin-top: 60px; }
.text-body-lg { font-size: 1.05rem; color: var(--text-light); line-height: 1.9; }
.text-body-lg.mt-16 { margin-top: 16px; }
.text-hero-desc { color: rgba(255,255,255,0.6); margin-bottom: 28px; text-align: center; }
.text-hero-desc-sm { color: rgba(255,255,255,0.5); margin-bottom: 30px; font-size: 0.9rem; }
.text-hero-intro { color: rgba(255,255,255,0.7); line-height: 1.8; margin-bottom: 16px; font-size: 1.05rem; }
.text-label-sm { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.text-source { margin-top: 3rem; font-size: 0.82rem; color: var(--text-muted); }
.emoji-lg { font-size: 3rem; margin-bottom: 16px; }
.emoji-lg-20 { font-size: 3rem; margin-bottom: 20px; }
.flex-center-gap { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.pad-section { padding: 3rem 0; }
.pad-divider { padding: 32px 0; border-bottom: 1px solid var(--border-light); }
.hero-padding-xl { padding-top: calc(var(--nav-height) + 60px); text-align: center; min-height: 70vh; display: flex; align-items: center; }

/* ==========================================================================
   WCAG 2.1 AA – Accessibility Overrides (v5.19.2)
   Strategy: Gold only decorative on light BG; accessible dark-gold for text.
   On dark sections: original gold (#C5A55A) – passes 4.8:1 on anthracite.
   ========================================================================== */

/* Gold links on dark sections keep original bright gold */
.section--dark .gold-link,
.section--dark .gold-link-sm,
.section--dark .link-gold,
.section--dark a[style*="color:var(--gold)"],
.footer .gold-link,
.footer .link-gold { color: var(--gold); text-decoration-color: rgba(197,165,90,0.5); }

/* Eyebrow on light BG: accessible dark-gold */
.eyebrow--gold { color: var(--gold-text); }
.section--dark .eyebrow--gold { color: var(--gold); }

/* Nav gold link – on dark nav bg, gold passes */
.nav-item--icoone > .nav-link { color: var(--gold) !important; }

/* text-gold utility: use on dark BG only; on light BG auto-darkens */
.text-gold { color: var(--gold-text); }
.section--dark .text-gold,
.hero .text-gold,
h1 .text-gold { color: var(--gold); }

/* btn--outline-light stays as-is (already on dark BG) */

/* Footer headings: dark bg, gold passes */
/* .footer-col h4 already gold on dark footer – correct */

/* Reduced motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* K2: Nav CTA – Gold on dark nav */
.site-nav .btn--gold { background: var(--gold); color: var(--anthracite); }
.site-nav .nav-link { white-space: nowrap; }
.site-nav .btn--gold:hover { background: var(--gold-dark); }

/* K11: Unified anthracite – fix all dark-tone variants */
.upsell-banner { background: linear-gradient(135deg, var(--anthracite), var(--anthracite)) !important; }
.icoone-video-wrap { background: var(--anthracite); }

/* K19: White stripe between sections – eliminate gaps */
.page-content > section + section { margin-top: 0; }
.page-content > .section { margin-bottom: 0; }
.section + .section { margin-top: 0; }

/* K25: FAQ answers left-aligned */
.faq-item p,
.faq-item div,
.faq-answer { text-align: left; }

/* K13/K14: B/A Gallery – headers above images, matching doc-card style */
.ba-card__header { padding: 14px 16px 12px; }
.ba-card__header h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 4px; }
.ba-card__meta { font-size: 0.82rem; color: var(--text-muted); }
.ba-card__link { display: block; text-decoration: none; color: inherit; transition: opacity 0.3s; }
.ba-card__link:hover { opacity: 0.85; }
.doc-card__info--top { padding: 14px 16px; }
.doc-card__info--top .doc-card__category { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold-text); margin-bottom: 4px; }
.doc-card__info--top .doc-card__title { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 4px; }
.doc-card__info--top .doc-card__meta { font-size: 0.82rem; color: var(--text-muted); }
a.doc-card--link { display: block; text-decoration: none; color: inherit; transition: transform 0.3s, box-shadow 0.3s; border-radius: 8px; }
a.doc-card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* K12: icoone device image alignment */
/* K12: icoone device image alignment – ONLY on /icoone/ page, not hero images */
/* icoone device image: constrained to match text height */
.icoone-device-img { max-width: 170px; height: auto; display: block; margin: 0 auto; border-radius: 12px; }
/* Hero images in seo-hero grid: full column width */
/* Hero images: centered, constrained for single images */
.seo-hero .feature-image,
.hero-page .feature-image { border-radius: 8px; border: 1px solid rgba(197,165,90,.2); align-self: center; overflow: hidden; max-height: 520px; }
.seo-hero .feature-image img,
.hero-page .feature-image img { width: 100%; height: auto; display: block; border-radius: 8px; }
/* icoone/massage/akupressur main page: landscape photos constrained */
.hero-page .feature-image img { max-height: 420px; object-fit: cover; }
/* Slider overrides: no max-height constraint */
.seo-hero .hero-slider { max-height: none; }

/* K15: Progression gallery header */
.progression-header { text-align: center; margin-bottom: 24px; }
.progression-header__title { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 4px; }
.progression-header__meta { font-size: 0.9rem; color: var(--text-muted); }

/* K22: Compact plans clickable cards */
a.compact-plans__card { text-decoration: none; color: inherit; display: block; transition: transform 0.3s, box-shadow 0.3s; }
a.compact-plans__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* ==========================================================================
   v5.19.3 – DEFINITIVE BUTTON SYSTEM (replaces all prior button overrides)
   Order matters: light BG first, dark BG last (wins cascade)
   ========================================================================== */

/* ── 1. LIGHT BG: Anthracite buttons, gold on hover ── */
.btn--gold {
    background: var(--anthracite) !important;
    color: #fff !important;
    border: none !important;
}
.btn--gold:hover {
    background: var(--gold) !important;
    color: var(--anthracite) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

/* ── 2. LIGHT BG: Outline buttons with gold border ── */
.btn--outline {
    border: 1px solid rgba(197,165,90,0.5) !important;
    color: var(--gold-text) !important;
    background: transparent !important;
}
.btn--outline:hover {
    background: var(--gold) !important;
    color: var(--anthracite) !important;
}

/* Reduce cta-banner + footer gap (both anthracite, visually merged) */
.cta-banner { padding: 48px 0 40px; }
.cta-banner + .site-footer { padding-top: 32px; }

/* ── 3. DARK BG: Gold buttons (OVERRIDES #1) ── */
.section--dark .btn--gold,
.seo-hero .btn--gold,
.hero .btn--gold,
.hero--premium .btn--gold,
.hero-padding .btn--gold,
.hero-padding-lg .btn--gold,
.cta-inline--dark .btn--gold,
.cta-banner .btn--gold,
.book-banner .btn--gold,
.upsell-banner .btn--gold {
    background: var(--gold) !important;
    color: var(--anthracite) !important;
    border: none !important;
}
.section--dark .btn--gold:hover,
.seo-hero .btn--gold:hover,
.hero .btn--gold:hover,
.hero--premium .btn--gold:hover,
.cta-inline--dark .btn--gold:hover,
.cta-banner .btn--gold:hover,
.book-banner .btn--gold:hover,
.upsell-banner .btn--gold:hover {
    background: var(--gold-dark) !important;
}

/* ── 4. DARK BG: Outline-light (white ghost button) ── */
.btn--outline-light,
.section--dark .btn--outline-light,
.seo-hero .btn--outline-light,
.hero .btn--outline-light {
    border: 1px solid rgba(255,255,255,0.35) !important;
    color: rgba(255,255,255,0.85) !important;
    background: transparent !important;
}
.btn--outline-light:hover,
.section--dark .btn--outline-light:hover,
.seo-hero .btn--outline-light:hover,
.hero .btn--outline-light:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.6) !important;
    color: #fff !important;
}

/* ── 5. DARK BG: Outline (gold ghost button on dark) ── */
.section--dark .btn--outline,
.seo-hero .btn--outline,
.hero .btn--outline,
.cta-inline--dark .btn--outline,
.cta-banner .btn--outline {
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
    background: transparent !important;
}
.section--dark .btn--outline:hover,
.seo-hero .btn--outline:hover,
.hero .btn--outline:hover,
.cta-inline--dark .btn--outline:hover,
.cta-banner .btn--outline:hover {
    background: var(--gold) !important;
    color: var(--anthracite) !important;
}

/* ── 6. NAV CTA: Always gold ── */
.site-nav .nav-cta.btn--gold {
    background: var(--gold) !important;
    color: var(--anthracite) !important;
}
.site-nav .nav-cta.btn--gold:hover {
    background: var(--gold-dark) !important;
}
.nav-menu .nav-cta::after {
    display: none !important;
}

/* Pricing grid: 2-card grids always centered (3-column layout is .abo-grid) */

/* Gold-line: always centered */
.gold-line { margin-left: auto; margin-right: auto; }

/* WHITE STRIPE FIX: Breadcrumb already handles nav-height spacing */
.breadcrumb {
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
}
/* page-content: breadcrumb is always before it on subpages, so no extra padding needed */
.page-content {
    padding-top: 0 !important;
}
.page-content > section:first-child,
.page-content > div:first-child > section:first-child {
    margin-top: 0 !important;
}
/* Hero sections handle their own vertical padding */
.hero-padding { padding-top: 60px; padding-bottom: 60px; }
.hero-padding-lg { padding-top: 80px; padding-bottom: 80px; }

/* WHITE STRIPE FIX: Pages without .page-content wrapper */
main#main-content {
    padding-top: 0 !important;
}
main#main-content > .breadcrumb + section,
main#main-content > .breadcrumb + div,
main#main-content > nav.breadcrumb + section,
main#main-content > nav.breadcrumb + .page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Hero sections inside main (no wrapper) */
main#main-content > section.section--dark:first-of-type {
    margin-top: 0 !important;
}

/* Eliminate any visible lines between dark sections */
.section--dark + .section--dark,
.section--dark + .cta-inline--dark,
.cta-inline--dark + .section--dark,
.seo-hero + .section--dark,
.seo-hero + .cta-inline--dark,
.section--dark + .cross-links-section {
    margin-top: 0;
    border-top: none;
}
.cross-links-section { border-top: none; border-bottom: none; }

/* ==========================================================================
   A4: Utility classes replacing inline styles
   ========================================================================== */
.text-light-body { color: var(--text-light); font-size: 1rem; line-height: 1.7; }
.text-source { font-size: 0.82rem; color: var(--text-muted); text-align: center; margin-top: 16px; }
.text-legal-note { margin-top: 40px; color: var(--text-muted); font-size: 0.85rem; }
.legal-h3 { margin-top: 24px; font-family: 'Playfair Display', serif; }
.amelia-notice { text-align: center; padding: 16px; background: rgba(197,165,90,0.08); border-left: 3px solid var(--gold); margin-top: 24px; }
.amelia-panel-wrap { max-width: 900px; margin: 0 auto; }

/* --- AMELIA CUSTOMER PANEL – Praxis Style Overrides --- */
.amelia-panel-wrap * { font-family: 'Lato', sans-serif !important; }
.amelia-panel-wrap h1, .amelia-panel-wrap h2, .amelia-panel-wrap h3 { font-family: 'Playfair Display', serif !important; color: var(--anthracite) !important; }

/* Login form */
.amelia-panel-wrap .am-asi__header,
.amelia-panel-wrap .amelia-customer-panel .am-asi__header { font-family: 'Playfair Display', serif !important; font-size: 1.2rem !important; color: var(--anthracite) !important; }
.amelia-panel-wrap .am-asi__text,
.amelia-panel-wrap p { color: var(--text-light) !important; font-size: 0.9rem !important; line-height: 1.6 !important; }

/* Input fields */
.amelia-panel-wrap input[type="text"],
.amelia-panel-wrap input[type="email"],
.amelia-panel-wrap input[type="password"],
.amelia-panel-wrap input[type="tel"],
.amelia-panel-wrap textarea,
.amelia-panel-wrap select { border: 1px solid var(--border-light) !important; border-radius: 0 !important; padding: 10px 14px !important; font-size: 0.88rem !important; color: var(--anthracite) !important; transition: border-color 0.3s !important; }
.amelia-panel-wrap input:focus,
.amelia-panel-wrap textarea:focus,
.amelia-panel-wrap select:focus { border-color: var(--gold) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(197,165,90,0.15) !important; }

/* Buttons */
.amelia-panel-wrap button,
.amelia-panel-wrap .am-button,
.amelia-panel-wrap [class*="am-button"],
.amelia-panel-wrap input[type="submit"] { background: var(--anthracite) !important; color: #fff !important; border: none !important; border-radius: 0 !important; padding: 10px 28px !important; font-family: 'Lato', sans-serif !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.3s !important; }
.amelia-panel-wrap button:hover,
.amelia-panel-wrap .am-button:hover,
.amelia-panel-wrap [class*="am-button"]:hover,
.amelia-panel-wrap input[type="submit"]:hover { background: var(--gold) !important; color: var(--anthracite) !important; }

/* Primary/accent buttons */
.amelia-panel-wrap .am-button--primary,
.amelia-panel-wrap [class*="primary"] button { background: var(--gold) !important; color: var(--anthracite) !important; }
.amelia-panel-wrap .am-button--primary:hover,
.amelia-panel-wrap [class*="primary"] button:hover { background: var(--gold-dark) !important; }

/* Links */
.amelia-panel-wrap a { color: var(--gold) !important; text-decoration: none !important; }
.amelia-panel-wrap a:hover { color: var(--gold-dark) !important; }

/* Tabs & navigation */
.amelia-panel-wrap .am-tab,
.amelia-panel-wrap [class*="am-tab"] { border-color: var(--border-light) !important; }
.amelia-panel-wrap .am-tab--active,
.amelia-panel-wrap [class*="active"] .am-tab { border-color: var(--gold) !important; color: var(--gold) !important; }

/* Cards/boxes */
.amelia-panel-wrap .am-card,
.amelia-panel-wrap [class*="am-card"],
.amelia-panel-wrap .am-asi { background: #fff !important; border: 1px solid var(--border-light) !important; border-radius: 0 !important; box-shadow: none !important; }

/* Status badges */
.amelia-panel-wrap [class*="approved"],
.amelia-panel-wrap [class*="confirmed"] { color: var(--gold) !important; }

/* Responsive */
@media (max-width: 480px) { .amelia-panel-wrap { padding: 0 4px; } .amelia-panel-wrap button, .amelia-panel-wrap [class*="am-button"] { padding: 8px 16px !important; font-size: 0.72rem !important; } }
.share-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.share-row--mt { margin-top: 12px; }
.blog-card__title { font-size: 1.3rem; margin-bottom: 8px; }
.blog-card__title a { color: var(--anthracite); transition: color 0.3s; }
.blog-card__title a:hover { color: var(--gold); }
.blog-card__excerpt { color: var(--text-light); line-height: 1.7; font-size: 0.92rem; }
.blog-card__link { color: var(--gold); font-size: 0.82rem; font-weight: 500; }
.blog-empty { text-align: center; padding: 60px 0; }
.blog-empty__text { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 20px; }
.hero-storniert { padding-top: calc(var(--nav-height) + 60px); text-align: center; min-height: 70vh; display: flex; align-items: center; }
.info-box { padding: 20px; background: var(--creme); border-radius: 12px; }
.info-box__text { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
.info-box__text:last-child { margin-bottom: 0; }
.price-highlight { font-size: 1.2rem; margin: 16px 0; text-align: center; }

/* ==========================================================================
   HERO SLIDER – Auto-fade for documentation images
   ========================================================================== */
.hero-slider {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(197,165,90,.2);
    align-self: center;
    margin-top: 20px;
}
.hero-slider__slide {
    display: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.hero-slider__slide--active {
    display: block;
    opacity: 1;
    cursor: pointer;
}
.hero-slider__slide img {
    width: 100%;
    height: auto;
    display: block;
}
.hero-slider__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}
.hero-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}
.hero-slider__dot--active {
    background: var(--gold);
    border-color: var(--gold);
}
.hero-slider__dot:hover {
    background: rgba(255,255,255,0.7);
}

/* Preise page: 2-card grids centered */
.page-template-page-preise .pricing-grid {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 769px) {
    .page-template-page-preise .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY – Focus Visible (WCAG 2.1 AA)
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(197,165,90,0.25);
}
.section--dark :focus-visible,
.site-nav :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--gold);
}

/* ==========================================================================
   REDUCED MOTION – Respect user preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hero-slider__slide {
        transition: none !important;
    }
    .hero-slider__dot {
        transition: none !important;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   v5.19.73 FIXES – Mobile spacing + doc-card alignment
   ========================================================================== */

/* Fix 2: /ueber-mich/ – reduce hero top padding on mobile */
@media (max-width: 768px) {
    .page-template-page-ueber-mich .hero-padding-top {
        padding-top: 50px;
    }
}

/* Fix 3: /ueber-mich/ – reduce gap between CTA buttons and Spezialisierungen on mobile */
@media (max-width: 768px) {
    .page-template-page-ueber-mich .section--dark.section--pad-md + .cross-links-section {
        margin-top: 0;
    }
    .page-template-page-ueber-mich .section--dark.section--pad-md {
        padding-bottom: 24px;
    }
}

/* Fix 4: /ueber-mich/ – reduce gap between Spezialisierungen and next CTA section */
@media (max-width: 768px) {
    .page-template-page-ueber-mich .cross-links-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* Fix 8: /akupressur/ – reduce gap before "Drei Wirkungen" on mobile */
@media (max-width: 768px) {
    .page-template-page-akupressur .section + .section {
        padding-top: 20px;
    }
}

/* Fix 14: Doc-card – aligned images across cards in grid rows */
.ba-gallery a.doc-card--link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ba-gallery .doc-card__info--top {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
}
.ba-gallery .doc-card__info--top .doc-card__meta {
    margin-top: auto;
}
.ba-gallery a.doc-card--link img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 768px) {
    .ba-gallery .doc-card__info--top {
        min-height: 105px;
        padding: 10px 10px;
    }
    .ba-gallery .doc-card__info--top .doc-card__category {
        font-size: 0.58rem;
        letter-spacing: 0.8px;
    }
    .ba-gallery .doc-card__info--top .doc-card__title {
        font-size: 0.82rem;
    }
    .ba-gallery .doc-card__info--top .doc-card__meta {
        font-size: 0.68rem;
    }
}

/* ==========================================================================
   v5.19.76 FIXES
   ========================================================================== */

/* Fix: Hero proof mobile – stars + rating stacked on SUBPAGES only */
@media (max-width: 768px) {
    .seo-hero .hero__proof {
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .seo-hero .hero__proof .hero__proof-sep {
        display: none;
    }
    /* Front-page hero proof stays inline */
    .home .hero__proof {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px !important;
        font-size: 0.75rem;
    }
    .home .hero__proof .hero__proof-sep {
        display: inline !important;
    }
}

/* Fix: Hero proof centered variant (CTA final) */
.hero__proof--centered {
    justify-content: center;
    text-align: center;
}

/* Fix: /icoone/ video section – reduce top spacing on mobile */
@media (max-width: 768px) {
    .page-template-page-icoone .section--creme + .section--creme {
        padding-top: 20px;
    }
}

/* Fix: Doc-cards mobile – show next card edge for swipe hint */
@media (max-width: 768px) {
    .doc-gallery {
        padding-right: 0 !important;
        margin-right: -16px;
    }
    .doc-gallery .doc-card {
        flex: 0 0 85% !important;
        scroll-snap-align: start;
    }
}

/* Fix: Cross-links accordion styles */
.cross-links-accordion {
    max-width: 600px;
    margin: 0 auto;
}
.cl-accordion__item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cl-accordion__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.cl-accordion__label {
    color: var(--gold);
    font-weight: 600;
}
.cl-accordion__icon {
    color: var(--gold);
    font-size: 1.2rem;
    line-height: 1;
}
.cl-accordion__panel {
    padding-bottom: 12px;
}
.cl-accordion__panel .cross-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Fix: Cross-link box links – start on new line */
.doc-card__info a.gold-link-sm,
.trust-reason a.gold-link,
.text-body a.gold-link {
    display: block;
    margin-top: 8px;
}

/* Fix: Cert badge links same width as "Mehr über mich" button */
@media (max-width: 768px) {
    .cert-link,
    .certifications a,
    .gold-link-sm {
        display: block;
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/* Fix: "JETZT TERMIN BUCHEN" on one line */
.cta-final__actions .btn--gold,
.cta-final__actions .btn {
    white-space: nowrap;
}

/* Fix: CTA buttons equal width on mobile */
@media (max-width: 768px) {
    .cta-final__actions .btn {
        width: 100%;
        max-width: 400px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8px;
        text-align: center;
    }
}

/* Fix: /icoone/ pricing grid centered on desktop */
.pricing-grid--narrow,
.pricing-grid--centered {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

/* Fix: Compact plans (now pricing-card) on subpages – centered */
.pricing-grid--centered {
    display: grid;
    gap: 24px;
}
@media (min-width: 769px) {
    .pricing-grid--centered {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Expert card source links */
.expert-card__source-link {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.3s;
}
.expert-card__source-link:hover {
    color: var(--gold-dark, #b8943d);
    text-decoration: underline;
}

/* ==========================================================================
   DESIGN SYSTEM v5.20.6 – Type Scale & Layout Utilities
   Consolidates 20+ font-sizes into 6 variables + 3 headline clamps.
   Replaces inline styles with reusable classes.
   ========================================================================== */

/* --- Type Scale (references :root variables) --- */
.fs-2xs { font-size: var(--fs-2xs) !important; }
.fs-xs  { font-size: var(--fs-xs) !important; }
.fs-sm  { font-size: var(--fs-sm) !important; }
.fs-base { font-size: var(--fs-base) !important; }
.fs-md  { font-size: var(--fs-md) !important; }
.fs-lg  { font-size: var(--fs-lg) !important; }

/* --- Text Utilities (consolidation of 18 → 5 core classes) --- */
.text-body    { font-size: var(--fs-base); color: var(--text-light); line-height: 1.7; }
.text-small   { font-size: var(--fs-sm); }
.text-detail  { font-size: var(--fs-sm); color: var(--text-light); }
.text-muted   { color: var(--text-muted); }
.text-light   { color: rgba(255,255,255,0.7); }

/* --- Font Weight Utilities --- */
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* --- Layout Utilities (replaces inline styles) --- */
.justify-center { justify-content: center !important; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.rounded-sm { border-radius: 8px; overflow: hidden; }

/* --- Spacing Utilities (common inline margin-tops) --- */
.mt-0  { margin-top: 0 !important; }
.mt-4  { margin-top: 4px !important; }
.mt-8  { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-28 { margin-top: 28px !important; }
.mt-32 { margin-top: 32px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-48 { margin-top: 48px !important; }
.mt-60 { margin-top: 60px !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-6  { margin-bottom: 6px !important; }
.mb-8  { margin-bottom: 8px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-24 { margin-bottom: 24px !important; }
.p-0   { padding: 0 !important; }

/* --- Section Compact (for gutschein banner etc.) --- */
.section--compact { padding: 2rem 0; }

/* --- Gutschein Banner Component (extracted from inline) --- */
.gutschein-banner h3 { font-size: var(--fs-md); margin: 0 0 6px; }
.gutschein-banner p  { font-size: var(--fs-sm); color: var(--text-light); margin: 0; }

/* --- Social Links Spacing --- */
.social-links { margin-top: 16px; }

/* --- Desktop Sticky Layout --- */
.desktop-sticky .container { display: flex; align-items: center; justify-content: space-between; }

/* v5.21.5: Booking info hints – always 3 columns in one line */
.info-hints {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 600px) {
    .info-hints {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Footer credit link */
.footer-credit {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.3s;
}
.footer-credit:hover {
    color: var(--gold);
}