/* ============================================================================ * SWIVON Reisen — experience platform (reise_offer) net-new components. * Conditionally enqueued on offer hub/listing/single only (inc/reise-offer.php). * Extends shipped idioms (rt-/dt-/rh-/hub-/blog-); uses ONLY :root tokens. * Surface law: DARK only for emotional full-bleed; LIGHT for all bookable mechanics. * Motion: opacity/transform only, --ease. No bounce, no glass, no side-stripes. * ========================================================================== */ .offer-wrap{width:min(var(--wrap-hero),calc(100% - 2*var(--gutter)));margin-inline:auto} /* Shop body = full header width (--wrap-hero), and 3 offer cards per row in the listing */ .reise-hub .hub-wrap{width:min(var(--wrap-hero),calc(100% - 2*var(--gutter)))} .offer-layout--sidebar .dt-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:900px){.offer-layout--sidebar .dt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.offer-layout--sidebar .dt-grid{grid-template-columns:minmax(0,1fr)}} .offer-layout--sidebar > *,.offer-main,.offer-grid > *{min-width:0} /* prevent grid-item blowout (card images have large intrinsic width) */ /* ===== Reisen section sub-navigation (under the header, every Reisen page) ===== */ /* On Reisen pages the site header is compacted (the section sub-nav below is the focus). */ body.reise-section{--header-h:64px;scroll-padding-top:calc(var(--header-h) + 56px)} /* Reisen section sub-nav — STICKY under the header, high-contrast, the primary nav on Reisen pages. */ .reise-subnav{position:sticky;top:var(--header-h);z-index:59;background:var(--black);border-top:2px solid var(--gold);border-bottom:1px solid rgba(255,255,255,.14)} body.admin-bar .reise-subnav{top:calc(var(--header-h) + 32px)} .reise-subnav-in{display:flex;gap:0;align-items:stretch;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth} .reise-subnav-in::-webkit-scrollbar{display:none} .reise-subnav-link{flex:0 0 auto;display:inline-flex;align-items:center;padding:15px 22px;font-family:var(--nav);font-size:14.5px;font-weight:600;letter-spacing:.015em;color:rgba(255,255,255,.92);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap;transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)} .reise-subnav-link:hover{color:#fff;background:rgba(255,255,255,.06)} .reise-subnav-link.is-active{color:var(--gold)} /* active = gold text only, no underline */ /* Category tab WITH a dropdown: the category LINK navigates, the round caret BUTTON opens the panel. Mirrors the main-header mobile menu (caret in a gapped round button) so both controls read clearly. */ .reise-subnav-item.has-drop{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;padding-right:14px} .reise-subnav-item.has-drop .reise-subnav-link{padding-right:11px;border-bottom-color:transparent} .reise-subnav-item.has-drop:hover .reise-subnav-link{background:rgba(255,255,255,.06)} /* active dropdown tab = gold text only (no underline, desktop + mobile) */ .reise-subnav-item.has-drop.is-active-parent .reise-subnav-link{color:var(--gold)} .reise-subnav-caret{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.92);cursor:pointer;transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)} .reise-subnav-caret:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);color:#fff} .reise-subnav-item.is-open .reise-subnav-link{color:var(--gold)} .reise-subnav-item.is-open .reise-subnav-caret{background:rgba(201,168,76,.2);border-color:var(--gold);color:var(--gold)} .reise-subnav-caret .rs-caret{width:14px;height:14px;transition:transform .25s var(--ease)} .reise-subnav-caret[aria-expanded="true"] .rs-caret{transform:rotate(180deg)} /* Horizontal-scroll affordance (mobile: the category row scrolls sideways). Edge fades + a gold nudge chevron appear only while there is more to scroll right (JS toggles .can-left / .can-right). */ .reise-subnav::before,.reise-subnav::after{content:"";position:absolute;top:0;bottom:0;width:46px;pointer-events:none;z-index:6;opacity:0;transition:opacity .2s var(--ease)} .reise-subnav::before{left:0;background:linear-gradient(90deg,var(--black),rgba(20,20,20,0))} .reise-subnav::after{right:0;background:linear-gradient(270deg,var(--black),rgba(20,20,20,0))} .reise-subnav.can-left::before{opacity:1} .reise-subnav.can-right::after{opacity:1} /* Reisen sub-nav scroll arrow REMOVED (was buggy / floated over other page parts). The edge-fade gradients (.can-left / .can-right) remain as the sideways-scroll affordance. */ @media(prefers-reduced-motion:reduce){.reise-subnav-in{scroll-behavior:auto}} /* Dropdown panel — full-width band dropping below the bar (absolute → never clipped by the scrolling row) */ .reise-drop-panel{position:absolute;left:0;right:0;top:100%;z-index:40;background:#141414;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 24px 40px -24px rgba(0,0,0,.7)} .reise-drop-panel[hidden]{display:none} /* Mobile: the category dropdown opens as a FULL-SCREEN overlay below the bar (top set by JS to the bar's bottom) so no page section peeks through underneath. Background scroll is locked while open. */ .reise-drop-panel.is-fullscreen{position:fixed;left:0;right:0;bottom:0;height:auto;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:120;box-shadow:none} body.reise-drop-lock{overflow:hidden} .reise-drop-inner{padding:20px 20px 24px} .reise-drop-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 36px;padding:22px 20px 26px} .reise-drop-h{margin:0 0 12px;font-family:var(--nav);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)} .reise-drop-h[aria-current="true"]{color:var(--gold)} .reise-drop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 18px} .reise-drop-collist{display:flex;flex-direction:column;gap:1px} .reise-drop-link{padding:10px 11px;border-radius:8px;font-family:var(--nav);font-size:14px;font-weight:500;color:rgba(255,255,255,.88);text-decoration:none;transition:background .18s var(--ease),color .18s var(--ease)} .reise-drop-link:hover{background:rgba(255,255,255,.08);color:#fff} .reise-drop-link.is-active{color:var(--gold)} @media(max-width:860px){ /* tighter tabs so more categories peek into view; the right fade hints the rest scroll sideways */ .reise-subnav-link{padding:14px 16px;font-size:14px} .reise-subnav-item.has-drop{padding-right:12px} .reise-subnav-item.has-drop .reise-subnav-link{padding-right:9px} /* the caret is the PRIMARY way to open the subcategory panel on mobile → ≥40px touch target */ .reise-subnav-caret{width:40px;height:40px} /* sticky sub-nav → keep the dropdown an absolute, scrollable overlay (don't bloat the sticky bar) */ .reise-drop-panel{max-height:calc(100dvh - var(--header-h) - 54px);overflow-y:auto} .reise-drop-grid{grid-template-columns:1fr 1fr} .reise-drop-cols{grid-template-columns:1fr;gap:18px} .reise-drop-link{padding:13px 11px;font-size:15px} } @media(max-width:480px){.reise-drop-grid{grid-template-columns:1fr}} /* "Read more" link under the H1 lead → jumps to the SEO text below the listing */ html{scroll-behavior:smooth} .rh-readmore{white-space:nowrap;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s} .rh-readmore::after{content:" \2193";font-weight:400} .rh-lead .rh-readmore{color:var(--gold)} .rh-lead .rh-readmore:hover{color:#e3c878} .blog-intro .rh-readmore{color:var(--gold-d,#9a7b2e)} .blog-intro .rh-readmore:hover{color:var(--black)} /* Category / subcategory SEO description text (below the products / pagination) */ .cat-seo{border-top:1px solid var(--line);margin-top:clamp(34px,5vw,58px);padding:clamp(32px,5vw,54px) 20px 0;scroll-margin-top:96px} /* Standard section spacing: separate the bottom of the listing / SEO text from the dark CTA band below. One rule covers both the SEO-text pages (.cat-seo last) and the filter pages (.offer-listing-body last). */ .offer-listing .rt-cta{margin-top:clamp(48px,7vw,80px)} /* Legal disclaimer footnote on restaurant pages (SWIVON is not affiliated with the named restaurants). */ .reise-disclaimer{font-family:var(--nav);font-size:12.5px;line-height:1.65;color:#6e695f;margin-top:clamp(24px,3.5vw,38px)} .rsto-single .reise-disclaimer{margin-bottom:clamp(40px,6vw,64px)} .cat-seo-body{max-width:840px} .cat-seo-body h2{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.4vw,27px);line-height:1.22;color:var(--black);margin:1.8em 0 .5em} .cat-seo-body > h2:first-child,.cat-seo-body > p:first-child{margin-top:0} .cat-seo-body p{font-family:var(--nav);font-size:1rem;line-height:1.78;color:#4d4940;margin:0 0 1.05em;max-width:74ch} .cat-seo-body a{color:var(--gold-d,#9a7b2e);text-decoration:underline;text-underline-offset:2px} /* ===== Hub ===== */ .rh-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .rh-hero-ghost{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.32);color:#fff;font-family:var(--nav);font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)} .rh-hero-ghost:hover{border-color:var(--gold);color:var(--gold)} .hub-sec--wide{max-width:none} /* Browse-by-Thema grid on the hub (category-strengthening, KB §7) */ .reise-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:24px} .reise-theme-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 20px;background:#faf8f3;border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--nav);font-weight:600;color:var(--black);text-decoration:none;transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)} .reise-theme-card:hover{border-color:var(--gold);background:#fff;transform:translateY(-2px)} .reise-theme-name{font-size:14.5px;letter-spacing:.01em} .reise-theme-arrow{color:var(--gold-d);font-size:16px;transition:transform .22s var(--ease)} .reise-theme-card:hover .reise-theme-arrow{transform:translateX(3px)} /* modern image cards (photo + title, hover zoom) — Region / Thema */ .reise-imgcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px;margin-top:24px} .reise-imgcard{position:relative;display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#e9e4da;text-decoration:none;box-shadow:0 1px 3px rgba(12,12,12,.06);isolation:isolate} .reise-imgcard-media{position:absolute;inset:0;background:var(--ic-img,none) center/cover no-repeat;transition:transform .7s var(--ease)} .reise-imgcard:hover .reise-imgcard-media{transform:scale(1.06)} .reise-imgcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,12,12,.74),rgba(12,12,12,.12) 46%,rgba(12,12,12,0) 68%)} .reise-imgcard-t{position:absolute;left:16px;right:14px;bottom:13px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;color:#fff;font-family:var(--nav);font-weight:700;font-size:16px;line-height:1.22;letter-spacing:.2px;text-shadow:0 1px 10px rgba(0,0,0,.4)} .reise-imgcard-ar{flex:0 0 auto;color:var(--gold);font-size:17px;transition:transform .25s var(--ease)} .reise-imgcard:hover .reise-imgcard-ar{transform:translateX(4px)} .reise-imgcard--ph{background:linear-gradient(140deg,#f2ede4,#e3dbc9)} .reise-imgcard--ph::after{background:linear-gradient(to top,rgba(12,12,12,.13),transparent 55%)} .reise-imgcard--ph .reise-imgcard-t{color:#4a4740;text-shadow:none} .reise-imgcard--ph .reise-imgcard-ar{color:var(--gold-d)} @media(max-width:560px){.reise-imgcard-grid{grid-template-columns:1fr 1fr;gap:12px}.reise-imgcard-t{font-size:14px;left:12px;right:11px;bottom:11px}} /* Breadcrumb overlaid at the top-left INSIDE the dark listing hero (was a white bar between header & hero). padding-top drops it a touch lower into the image; light --hero variant + shadow for legibility. */ .rh-hero-bc{position:absolute;top:0;left:0;right:0;z-index:3;padding-top:var(--bc-pt);pointer-events:none} .rh-hero-bc .swv-bc{width:min(var(--wrap),calc(100% - 2*var(--gutter)));margin-inline:auto;pointer-events:auto;text-shadow:0 1px 10px rgba(0,0,0,.55)} .rh-hero-bc .swv-bc-list{justify-content:flex-start} /* Hub hero = compact shop-homepage banner (short H1/lead, categories immediately below) */ .reise-hub .rh-hero-inner{padding:clamp(40px,7vh,76px) 0 clamp(34px,5.5vh,60px);gap:11px} .reise-hub .rh-h1{font-size:clamp(29px,3.8vw,46px);max-width:22ch} .reise-hub .rh-lead{font-size:clamp(.95rem,1.1vw,1.08rem);max-width:48ch} .reise-hub .hub-wrap{padding-top:clamp(34px,4vw,52px)} /* ===== Offer card price (extends dt-card) ===== */ .offer-card .dt-card-img{background:linear-gradient(135deg,#14110c,#2c2620)} /* luxe placeholder when a real photo is still pending */ .dt-card-price{font-family:var(--serif);font-size:1.22rem;font-weight:700;color:var(--gold-d);line-height:1;margin:0 0 16px} .dt-card-price .offer-price-incl{font-family:var(--nav);font-size:.72rem;font-weight:600;letter-spacing:.04em;color:#8a8a8a} /* ===== Compact offer card (scoped: blog/info cards keep their own layout) ===== */ /* Meta = ONE line, ONE item (duration). Never wraps to a 2nd line. */ .offer-card .dt-card-meta{flex-wrap:nowrap;gap:0;min-width:0;margin-bottom:12px} .offer-card .dt-meta-item{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Price row: "Preis" label sits on the SAME row as the price (Google price pickup). */ .offer-card .dt-card-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.12em .5em} .dt-card-price-label{font-family:var(--nav);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6a665c} /* Shorter description → shorter card: clamp the hook to 2 lines. */ .offer-card .dt-card-ex{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 14px} /* ===== Listing ===== */ .offer-listing-body{padding:clamp(28px,4vw,44px) 0 8px} .reise-filter{position:sticky;top:var(--header-h,82px);z-index:20;background:#fdfcfa;border-bottom:1px solid var(--line)} .reise-filter-row{display:flex;align-items:center;gap:10px;padding:15px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .reise-filter-row::-webkit-scrollbar{display:none} .reise-filter-chip{flex:0 0 auto;background:#faf8f3;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 18px;font-family:var(--nav);font-size:13px;font-weight:600;letter-spacing:.01em;color:#3a3833;cursor:pointer;transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)} .reise-filter-chip:hover{border-color:var(--gold)} .reise-filter-chip.is-active{background:var(--black);border-color:var(--black);color:var(--cream)} .reise-filter-count{flex:0 0 auto;margin-left:auto;font-family:var(--nav);font-size:12.5px;font-weight:600;color:var(--gold-d);padding-left:14px;white-space:nowrap} .reise-count-row{display:flex;justify-content:flex-end;padding:14px 0 0} .offer-grid{padding:clamp(28px,4vw,40px) 0 56px} .offer-empty{text-align:center;font-family:var(--serif);font-size:1.4rem;color:#5b574d;padding:60px 0} /* listing pagination — real crawlable /page/N/ links (KB §8.2): numbered , page-1 = clean base URL */ .dt-pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:clamp(34px,4vw,52px) 0 8px} .dt-pager-num{min-width:42px;height:42px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;background:#faf8f3;border:1px solid var(--line);border-radius:var(--r-pill);font-family:var(--nav);font-size:14px;font-weight:600;color:#3a3833;text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)} a.dt-pager-num:hover{border-color:var(--gold)} .dt-pager-num.is-active{background:var(--black);border-color:var(--black);color:var(--cream)} .dt-pager-gap{padding:0 3px;color:var(--gold-d);font-weight:700;letter-spacing:.06em} .dt-pager-arrow{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:#faf8f3;border:1px solid var(--line);border-radius:var(--r-pill);color:#3a3833;text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)} .dt-pager-arrow svg{width:18px;height:18px} a.dt-pager-arrow:hover{background:var(--black);border-color:var(--black);color:var(--cream)} .dt-pager-arrow.is-disabled{opacity:.32;cursor:default} /* Thema bar / sidebar chips are now real links */ a.reise-filter-chip{text-decoration:none} .theme-side a.reise-filter-chip{display:block} .offer-sidebar > nav + nav{margin-top:26px} .resto-side .resto-dim-h{margin-top:22px} .resto-side .resto-dim-h:first-of-type{margin-top:6px} .offer-empty .b-buchen{display:inline-block;margin-top:18px} /* ===== Detail: gallery ===== */ .offer-single .offer-bc{padding:18px 0 0} .offer-bc .offer-wrap{display:flex;flex-wrap:wrap;gap:7px;font-family:var(--nav);font-size:12.5px;color:#6b6660} .offer-bc a{color:#6b6660;transition:color .2s var(--ease)} .offer-bc a:hover{color:var(--gold-d)} .offer-bc em{font-style:normal;color:#3a3833} .reise-gallery{padding:18px 0 0} .reise-gallery-lead{position:relative;margin:0;border-radius:var(--r-img);overflow:hidden;aspect-ratio:16/9;background:#efece5;box-shadow:0 24px 60px -30px rgba(20,16,8,.4)} .reise-gallery-img{width:100%;height:100%;object-fit:cover;display:block} .reise-gallery-cap{position:absolute;left:16px;bottom:16px;background:rgba(12,12,12,.74);color:var(--gold);font-family:var(--nav);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:var(--r-pill)} .reise-gallery-strip{display:flex;gap:10px;margin-top:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .reise-gallery-strip::-webkit-scrollbar{display:none} .reise-gallery-thumb{flex:0 0 clamp(140px,22%,210px);aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;scroll-snap-align:start;background:#efece5} .reise-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)} .reise-gallery-thumb:hover img{transform:scale(1.05)} /* ===== Detail: spine (reuses rt-wrap) ===== */ /* Uniform vertical rhythm: the grid's top padding sets the gallery→content gap; sections all use the same 34px so nothing is "too far somewhere, too tight elsewhere". First block loses its top margin so it doesn't stack on top of the grid padding (that was the 82px gap under the hero image). */ .offer-wrap-grid{align-items:start;padding-top:clamp(34px,4.5vw,54px)} .offer-single .rt-main>:first-child{margin-top:0} /* Day-trip single: H1 + intro text band ABOVE the gallery image */ .offer-tophead{padding-top:clamp(4px,1vw,12px)} .offer-tophead .offer-head{max-width:880px;margin-bottom:clamp(16px,2.2vw,24px)} .offer-head{margin:0 0 30px} .offer-eyebrow{display:block;margin-bottom:12px} .offer-h1{font-family:var(--serif);font-weight:600;font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.01em;color:var(--black);margin:0 0 14px} .offer-value{font-family:var(--nav);font-size:var(--fs-lead);line-height:1.45;color:#3a3833;margin:0 0 18px;max-width:52ch} .offer-headprice{margin:0} .offer-headprice .offer-price-num{font-family:var(--serif);font-size:1.7rem;font-weight:700;color:var(--gold-d)} .offer-headprice .offer-price-incl{font-family:var(--nav);font-size:.82rem;font-weight:600;color:#8a8a8a} .offer-h2{font-size:var(--fs-h2c);margin:0 0 16px} .offer-incl-sec,.offer-facts-sec,.offer-faq-sec{margin:34px 0} .offer-incl{list-style:none;margin:0;padding:0;display:grid;gap:2px} .offer-incl li{display:flex;align-items:flex-start;gap:12px;font-family:var(--nav);font-size:15px;color:#2c2a26;padding:11px 0;border-bottom:1px solid var(--line)} .offer-incl-ico{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(201,168,76,.14);color:var(--gold-d);margin-top:1px} .offer-incl-ico svg{width:12px;height:12px} .offer-body{margin:34px 0} .offer-facts-grid{display:grid;grid-template-columns:1fr;gap:22px} .offer-facts{list-style:none;margin:0;padding:0;display:grid;gap:0} .offer-facts li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-family:var(--nav);font-size:14.5px;padding:11px 0;border-bottom:1px solid var(--line)} .offer-fact-k{color:#6b6660;letter-spacing:.01em} .offer-fact-v{color:var(--black);font-weight:600;text-align:right} .offer-map{margin:0;border-radius:var(--r-img);overflow:hidden;border:1px solid var(--line)} .offer-map img{width:100%;height:auto;display:block} .offer-passport{margin:18px 0 0;font-family:var(--nav);font-size:13.5px;color:#5b574d;background:#faf6ec;border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 16px} .offer-passport strong{color:var(--gold-d)} .offer-trust-light{list-style:none;margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 26px} .offer-trust-light li{display:flex;align-items:center;gap:9px;font-family:var(--nav);font-size:13px;color:#5b574d} .offer-related{padding:clamp(40px,6vw,68px) 0 clamp(46px,6vw,74px)} .offer-related .article-related-h{margin-bottom:26px} /* Bottom seam rule: the dark final CTA flows straight into the dark footer — tighten its bottom padding so the two dark blocks don't double-pad (same-bg adjacent seam, matching the generic .section rule). */ .offer-single .rt-cta.rt-contact .rt-cta-inner, .offer-listing .rt-cta.rt-contact .rt-cta-inner, .offer-hub .rt-cta.rt-contact .rt-cta-inner{padding-bottom:clamp(28px,4vw,50px)} /* ===== Anfrage booking box (evolves rt-book — LIGHT) ===== */ .offer-book .offer-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .offer-book .offer-price-big{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--black);line-height:1} .offer-fixed{font-family:var(--nav);font-size:11.5px;color:var(--gold-d);margin:4px 0 0;letter-spacing:.01em} .rt-book-form{margin-top:18px} .cf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0} .book-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .book-grid{min-width:0} .book-grid>.book-f{min-width:0} /* let 1fr tracks shrink — date/time inputs don't overflow into the next column (was the vertical line through GÄSTE/RÜCKFAHRT) */ .book-f{margin:0 0 13px;min-width:0} .book-f label{display:block;font-family:var(--nav);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b6660;margin:0 0 6px} .book-f input,.book-contact input,.book-contact textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box;font-family:var(--nav);font-size:14px;color:var(--black);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;transition:border-color .2s var(--ease)} .book-f input[type="number"]{-webkit-appearance:textfield;appearance:textfield} .book-f input[type="number"]::-webkit-inner-spin-button,.book-f input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} /* the homepage booking form (main.css) also styles .book-f with a ::after column divider that bled a vertical line through the GÄSTE/RÜCKFAHRT labels here — neutralise it inside the offer box */ .offer-book .book-f::after,.offer-book .book-f:not(:last-child)::after{content:none;display:none} .book-f input:focus,.book-contact input:focus,.book-contact textarea:focus{outline:none;border-color:var(--gold)} .book-seg{display:flex;gap:8px} .book-seg button{flex:1;font-family:var(--nav);font-size:12.5px;font-weight:600;color:#3a3833;background:#faf8f3;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 8px;cursor:pointer;line-height:1.25;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)} .book-seg button:hover{border-color:var(--gold)} .book-seg button.on{background:var(--black);border-color:var(--black);color:var(--cream)} .book-richtpreis{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:16px 0 4px;padding:14px 0 0;border-top:1px solid var(--line)} .book-rp-l{font-family:var(--nav);font-size:13px;color:#5b574d} .book-rp-l small{color:#7a756b;font-size:11px} .book-rp-v{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--black);white-space:nowrap} .book-contact{display:grid;gap:9px;margin:14px 0 0} .resto-book input[readonly]{background:#f6f4ee;color:#5b574d;cursor:default} .resto-book input[readonly]:focus{border-color:var(--line)} .offer-submit{display:block;width:100%;text-align:center;margin-top:16px;border:none;cursor:pointer} .rt-book-status{margin:12px 0 0;font-family:var(--nav);font-size:13px;line-height:1.5;padding:11px 13px;border-radius:var(--r-sm)} .rt-book-status.is-ok{background:#eef6ee;color:#2f6b34;border:1px solid #cfe6cf} .rt-book-status.is-err{background:#fcefef;color:#9a3b3b;border:1px solid #ecd2d2} .offer-book .rt-book-wa{margin-top:12px} /* ===== Restaurant Anfrage box — bright booking layout (.ob-*) ===== */ .ob-form{margin-top:18px} .ob-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px} .ob-row>*{min-width:0} /* click-to-open date / time field (transparent native input over a styled display) + Gäste */ .ob-field{position:relative;display:block;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:9px 13px 11px;cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)} .ob-field:hover{border-color:var(--gold)} .ob-field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.16)} .ob-field-l{display:block;font-family:var(--nav);font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#6b6660;margin:0 0 3px;pointer-events:none} .ob-field-v{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--black);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none} .ob-field-v.is-ph{color:#9a948a;font-style:italic;font-weight:500} .ob-field-in{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:transparent;opacity:0;cursor:pointer;font:inherit} .ob-field-in::-webkit-calendar-picker-indicator{opacity:0} .ob-field--num{cursor:text} .ob-field-num{display:block;width:100%;min-width:0;border:0;background:transparent;padding:0;margin:0;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--black);line-height:1.25;-webkit-appearance:textfield;appearance:textfield} .ob-field-num:focus{outline:none} .ob-field-num::-webkit-inner-spin-button,.ob-field-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .ob-hr{border:0;border-top:1px solid var(--line);margin:16px 0} /* A / B route points */ .ob-point{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:12px 14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)} .ob-point:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.16)} .ob-badge{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--nav);font-size:12px;font-weight:700;margin-top:1px} .ob-badge-a{background:var(--gold);color:#fff} .ob-badge-b{background:var(--black);color:var(--gold)} .ob-badge-stop{background:#efe9da;color:var(--gold-d);font-size:15px;line-height:1} .ob-point-body{flex:1;min-width:0} .ob-point-l{display:block;font-family:var(--nav);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6660;margin:0 0 3px} .ob-point-in{width:100%;min-width:0;box-sizing:border-box;border:0;background:transparent;padding:0;margin:0;font-family:var(--nav);font-size:14.5px;color:var(--black);line-height:1.3} .ob-point-in::placeholder{color:#9a948a} .ob-point-in:focus{outline:none} .resto-book .ob-point-in[readonly]{background:transparent;border:0;color:#2c2a26;font-weight:600;cursor:default} .ob-point--dest{background:#faf8f3} /* add-stop button + extra stop rows */ .ob-addstop{display:inline-flex;align-items:center;gap:9px;margin:11px 2px;padding:0;background:none;border:0;font-family:var(--nav);font-size:13.5px;font-weight:600;color:var(--gold-d);cursor:pointer;transition:color .2s var(--ease)} .ob-addstop:hover{color:var(--black)} .ob-addstop-i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold-d);font-size:16px;line-height:0;font-weight:400} .ob-addstop:hover .ob-addstop-i{border-color:var(--black);color:var(--black)} .ob-stops:not(:empty){margin-top:9px} .ob-point--stop .ob-point-body{display:flex;align-items:center;gap:8px} .ob-rmstop{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#8a857b;font-size:16px;line-height:0;cursor:pointer;transition:.18s} .ob-rmstop:hover{border-color:#b3382e;color:#b3382e} /* hinweise + reservation */ .ob-hinweise .ob-point-l,.ob-resv .ob-point-l{margin-bottom:7px} .ob-textarea{width:100%;box-sizing:border-box;font-family:var(--nav);font-size:14px;color:var(--black);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;resize:vertical;min-height:74px;line-height:1.5;transition:border-color .2s var(--ease)} .ob-textarea::placeholder{color:#9a948a} .ob-textarea:focus{outline:none;border-color:var(--gold)} .ob-resv{margin-bottom:2px} /* ===== Mobile fixed Anfrage bar ===== */ .reise-mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:14px;padding:11px clamp(16px,5vw,24px);background:var(--cream);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(20,16,8,.5);transform:translateY(110%);transition:transform .4s var(--ease)} .reise-mbar.is-shown{transform:translateY(0)} .reise-mbar-price{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--black)} .reise-mbar-btn{flex:0 0 auto} /* ===== Responsive ===== */ @media(max-width:820px){ .offer-facts-grid{grid-template-columns:1fr} .offer-h1{font-size:clamp(28px,7vw,40px)} .reise-mbar{display:flex} } @media(max-width:560px){ .book-grid{grid-template-columns:1fr} .reise-gallery-lead{aspect-ratio:4/3} } /* ============================================================================ * RESTAURANT PAGE (single-reise_offer-restaurant.php) — bright, open, TripAdvisor-friendly. * White/cream surfaces only (NO dark). Gold = accent, green = trust/checks/rating. * ========================================================================== */ .rsto-single{--rsto-green:#1f7a4d;--rsto-green-bg:#eaf5ef;background:#fff;padding-bottom:10px} .rsto-wrap{width:min(1080px,calc(100% - 2*var(--gutter)));margin-inline:auto} .rsto-bc{display:flex;flex-wrap:wrap;gap:7px;font-family:var(--nav);font-size:12.5px;color:#6b6660;padding:18px 0 4px} .rsto-bc a{color:#6b6660;transition:color .2s var(--ease)} .rsto-bc a:hover{color:var(--gold-d)} .rsto-bc em{font-style:normal;color:#3a3833} .rsto-back{display:inline-block;font-family:var(--nav);font-size:13px;font-weight:600;color:var(--gold-d);margin-bottom:6px} /* top head: H1 "Transfer nach ..." (above the gallery) */ .rsto-tophead{margin:8px 0 14px} .rsto-h1{font-family:var(--serif);font-weight:600;font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.01em;color:var(--black);margin:0 0 12px} .rsto-tophead .rsto-sub{font-family:var(--nav);font-size:clamp(16px,1.6vw,18px);color:#3a3833;margin:0 0 7px;max-width:60ch} .rsto-tophead .rsto-micro{font-family:var(--nav);font-size:13px;color:#6b6660;margin:0} /* ── Restaurant conversion upgrades (2026-07-02): hero price+CTA, trust bar, glance facts ── */ .rsto-hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:18px} .rsto-hero-price{font-family:var(--serif);font-size:clamp(21px,2.4vw,25px);font-weight:600;color:var(--black);letter-spacing:.2px;line-height:1} .rsto-hero-price-incl{font-family:var(--nav);font-size:13px;font-weight:500;color:#6b6660;letter-spacing:.3px;white-space:nowrap} .rsto-hero-btn{flex:0 0 auto} .rsto-trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0 22px} .rsto-trustbar-row{list-style:none;margin:0;padding:13px 0;display:flex;flex-wrap:wrap;gap:9px 30px} .rsto-trust-i{display:flex;align-items:center;gap:9px;font-family:var(--nav);font-size:13.5px;font-weight:500;color:#4a4740;letter-spacing:.2px} .rsto-trust-i .offer-incl-ico{margin-top:0} .rsto-glance-facts{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;margin:0 0 15px} .rsto-glance-price{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--black);line-height:1} .rsto-glance-price small{font-family:var(--nav);font-size:12.5px;font-weight:500;color:#6b6660} .rsto-glance-dur{font-family:var(--nav);font-size:13px;color:#4a4740} .rsto-glance-facts .rsto-fdiv{width:1px;height:15px;background:var(--line)} .rsto-noprov{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);background:rgba(201,168,76,.15);color:var(--gold-d);font-family:var(--nav);font-size:11.5px;font-weight:600;letter-spacing:.4px} .rsto-noprov svg{width:13px;height:13px} /* ── Transport-price clarity (2026-07-02): "this is the RIDE price, meal paid at the restaurant" ── */ .rsto-hero-price-wrap{margin-top:22px} .rsto-hero-kicker{display:block;font-family:var(--nav);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px} .rsto-hero-price-wrap .rsto-hero-cta{margin-top:0} .rsto-hero-excl{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-family:var(--nav);font-size:12.5px;font-weight:500;color:#6b6660;letter-spacing:.2px;line-height:1.4} .rsto-info-ico{flex:0 0 auto;width:14px;height:14px;margin-top:1px;color:var(--gold-d)} .rsto-glance-excl{display:flex;align-items:flex-start;gap:7px;margin:10px 0 0;font-family:var(--nav);font-size:12px;font-weight:500;color:#6b6660;line-height:1.4} .rsto-glance-excl .rsto-info-ico{width:13px;height:13px} .rsto-combined-note{font-family:var(--nav);font-size:14px;line-height:1.6;color:#4a4740;margin:0 0 18px;max-width:62ch} .rt-book-kicker{display:block;font-family:var(--nav);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-d);margin-bottom:5px} .offer-excl{font-family:var(--nav);font-size:11.5px;font-weight:500;color:#6b6660;margin:6px 0 0;line-height:1.4} .reise-mbar-kick{display:block;font-family:var(--nav);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);line-height:1;margin-bottom:3px} @media(max-width:560px){.rsto-hero-cta{gap:16px 16px}.rsto-hero-btn{flex:1 1 100%}} /* sticky content nav (in-page menu, anchor scroll) — border/bg live on the inner .rsto-wrap row so they stop at the section width, not the viewport edge */ .rsto-cnav{position:sticky;top:var(--header-h,82px);z-index:30;margin:0 0 26px} .rsto-cnav-row{display:flex;align-items:center;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .rsto-cnav-row::-webkit-scrollbar{display:none} .rsto-cnav-link{flex:0 0 auto;position:relative;font-family:var(--nav);font-size:14px;font-weight:600;color:#5b574d;padding:15px 14px;white-space:nowrap;transition:color .2s var(--ease)} .rsto-cnav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)} .rsto-cnav-link:hover{color:var(--black)} .rsto-cnav-link.is-active{color:var(--black)} .rsto-cnav-link.is-active::after{transform:scaleX(1)} .rsto-cnav-book{flex:0 0 auto;margin-left:auto;padding:9px 22px;font-size:12px} .rsto-anchor{scroll-margin-top:calc(var(--header-h,82px) + 62px)} .rsto-single .rt-book{top:calc(var(--header-h,82px) + 66px)} /* clear the sticky content nav */ .rsto-anchor:not(:first-child){margin-top:34px} /* gallery */ .rsto-gallery{display:grid;gap:8px;border-radius:var(--r-img);overflow:hidden;margin:6px 0 2px;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,clamp(132px,17vw,210px))} .rsto-gallery .rg-cell{margin:0;background:#efece5;overflow:hidden} .rsto-gallery .rg-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)} .rsto-gallery .rg-cell:hover img{transform:scale(1.05)} .rsto-gallery .rg-main{grid-row:1/3} /* 1 big (spans both rows) + 2 small */ .rsto-gallery--1{grid-template-columns:1fr;grid-template-rows:clamp(260px,42vw,440px)} .rsto-gallery--1 .rg-main{grid-row:auto} .rsto-gallery--2{grid-template-columns:2fr 1fr;grid-template-rows:clamp(240px,34vw,400px)} .rsto-gallery--2 .rg-main{grid-row:auto} .rsto-gallery-ph{height:clamp(220px,30vw,320px);border-radius:var(--r-img);margin:8px 0 2px;display:grid;place-items:center;background:linear-gradient(135deg,#f3eee2,#e7ddc7)} .rsto-gallery-ph span{font-family:var(--serif);font-size:clamp(26px,4vw,42px);color:var(--gold-d);font-weight:600} /* two-column spine */ .rsto-cols{display:grid;grid-template-columns:minmax(0,1.7fr) 1fr;gap:clamp(28px,4vw,44px);align-items:start;padding:26px 0 56px} .rsto-main{min-width:0} .rsto-head{margin:6px 0 0} .rsto-title{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,42px);line-height:1.12;letter-spacing:-.01em;color:var(--black);margin:0 0 10px} .rsto-sub{font-family:var(--nav);font-size:clamp(16px,1.6vw,18px);color:#3a3833;margin:0 0 6px} .rsto-micro{font-family:var(--nav);font-size:13px;color:#6b6660;margin:0} /* at a glance */ .rsto-glance{display:flex;flex-wrap:wrap;align-items:center;gap:9px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:14px 18px;margin:18px 0 4px;font-family:var(--nav);font-size:13.5px;color:#3a3833} .rg-it{display:inline-flex;align-items:center;gap:6px} .rg-stars{color:var(--gold);letter-spacing:1px} .rg-it b{font-weight:700;color:var(--black)} .rg-mut{color:#6b6660} .rg-badge{display:inline-flex;align-items:center;gap:6px;background:var(--rsto-green-bg);color:var(--rsto-green);font-weight:700;font-size:12px;padding:5px 12px;border-radius:var(--r-pill)} .rg-badge svg{width:12px;height:12px} /* "Auf einen Blick" live card */ .rsto-ataglance{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px;margin:0 0 4px} .rsto-glance-h2{margin:0 0 14px} .rsto-booking-note{display:flex;align-items:flex-start;gap:9px;margin:15px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font-family:var(--nav);font-size:13.5px;line-height:1.55;color:#3a3833} .rsto-bn-ico{flex:0 0 auto;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--rsto-green-bg);color:var(--rsto-green);margin-top:1px} .rsto-bn-ico svg{width:11px;height:11px} .rsto-status-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px} .rsto-status{display:inline-flex;align-items:center;gap:10px;font-family:var(--nav);font-size:16px;font-weight:700;margin:0} .rsto-hours-toggle{background:none;border:0;padding:0;cursor:pointer;font-family:var(--nav);font-size:14px;color:#6b6660;text-decoration:underline;text-underline-offset:3px;text-decoration-color:currentColor;transition:color .2s var(--ease)} .rsto-hours-toggle:hover{color:var(--gold-d);text-decoration-color:var(--gold)} .rsto-hours-toggle.is-open{color:var(--black)} .rsto-hours-week{list-style:none;margin:8px 0 14px;padding:13px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 9px 24px -15px rgba(20,16,8,.32);display:grid;gap:5px;max-width:340px} .rsto-hours-week[hidden]{display:none} /* collapsed by default; opens on "Alle Öffnungszeiten" click */ .rsto-hours-week li{display:flex;justify-content:space-between;gap:24px;font-family:var(--nav);font-size:13.5px;color:#5b574d} .rsto-hours-week li.is-today{font-weight:700;color:var(--black)} .rsto-hours-week li.is-closed .rhw-time{color:#7d7870} .rsto-addr{display:inline-flex;align-items:center;gap:8px;font-family:var(--nav);font-size:15px;color:#2c2a26;margin:0 0 13px;transition:color .2s var(--ease)} .rsto-addr span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:currentColor} .rsto-addr:hover{color:var(--gold-d)} .rsto-addr:hover span{text-decoration-color:var(--gold)} .rsto-status-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto} .rsto-status--open{color:#1f7a4d} .rsto-status--open .rsto-status-dot{background:#1f7a4d;animation:rstoPulse 2.4s var(--ease) infinite} .rsto-status--soon{color:#bf7d18} .rsto-status--soon .rsto-status-dot{background:#e0901c;box-shadow:0 0 0 4px rgba(224,144,28,.16)} .rsto-status--closed{color:#b3382e} .rsto-status--closed .rsto-status-dot{background:#cf3b2e;box-shadow:0 0 0 4px rgba(207,59,46,.13)} @keyframes rstoPulse{0%,100%{box-shadow:0 0 0 4px rgba(31,122,77,.16)}50%{box-shadow:0 0 0 8px rgba(31,122,77,.04)}} .rsto-contacts{display:flex;flex-wrap:wrap;gap:11px 26px} .rsto-contact{display:inline-flex;align-items:center;gap:8px;font-family:var(--nav);font-size:14.5px;color:#2c2a26;transition:color .2s var(--ease)} .rsto-contact span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:currentColor} .rsto-contact:hover{color:var(--gold-d)} .rsto-contact:hover span{text-decoration-color:var(--gold)} .rc-ico{width:17px;height:17px;color:#6b6660;flex:0 0 auto;transition:color .2s var(--ease)} .rsto-contact:hover .rc-ico{color:var(--gold-d)} @media(prefers-reduced-motion:reduce){.rsto-status--open .rsto-status-dot{animation:none;box-shadow:0 0 0 4px rgba(31,122,77,.16)}} /* blocks */ .rsto-block{margin:30px 0} .rsto-h-ey{font-family:var(--nav);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);font-weight:700;margin:0 0 14px} .rsto-h-serif{font-family:var(--serif);font-size:var(--fs-h2c);font-weight:600;color:var(--black);margin:0 0 12px} /* problem — LIGHT warm callout (not dark) */ .rsto-problem{background:#fff;border:1px solid var(--line);border-radius:var(--r-img);box-shadow:0 10px 30px -18px rgba(20,16,8,.3);padding:24px 26px;margin:28px 0} .rsto-problem p{font-family:var(--nav);font-size:15px;color:#3a3833;margin:0 0 8px} .rsto-problem ul{margin:10px 0;padding-left:20px} .rsto-problem li{font-family:var(--nav);font-size:14.5px;color:#5b574d;margin:6px 0} .rsto-punch{font-family:var(--serif);font-size:clamp(18px,2vw,21px);color:var(--black);margin-top:14px!important;line-height:1.35} .rsto-punch strong{color:var(--gold-d);display:block} /* combined / inklusive (green checks) */ .rsto-incl{list-style:none;margin:0;padding:0;display:grid;gap:2px} .rsto-incl li{display:flex;align-items:flex-start;gap:11px;font-family:var(--nav);font-size:15px;color:#2c2a26;padding:10px 0;border-bottom:1px solid var(--line)} .rsto-incl-ck{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--rsto-green-bg);color:var(--rsto-green);margin-top:1px} .rsto-incl-ck svg{width:12px;height:12px} .rsto-tagline{font-family:var(--serif);font-size:clamp(18px,2vw,21px);color:var(--black);margin-top:16px} /* perfect for — clean typographic list (no boxes; boxes read like empty input fields) */ .rsto-perfect{display:grid;grid-template-columns:1fr 1fr;gap:14px 44px;margin-top:4px} .rsto-p{display:flex;align-items:flex-start;gap:12px;font-family:var(--nav);font-size:15px;line-height:1.5;color:#3a3833} .rsto-p::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:8px;background:var(--gold);transform:rotate(45deg)} /* how it works */ .rsto-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .rsto-steps li{display:flex;flex-direction:column;gap:3px;font-family:var(--nav);font-size:13.5px;color:#5b574d} .rsto-step-n{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--gold);line-height:1} .rsto-steps strong{color:var(--black);font-weight:600;font-size:14px} /* about + good to know */ .rsto-about-txt{font-family:var(--nav);font-size:15px;line-height:1.7;color:#3a3833;margin:0 0 18px} .rsto-infogrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:6px} .rg-fact{border-bottom:1px solid var(--line);padding-bottom:10px} .rg-fk{font-family:var(--nav);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6660;font-weight:700} .rg-fv{font-family:var(--nav);font-size:14px;color:#2c2a26;margin-top:2px} .rsto-map{display:inline-block;margin-top:16px;font-family:var(--nav);font-size:13.5px;font-weight:600;color:var(--gold-d)} /* reviews */ .rsto-rev{margin:0 0 11px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px} .rsto-rev-stars{color:var(--gold);font-size:13px;letter-spacing:1px;margin-bottom:6px} .rsto-rev blockquote{margin:0 0 7px;font-family:var(--nav);font-size:14.5px;line-height:1.6;color:#3a3833} .rsto-rev figcaption{font-family:var(--nav);font-size:12.5px;font-weight:700;color:#6b6660} /* final CTA — cream */ .rsto-finalcta{background:#f4f1ea;border-radius:var(--r-img);padding:30px 28px;text-align:center;margin:32px 0 0} .rsto-finalcta h2{font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);font-weight:600;color:var(--black);margin:0 0 10px} .rsto-finalcta p{font-family:var(--nav);font-size:15px;color:#5b574d;max-width:540px;margin:0 auto 18px} .rsto-related{padding:clamp(34px,5vw,56px) 0 8px} .rsto-related .article-related-h{margin-bottom:24px} @media(max-width:860px){ .rsto-cols{grid-template-columns:1fr} .rsto-aside{order:-1} /* no-JS fallback: booking box above the fold */ /* JS moves the Anfrage form to right AFTER the "Auf einen Blick" box (#ueberblick) on mobile; when it lives inside .rsto-main it needs in-flow breathing room. */ .rsto-main>.rsto-aside{margin:34px 0} .rsto-gallery{grid-template-columns:1fr 1fr;grid-template-rows:140px 140px} .rsto-gallery .rg-main{grid-column:1/3;grid-row:auto} .rsto-steps{grid-template-columns:1fr 1fr} .rsto-perfect,.rsto-infogrid{grid-template-columns:1fr} } /* ===== Korean legibility (inherits site html[lang^=ko] rules) ===== */ html[lang^="ko"] .book-f label{letter-spacing:.06em} html[lang^="ko"] .reise-filter-chip,html[lang^="ko"] .book-seg button{word-break:keep-all} /* ===== Hub redesign: weather widget + featured + seasonal ===== */ .reise-weather .sw-multi-weather{padding:0;background:transparent} .sw-multi-weather-inner{border:1px solid var(--line);border-radius:var(--r-img);padding:32px 20px;display:flex;justify-content:space-around;align-items:flex-start;gap:16px;flex-wrap:wrap;background:#fff} .sw-multi-city{text-align:center;flex:1;min-width:120px} .sw-multi-city-name{font-family:var(--nav);font-size:.82rem;color:#3a3835;font-weight:600;margin-bottom:12px;letter-spacing:.04em} .sw-multi-city-icon{font-size:2rem;line-height:1;margin-bottom:10px;min-height:36px} .sw-multi-city-temp{font-family:var(--serif);font-size:1.7rem;font-weight:400;color:var(--black);margin-bottom:4px} .sw-multi-city-desc{font-family:var(--nav);font-size:.7rem;color:#7a7570} .sw-multi-weather-loading{text-align:center;padding:40px;font-family:var(--nav);font-size:.85rem;color:#7a7570;width:100%} @media(max-width:768px){.sw-multi-city{min-width:45%}} @media(max-width:480px){.sw-multi-city{min-width:100%}} .reise-featured>p{margin:0 0 26px;font-family:var(--nav);color:#5b574d} .reise-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .feat-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden;background:#fff;transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .feat-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -32px rgba(20,16,8,.4)} .feat-card-img{display:block;aspect-ratio:16/10;background:linear-gradient(135deg,#1a1814,#3a352b);background-size:cover;background-position:center} .feat-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px} .feat-card-reg{font-family:var(--nav);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d)} .feat-card-h{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--black);line-height:1.2} .feat-card-price{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--black);margin-top:2px} .feat-card-price small{font-family:var(--nav);font-size:11px;font-weight:600;color:#8a857b} .reise-all-link{display:inline-block;margin-top:26px;font-family:var(--nav);font-size:14px;font-weight:600;color:var(--gold-d);border-bottom:1px solid currentColor;padding-bottom:2px} .reise-all-link:hover{color:var(--black)} @media(max-width:900px){.reise-feat-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.reise-feat-grid{grid-template-columns:1fr}} .reise-season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .season-card{position:relative;margin:0;aspect-ratio:3/4;border-radius:var(--r-img);overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end} .season-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(12,10,8,.82),rgba(12,10,8,.04) 58%)} .season-card figcaption{position:relative;z-index:1;padding:20px 18px} .season-name{display:block;font-family:var(--serif);font-size:1.4rem;font-weight:600;color:#fff;margin-bottom:6px} .season-blurb{display:block;font-family:var(--nav);font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.86)} @media(max-width:900px){.reise-season-grid{grid-template-columns:1fr 1fr}} @media(max-width:480px){.reise-season-grid{grid-template-columns:1fr}} /* ===== Day-trips: Dauer top bar + Thema sidebar (catalog/GetYourGuide-style) ===== */ .offer-layout--sidebar{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,3vw,52px);align-items:start} .offer-sidebar{position:sticky;top:calc(var(--header-h,82px) + 66px)} .theme-side{position:static;display:flex;flex-direction:column;gap:4px;border:0;background:transparent;padding:0} .theme-side-h{display:block;font-family:var(--nav);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b6660;margin:0 0 12px;padding-bottom:11px;border-bottom:1px solid var(--line)} .theme-side .reise-filter-chip{width:100%;text-align:left;border:0;border-radius:var(--r-sm);padding:9px 14px;background:transparent;font-family:var(--nav);font-size:14px;font-weight:600;color:#3a3833} .theme-side .reise-filter-chip:hover{background:#f3f0e9} .theme-side .reise-filter-chip.is-active{background:var(--black);color:var(--cream)} @media(max-width:900px){ .offer-layout--sidebar{grid-template-columns:minmax(0,1fr);gap:18px} .offer-sidebar{position:static;min-width:0} .theme-side{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;-webkit-overflow-scrolling:touch} .theme-side-h{display:none} .theme-side .reise-filter-chip{width:auto;white-space:nowrap;flex:0 0 auto;border:1px solid var(--line);background:#fff} .theme-side .reise-filter-chip.is-active{border-color:var(--black)} } /* horizontal scroll hints — double-ended arrow (↔) that slides left-right; adapts to the section colour */ .rhh-a{display:inline-flex;align-items:center;border-radius:var(--r-pill);animation:rhh-swipe 1.5s ease-in-out infinite} .rhh-a svg{display:block} @keyframes rhh-swipe{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}} @media(prefers-reduced-motion:reduce){.rhh-a{animation:none}} /* A) filter chip bars — arrow line BELOW the bar, right-aligned, gold on light */ .reise-hscroll{position:relative} .reise-hscroll-hint{display:none} .reise-hscroll.is-scrollable .reise-hscroll-hint{display:flex;justify-content:flex-end;align-items:center;margin-top:8px;padding-right:2px;pointer-events:none} .reise-hscroll-hint .rhh-a{padding:5px 13px;background:rgba(201,168,76,.13);color:var(--gold-d)} .reise-hscroll-hint svg{width:52px;height:13px} @media(min-width:901px){.reise-hscroll-hint{display:none!important}} /* ── Offer hero enhancements (research 2026-06-30): trust line, hero CTA, gallery lightbox ── */ .offer-trustline{font-family:var(--nav);font-size:.8rem;font-weight:600;letter-spacing:.04em;color:#6b6660;margin:14px 0 0} .offer-hero-cta{display:inline-flex;margin-top:20px} /* gallery lead + thumbs are