/* ========================================================================== Jürgens Ski & Snowboardstation — Stylesheet Konzept: "Die Pistenlinie" — die rote Pistenmarkierung als durchgängiges Gestaltungselement. Schwarz = Nacht/Silhouette, Rot = Piste, Eisblau = Akzent. Schriften werden im HTML- geladen (preconnect), nicht per @import, damit sie nicht render-blocking sind. ========================================================================== */ :root{ --ink: #14171b; --ink-2: #1e2227; --ink-line: #2c3138; --snow: #f6f8fa; --paper: #ffffff; --red: #d81e2c; --red-deep: #931019; --ice: #a9c9da; --graphite: #4b535c; --line: #e3e7ea; --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius: 14px; --container: 1120px; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body{ margin:0; font-family: var(--font-body); color: var(--ink); background: var(--snow); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; margin: 0 0 0.5em; } h1{ font-size: clamp(2.2rem, 6vw, 4rem); } h2{ font-size: clamp(1.6rem, 4.2vw, 2.6rem); } h3{ font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 700; } p{ margin: 0 0 1em; color: var(--graphite); } a{ color: var(--red); text-decoration: none; } a:hover{ color: var(--red-deep); } img{ max-width: 100%; display: block; } :focus-visible{ outline: 3px solid var(--red); outline-offset: 3px; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; } .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:0.5em; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1rem; padding: 0.85em 1.5em; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; min-height: 48px; } .btn:hover{ transform: translateY(-2px); } .btn-primary{ background: var(--red); color: #fff; } .btn-primary:hover{ background: var(--red-deep); color:#fff; } .btn-ghost{ background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); } .btn-ghost:hover{ background: rgba(255,255,255,0.1); color:#fff; border-color:#fff; } .btn-outline{ background: transparent; color: var(--ink); border-color: var(--ink); } .btn-outline:hover{ background: var(--ink); color: #fff; } .btn-row{ display:flex; flex-wrap:wrap; gap: 0.85em; } /* ---------- Header / Nav ---------- */ .site-header{ position: sticky; top:0; z-index: 100; background: var(--paper); border-bottom: 3px solid var(--red); box-shadow: 0 2px 10px rgba(20,23,27,0.05); } .nav{ display:flex; align-items:center; justify-content:space-between; padding: 12px 0; } .brand{ display:flex; align-items:center; gap:12px; } .brand-chip{ display:flex; align-items:center; background: #fff; border-radius: 10px; border: 1px solid var(--line); padding: 6px 12px; } .brand-chip img{ height: 40px; width:auto; display:block; } @media (max-width: 400px){ .brand-chip img{ height: 34px; } } .nav-toggle{ display:none; background:none; border:none; color: var(--ink); width:48px; height:48px; padding:0; cursor:pointer; position:relative; } .nav-toggle .bar{ position:absolute; left:12px; right:12px; height:3px; background: var(--ink); border-radius:2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle .bar:nth-child(1){ top:16px; } .nav-toggle .bar:nth-child(2){ top:23px; } .nav-toggle .bar:nth-child(3){ top:30px; } .nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .nav-menu{ display:flex; align-items:center; gap: 28px; margin:0; padding:0; list-style:none; } .nav-menu a{ color: var(--graphite); font-family: var(--font-display); font-weight:700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.95rem; padding: 8px 2px; position:relative; } .nav-menu a:hover, .nav-menu a[aria-current="page"]{ color: var(--ink); } .nav-menu a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background: var(--red); border-radius: 2px; } .nav-contact{ display:flex; align-items:center; gap:14px; } .lang-switch{ display:flex; align-items:center; gap:6px; font-family: var(--font-display); font-weight:700; font-size:0.78rem; letter-spacing:0.03em; } .lang-switch .lang-current{ color: var(--ink); text-decoration:underline; text-underline-offset:3px; } .lang-switch a.lang-link{ color: var(--graphite); } .lang-switch a.lang-link:hover{ color: var(--red-deep); } .nav-call{ display:inline-flex; align-items:center; gap:8px; background: var(--red); color:#fff; padding: 10px 18px; border-radius: 999px; font-family: var(--font-display); font-weight:700; letter-spacing:0.03em; text-transform:uppercase; font-size:0.9rem; min-height:44px; } .nav-call:hover{ background: var(--red-deep); color:#fff; } .icon-btn{ width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; border: 2px solid var(--ink); color: var(--ink); } .icon-btn:hover{ background: var(--ink); color:#fff; } .icon-btn svg{ width:20px; height:20px; } @media (max-width: 860px){ .nav{ position:relative; } .brand{ margin: 0 auto; } .nav-toggle{ display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); } .nav-menu{ position: fixed; inset: 68px 0 0 0; background: var(--paper); flex-direction: column; align-items: stretch; gap:0; padding: 12px 20px 28px; overflow-y:auto; transform: translateY(-8px); opacity:0; pointer-events:none; transition: opacity 0.18s ease, transform 0.18s ease; } .nav-menu.is-open{ opacity:1; transform:none; pointer-events:auto; } .nav-menu li{ border-bottom: 1px solid var(--line); } .nav-menu a:not(.nav-call):not(.icon-btn):not(.lang-link){ display:block; padding: 18px 4px; font-size: 1.15rem; } .lang-switch{ padding: 14px 4px; border-bottom: 1px solid var(--line); font-size:0.95rem; gap:10px; } .nav-contact{ flex-direction:column; align-items:stretch; margin-top: 18px; gap:12px; } .nav-contact .nav-call{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:16px 18px; font-size:1rem; border-radius:999px; } .nav-contact .icon-btn{ display:flex; align-items:center; justify-content:center; align-self:center; width:56px; height:56px; padding:0; border-radius:50%; } .nav-contact .icon-btn svg{ width:24px; height:24px; } } /* ---------- Piste line signature element ---------- */ .piste-divider{ position: relative; height: 46px; overflow:hidden; background: var(--ink); } .piste-divider svg{ position:absolute; inset:0; width:100%; height:100%; } .piste-divider.on-snow{ background: var(--snow); } .piste-divider.flip svg{ transform: scaleY(-1); } .piste-underline{ position: relative; display:inline-block; } .piste-underline::after{ content:""; display:block; height:5px; margin-top:6px; background: repeating-linear-gradient(100deg, var(--red) 0 22px, transparent 22px 30px); border-radius: 3px; max-width: 220px; } /* ---------- Hero ---------- */ /* ---------- Full-width hero photo banner ---------- */ .hero-banner{ position:relative; width:100%; overflow:hidden; background: var(--ink); min-height: clamp(460px, 66vw, 620px); display:flex; flex-direction:column; justify-content:flex-end; } .hero-banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .hero-banner-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(20,23,27,0.05) 0%, rgba(20,23,27,0.2) 40%, rgba(20,23,27,0.92) 100%); } .hero-banner-content{ position:relative; z-index:2; width:100%; box-sizing:border-box; max-width: var(--container); margin: 0 auto; padding: 90px 20px 32px; } .hero-banner-content .eyebrow{ color: #ffd7d3; } .hero-banner-content .eyebrow::before{ background: var(--red); } .hero-banner-content h1{ color:#fff; max-width: 20ch; margin-bottom: 0.35em; } .hero-banner-content .lead{ color: #e7eaed; max-width: 46ch; } @media (min-width: 640px){ .hero-banner-content{ padding: 120px 20px 52px; } } @media (max-width: 480px){ .hero-banner{ min-height: clamp(520px, 145vw, 640px); } .hero-banner-content h1{ font-size: clamp(1.7rem, 8vw, 2.2rem); max-width: none; } } .hero{ background: radial-gradient(1100px 460px at 12% -10%, rgba(216,30,44,0.07), transparent 60%), var(--paper); border-bottom: 1px solid var(--line); position: relative; overflow:hidden; } .hero-inner{ padding: 48px 0 40px; position:relative; z-index:2; display:flex; flex-direction:column; gap:32px; align-items:center; } @media (min-width: 860px){ .hero-inner{ flex-direction:row; align-items:center; padding:64px 0 56px; gap:48px; } } .hero-art{ position:relative; width:100%; max-width:480px; border-radius:20px; overflow:hidden; aspect-ratio: 6/5; background: linear-gradient(180deg, #0d0f12 0%, #1c2027 55%, #2a1113 100%); box-shadow: 0 30px 60px -28px rgba(0,0,0,0.65); flex-shrink:0; } @media (min-width: 860px){ .hero-art{ flex: 0 0 42%; max-width:none; } } .hero-art-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; } .hero-art::after{ content:""; position:absolute; z-index:2; left:50%; bottom:6%; width:72%; padding-top:60%; transform: translate(-50%, 10%); background: radial-gradient(circle, rgba(169,201,218,0.32), transparent 70%); filter: blur(4px); pointer-events:none; } .hero-skier{ position:absolute; z-index:3; left:50%; bottom:6%; width:56%; transform: translateX(-50%); filter: drop-shadow(0 16px 18px rgba(0,0,0,0.55)); } .hero-snow{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; } .hero-text{ max-width:640px; } /* ---------- Price table (multi-day rental pricing) ---------- */ .price-table-wrap{ overflow-x:auto; border-radius: var(--radius); border:1px solid var(--line); background: var(--paper); margin-bottom: 26px; -webkit-overflow-scrolling:touch; } table.price-table{ border-collapse:collapse; width:100%; min-width: 640px; } .price-table caption{ text-align:left; font-family: var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:0.02em; font-size:1.05rem; padding: 16px 18px 4px; color: var(--ink); } .price-table th, .price-table td{ padding: 11px 14px; text-align:center; font-size:0.92rem; border-bottom:1px solid var(--line); white-space:nowrap; } .price-table thead th{ font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.03em; font-size:0.78rem; color: var(--graphite); border-bottom:2px solid var(--line); } .price-table td:first-child, .price-table th:first-child{ text-align:left; position:sticky; left:0; background: var(--paper); font-weight:600; white-space:normal; min-width: 160px; box-shadow: 2px 0 0 var(--line); } .price-table tbody tr:last-child td{ border-bottom:none; } .price-table tbody tr:hover td{ background: rgba(216,30,44,0.05); } .price-table tbody tr:hover td:first-child{ background: rgba(216,30,44,0.08); } .price-cards{ display:none; margin-bottom: 26px; } .price-cards-caption{ font-family: var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:0.02em; font-size:1.05rem; margin-bottom: 12px; color: var(--ink); } .price-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; margin-bottom: 12px; } .price-card h4{ margin:0 0 10px; font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; font-size:0.98rem; } .day-chips{ display:flex; flex-wrap:wrap; gap:8px; } .day-chip{ background: var(--snow); border:1px solid var(--line); border-radius:10px; padding: 6px 10px; min-width: 58px; text-align:center; } .day-chip .d{ display:block; font-family: var(--font-display); font-weight:700; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.03em; color: var(--graphite); } .day-chip .p{ display:block; font-weight:700; color: var(--red-deep); font-size:0.92rem; margin-top:1px; } @media (max-width: 700px){ .price-table-wrap{ display:none; } .price-cards{ display:block; } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; color: var(--red-deep); font-family: var(--font-display); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; font-size:0.85rem; margin-bottom: 14px; } .eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--red); display:inline-block; } .hero h1{ margin-bottom: 0.35em; } .hero .lead{ color: var(--graphite); font-size: 1.1rem; max-width: 46ch; } .hero-skyline{ position:absolute; left:0; right:0; bottom:-2px; width:100%; height:auto; z-index:1; opacity:0.9; } .page-hero{ background: var(--paper); border-bottom: 1px solid var(--line); padding: 46px 0 40px; } .page-hero .eyebrow{ margin-bottom: 10px; } .page-hero h1{ margin-bottom: 0.3em; } .page-hero p{ color: var(--graphite); max-width: 60ch; } /* ---------- Cards grid (home) ---------- */ .section{ padding: 64px 0; } .section-tight{ padding: 40px 0; } .section-head{ max-width: 640px; margin-bottom: 36px; } .section-head p{ font-size: 1.05rem; } .card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .card-grid{ grid-template-columns: 1fr; } } .card-grid-3{ grid-template-columns: repeat(3, 1fr); } .card-grid-2{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px){ .card-grid-3{ grid-template-columns: repeat(2, 1fr); } .card-grid-2{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .card-grid-3{ grid-template-columns: 1fr; } .card-grid-2{ grid-template-columns: 1fr; } } .service-card{ background: var(--paper); border-radius: var(--radius); padding: 26px 22px; border: 1px solid var(--line); display:flex; flex-direction:column; gap:10px; transition: transform 0.18s ease, box-shadow 0.18s ease; } .service-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(20,23,27,0.35); } .service-card .icon{ width:44px; height:44px; color: var(--red); } .service-card h3{ margin-bottom:2px; } .service-card p{ font-size:0.95rem; margin-bottom: 6px; } .service-card .go{ font-family: var(--font-display); font-weight:700; letter-spacing:0.03em; text-transform:uppercase; font-size:0.85rem; } /* ---------- Ticket / price card component ---------- */ .ticket-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } @media (max-width: 700px){ .ticket-grid{ grid-template-columns: 1fr; } } .ticket{ position:relative; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--line); display:flex; align-items:stretch; box-shadow: 0 10px 26px -20px rgba(20,23,27,0.4); } .ticket-main{ flex:1; padding: 20px 22px; } .ticket-main .group{ font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color: var(--graphite); font-size:0.8rem; margin-bottom:4px; } .ticket-main h3{ margin-bottom: 4px; } .ticket-main .note{ color: var(--graphite); font-size: 0.88rem; margin:0; } .ticket-stub{ position:relative; width: 108px; flex-shrink:0; background: var(--ink); color:#fff; border-radius: 0 var(--radius) var(--radius) 0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 10px 6px; } .ticket-stub::before{ content:""; position:absolute; left:-2px; top:50%; transform: translateY(-50%); width:16px; height:16px; background: var(--snow); border-radius:50%; box-shadow: -1px 0 0 var(--line); } .ticket-stub .price{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; line-height:1; } .ticket-stub .price sup{ font-size:0.9rem; font-weight:700; } .ticket-stub .unit{ font-size:0.68rem; color: var(--ice); text-transform:uppercase; letter-spacing:0.05em; margin-top:4px; text-align:center; } .ticket::after{ content:""; position:absolute; right:108px; top:8px; bottom:8px; width:0; border-left: 2px dashed var(--line); } .ticket.placeholder .ticket-stub{ background: var(--ink-2); } .ticket.placeholder .price{ opacity:0.55; } .tbd-flag{ display:inline-block; margin-top:10px; font-size:0.72rem; font-weight:700; color: var(--red-deep); background: rgba(216,30,44,0.1); padding: 3px 9px; border-radius: 999px; letter-spacing:0.02em; } /* ---------- Contact strip ---------- */ .contact-strip{ background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; } .contact-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items:start; } @media (max-width: 760px){ .contact-grid{ grid-template-columns: 1fr; } } .contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; } .contact-list li{ display:flex; align-items:center; gap:12px; font-size:1.05rem; } .contact-list svg{ width:22px; height:22px; color: var(--red); flex-shrink:0; } .contact-list a{ color: var(--ink); font-weight:600; } .contact-list a:hover{ color: var(--red-deep); } .hours-badge{ display:flex; align-items:center; gap:10px; background: var(--snow); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-size:0.92rem; margin-top: 4px; color: var(--ink); width:fit-content; } .hours-badge svg{ width:18px; height:18px; color: var(--red-deep); } .social-row{ display:flex; gap:12px; margin-top:18px; } .social-row a{ width:44px; height:44px; border-radius:50%; background: var(--snow); display:flex; align-items:center; justify-content:center; color: var(--ink); border: 1px solid var(--line); } .social-row a:hover{ background: var(--red); border-color: var(--red); color:#fff; } .review-link{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-weight:600; color: var(--ink); font-size:0.92rem; } .review-link svg{ width:18px; height:18px; color: var(--red); } .review-link:hover{ color: var(--red-deep); } .social-row svg{ width:20px; height:20px; } /* ---------- Partners ---------- */ .partners{ padding: 36px 0; background: var(--snow); } .partners .container{ display:flex; flex-wrap:wrap; align-items:center; gap: 28px; } .brand-row{ display:flex; flex-wrap:wrap; align-items:center; gap: 8px; } .brand-logo{ height: 24px; width:auto; display:block; } .brand-logo--wide{ height: 26px; } .brand-box{ display:flex; align-items:center; justify-content:center; height: 26px; width: 52px; flex-shrink:0; } .brand-box img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; } .brand-box--k2 img{ max-height:62%; max-width:62%; } @media (max-width: 560px){ .brand-row{ gap: 6px; } .brand-logo{ height: 18px; } .brand-logo--wide{ height: 20px; } .brand-box{ height: 20px; width: 42px; } } .partners .label{ font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color: var(--graphite); font-size:0.85rem; margin-right: 8px; } .partner-pill{ border:1px solid var(--line); background:#fff; border-radius:999px; padding: 8px 18px; font-weight:600; font-size:0.92rem; color: var(--ink); } .partner-pill:hover{ border-color: var(--red); color: var(--red-deep); } @media (max-width: 600px){ .partner-list{ flex-direction:column; align-items:flex-start; gap:10px; } .partner-pill{ width:100%; box-sizing:border-box; } } /* ---------- Footer ---------- */ .site-footer{ background: var(--snow); border-top: 1px solid var(--line); color: var(--graphite); padding: 40px 0 26px; } .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; margin-bottom: 26px; } @media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } } .footer-grid h4{ color: var(--ink); font-size:0.95rem; margin-bottom:12px; } .footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .footer-grid a{ color: var(--graphite); } .footer-grid a:hover{ color: var(--red-deep); } .footer-bottom{ border-top: 1px solid var(--line); padding-top: 18px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:0.85rem; color: var(--graphite); } /* ---------- Generic content (legal pages) ---------- */ .prose{ max-width: 780px; } .prose h2{ margin-top: 1.4em; font-size: 1.4rem; } .prose ul{ color: var(--graphite); } .fill-me{ background: rgba(216,30,44,0.08); border: 1px dashed var(--red); padding: 2px 8px; border-radius: 6px; color: var(--red-deep); font-weight:600; } /* ---------- Cookie / consent banner ---------- */ .cookie-banner{ position: fixed; left:20px; right:20px; bottom:20px; z-index: 300; max-width: 380px; background: var(--ink); border-radius: 14px; box-shadow: 0 20px 45px -15px rgba(0,0,0,0.45); padding: 22px 22px 20px; } .cookie-banner[hidden]{ display:none; } .cookie-banner-inner p{ color: #d7dade; font-size: 0.88rem; line-height:1.5; margin: 0 0 16px; } .cookie-banner-inner a{ color: #fff; text-decoration: underline; } .cookie-banner-actions{ display:flex; gap:10px; } .cookie-banner .btn{ flex:1; justify-content:center; padding: 0.65em 1em; font-size: 0.85rem; } @media (max-width: 480px){ .cookie-banner{ left:12px; right:12px; bottom:12px; max-width:none; padding: 20px 18px 18px; } } /* ---------- Tour / Ausfahrt cards ---------- */ .tour-grid{ display:flex; flex-direction:column; gap:26px; } .tour-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: 0 10px 26px -20px rgba(20,23,27,0.4); } .tour-head{ background: var(--ink); color:#fff; padding: 20px 22px; display:flex; align-items:center; gap:16px; } .tour-date{ background:#fff; color:var(--ink); border-radius:10px; padding:8px 14px; text-align:center; font-family: var(--font-display); line-height:1.05; flex-shrink:0; } .tour-date .day{ font-size:1.5rem; font-weight:800; display:block; } .tour-date .month{ font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--red-deep); display:block; } .tour-head h3{ margin:0; color:#fff; } .tour-head .sub{ color:var(--ice); font-size:0.85rem; margin-top:2px; } .tour-body{ padding: 22px; } .tour-meta{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; margin: 0 0 20px; padding:0; list-style:none; } @media (max-width: 560px){ .tour-meta{ grid-template-columns: 1fr; } } .tour-meta dt{ font-family: var(--font-display); font-weight:700; text-transform:uppercase; font-size:0.72rem; letter-spacing:0.04em; color: var(--graphite); margin:0; } .tour-meta dd{ margin: 2px 0 0; font-weight:600; } .tour-prices{ list-style:none; margin:0 0 16px; padding:0; border-top: 1px dashed var(--line); } .tour-prices li{ display:flex; justify-content:space-between; gap:12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size:0.95rem; } .tour-prices li span:last-child{ font-family: var(--font-display); font-weight:800; color: var(--red-deep); white-space:nowrap; } .tour-note{ font-size:0.82rem; color: var(--graphite); margin-bottom:18px; } [id]{ scroll-margin-top: 84px; }