/* ============================================================
   Studio Voyage – Rundreisen (Inspirationsseite)
   Gekapselt unter .sv-rt-page, ergänzt site/site.css + hotels/assets/app.css.
   border-radius wird hier bewusst mit !important gesetzt, da
   ".sv-body *{border-radius:0!important}" (hotels/assets/app.css)
   sonst auch diese Seite eckig rendern würde.
   ============================================================ */

.sv-rt-page {
    background: #fff;
}

.sv-rt-intro {
    max-width: 760px;
    margin: 0 0 48px;
}

.sv-rt-intro p {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3028;
    margin: 0 0 12px;
}

.sv-rt-list {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 5vw, 56px);
}

/* ── Card ───────────────────────────────────────────────── */
.sv-rt-card {
    background: #fff;
    border: 1px solid rgba(23, 19, 15, .08);
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(23, 19, 15, .06);
}

.sv-rt-card-row {
    align-items: stretch;
}

.sv-rt-gallery-col {
    background: #ffffff;
}

.sv-rt-content-col {
    display: flex;
}

.sv-rt-content {
    padding: clamp(22px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.sv-rt-eyebrow {
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11.5px;
    color: #8e6c38;
    margin: 0;
}

.sv-rt-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #17130f;
    margin: 0;
}

.sv-rt-teaser {
    font-size: 16px;
    line-height: 1.7;
    color: #3a3028;
    margin: 0;
}

/* ── Meta-Zeile ─────────────────────────────────────────── */
.sv-rt-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid rgba(23, 19, 15, .07);
    border-bottom: 1px solid rgba(23, 19, 15, .07);
}

.sv-rt-meta li {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sv-rt-meta-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8e6c38;
}

.sv-rt-meta-value {
    font-size: 14.5px;
    color: #17130f;
    font-weight: 500;
}

/* ── Chips ──────────────────────────────────────────────── */
.sv-rt-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.sv-rt-chip {
    font-size: 12.5px;
    color: #5e554b;
    background: #faf8f5;
    border: 1px solid rgba(184, 148, 94, .3);
    border-radius: 100px !important;
    padding: 6px 14px;
    line-height: 1.3;
    white-space: nowrap;
}

/* ── Block-Listen (Hotels / Erlebnisse) ────────────────────*/
.sv-rt-block-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8e6c38;
    margin: 0 0 8px;
}

.sv-rt-hotel-list,
.sv-rt-experience-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sv-rt-hotel-list li {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sv-rt-hotel-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #17130f;
}

.sv-rt-hotel-meta {
    font-size: 13px;
    color: #786f65;
}

.sv-rt-experience-list li {
    font-size: 14.5px;
    line-height: 1.55;
    color: #3a3028;
    padding-left: 16px;
    position: relative;
}

.sv-rt-experience-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #b8945e;
}

/* ── Aktionen ───────────────────────────────────────────── */
.sv-rt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.sv-rt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 100px !important;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
    font-family: inherit;
}

.sv-rt-btn-primary {
    background: #b8945e;
    color: #fff;
}

.sv-rt-btn-primary:hover {
    background: #9e7b48;
    color: #fff;
    transform: translateY(-1px);
}

.sv-rt-btn-ghost {
    background: transparent;
    border-color: rgba(23, 19, 15, .2);
    color: #17130f;
}

.sv-rt-btn-ghost:hover {
    border-color: #8e6c38;
    color: #8e6c38;
}

.sv-rt-btn-ghost svg {
    transition: transform .25s;
}

/* ── Details/Summary (native Accordion, ohne JS) ──────────*/
.sv-rt-details > summary {
    list-style: none;
}

.sv-rt-details > summary::-webkit-details-marker {
    display: none;
}

.sv-rt-details[open] > summary svg {
    transform: rotate(180deg);
}

/* ── Detail-Panel ───────────────────────────────────────── */
.sv-rt-detail {
    margin-top: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(23, 19, 15, .07);
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: sv-rt-detail-in .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .sv-rt-detail {
        animation: none;
    }
}

@keyframes sv-rt-detail-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sv-rt-detail-route {
    font-size: 15px;
    line-height: 1.7;
    color: #3a3028;
    margin: 0;
}

.sv-rt-stage-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sv-rt-stage-list li {
    font-size: 14px;
    line-height: 1.6;
    color: #3a3028;
}

.sv-rt-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sv-rt-detail-grid > div p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #3a3028;
}

@media (min-width: 600px) {
    .sv-rt-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Galerie ────────────────────────────────────────────── */
.sv-rt-gallery {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
}

.sv-rt-gallery-hero {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 16px !important;
    overflow: hidden;
    background: #ffffff;
}

.sv-rt-gallery-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.sv-rt-gallery-item {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 16px !important;
    overflow: hidden;
    background: #ffffff;
}

.sv-rt-gallery-item--map {
    background: #ffffff;
}

.sv-rt-gallery-hero img,
.sv-rt-gallery-item img,
.sv-rt-gallery-item svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sv-rt-gallery-item--map svg {
    object-fit: contain;
}

.sv-rt-gallery-zoom {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

.sv-rt-gallery-zoom:focus-visible {
    outline: 2px solid #b8945e;
    outline-offset: -2px;
}

/* ── Lightbox ───────────────────────────────────────────── */
.sv-rt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
}

.sv-rt-lightbox.is-open {
    display: flex;
}

.sv-rt-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 14, 10, .88);
}

.sv-rt-lightbox-stage {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1200px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-rt-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px !important;
    display: block;
}

.sv-rt-lightbox-close,
.sv-rt-lightbox-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50% !important;
    background: rgba(17, 14, 10, .55);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.sv-rt-lightbox-close {
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    font-size: 22px;
}

.sv-rt-lightbox-nav {
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    font-size: 26px;
}

.sv-rt-lightbox-prev {
    left: -16px;
}

.sv-rt-lightbox-next {
    right: -16px;
}

@media (max-width: 600px) {
    .sv-rt-lightbox-close {
        top: -40px;
        right: 4px;
    }

    .sv-rt-lightbox-prev {
        left: 4px;
    }

    .sv-rt-lightbox-next {
        right: 4px;
    }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sv-rt-content-col {
        order: 2;
    }

    .sv-rt-gallery-col {
        order: 1;
    }
}