/* Camplix · Site-wide custom styles (paired with Tailwind CDN) */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #2C2C2C; background: #F8F7F4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', system-ui, sans-serif; } /* Hide native autofill yellow */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; } /* Info-Tooltip an Formular-Labels: Details, die die Karte sonst zutexten. Anzeige per Hover/Fokus, auf Touch per Tap (.cx-tip-open aus camplix-intake.js). */ .cx-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border-radius: 9999px; background: #EDEAE5; color: #7A6C60; cursor: pointer; transition: background .15s, color .15s; } .cx-tip:hover, .cx-tip:focus-visible, .cx-tip.cx-tip-open { background: #2BA8A8; color: #fff; } /* Der Sprechblasen-Text hängt am WRAPPER (Feldbreite), nicht am kleinen Button. Dadurch kann er nie seitlich aus dem Bildschirm laufen, egal wie weit rechts der Info-Punkt sitzt. */ .cx-tip-wrap { position: relative; } .cx-tip-text { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: max-content; max-width: 100%; background: #2C2C2C; color: #fff; font-size: 0.75rem; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: normal; text-align: left; padding: 0.5rem 0.625rem; border-radius: 0.5rem; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; } .cx-tip:hover ~ .cx-tip-text, .cx-tip:focus-visible ~ .cx-tip-text, .cx-tip.cx-tip-open ~ .cx-tip-text { opacity: 1; visibility: visible; } /* Formular-Fehler (camplix-intake.js): markiertes Feld, Meldung, Sammelhinweis. Farben aus der Palette (terracotta #C17252) für ausreichenden Kontrast. */ .cx-invalid { border-color: #C17252 !important; background: #FDF7F4; scroll-margin-top: 160px; } fieldset.cx-invalid, [data-require-any].cx-invalid { border-left: 3px solid #C17252; padding-left: 0.75rem; background: transparent; } .cx-msg { color: #A85433; font-size: 0.75rem; font-weight: 600; margin-top: 0.375rem; } .cx-summary { border: 1px solid #C17252; background: #FDF7F4; color: #A85433; font-size: 0.8125rem; font-weight: 600; border-radius: 0.75rem; padding: 0.75rem 1rem; scroll-margin-top: 160px; } /* Bedingte Onboarding-Felder (Progressive Enhancement): Die Regel `html.cx-js [data-conditional]:not(.cx-open){display:none}` steht BEWUSST inline im (src/templates/_layout.js) und NICHT hier — sie ist verhaltens-kritisch und darf nie an einer veralteten CSS-Kopie im Browser- Cache scheitern. Ohne laufendes JS bleiben die Felder sichtbar. */ /* Smooth image scaling for listing cards */ .camplix-card-img { transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } .camplix-card:hover .camplix-card-img { transform: scale(1.06); } .camplix-card { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1); } .camplix-card:hover { transform: translateY(-2px); } /* CTA hover lift */ .cta-primary { transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 14px -2px rgba(43,168,168,0.35); } .cta-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px -5px rgba(43,168,168,0.30); background-color: #228F8F; } .cta-primary:active { transform: translateY(0); } /* Eyebrow label */ .eyebrow { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7A6C60; } /* Pulse ring for map placeholders */ @keyframes pulseRing { 0% { transform: scale(0.7); opacity: 1; } 80%, 100% { transform: scale(1.6); opacity: 0; } } .pulse-ring { animation: pulseRing 1.6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } /* Gallery thumbs */ .gallery-thumb { transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); } .gallery-thumb:hover { transform: scale(1.03); } /* Smooth focus ring for inputs */ .camplix-input { transition: border-color 200ms, box-shadow 200ms; } .camplix-input:focus { outline: none; border-color: #2BA8A8; box-shadow: 0 0 0 4px rgba(43,168,168,0.10); } /* Section dividers — subtle warm-tinted */ .section-divider { background: linear-gradient(to bottom, transparent, #F0EFEA, transparent); height: 1px; } /* Region chip */ .region-chip { transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1); } .region-chip[data-active="true"] { background: #2BA8A8; color: #fff; border-color: #2BA8A8; } .region-chip:hover:not([data-active="true"]) { border-color: #2BA8A8; color: #2BA8A8; } /* Sticky CTA bar on detail page */ @media (max-width: 1023px) { .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; /* above Leaflet panes (max 700) */ background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid #E5E7EB; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0)); box-shadow: 0 -8px 24px -8px rgba(0,0,0,0.10); } .pb-sticky-cta { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0)); } } /* Ensure UC privacy widget (shadow host) sits above all map / overlay content. The host itself is position:static so the z-index doesn't apply directly, but adding position:relative makes it stack-context-relevant. The shadow contents themselves get a high z-index via the injected style. */ #usercentrics-root { position: relative; z-index: 2147483647; } /* Mapbox GL's canvas + controls — keep below sticky CTA (z-index: 1000) */ .mapboxgl-map .mapboxgl-canvas-container, .mapboxgl-map .mapboxgl-control-container { z-index: 400; } /* Compare-bar shake (when max reached) */ @keyframes camplix-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .animate-shake { animation: camplix-shake 280ms ease-in-out; } /* ── Mobile filter drawer ─────────────────────────────────────── */ @media (max-width: 1023px) { .camplix-filter-form.is-drawer-open { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(100vw, 420px); max-width: 100vw; z-index: 50; margin: 0; border-radius: 0; overflow-y: auto; box-shadow: -16px 0 40px -10px rgba(0,0,0,0.20); animation: drawerSlideIn 280ms cubic-bezier(0.16, 1, 0.3, 1); padding-bottom: 6rem; /* room for apply button */ } } @keyframes drawerSlideIn { from { transform: translateX(100%); opacity: 0.7; } to { transform: translateX(0); opacity: 1; } } /* ── /spots/ layout — list / map view-mode ─────────────────────── */ .camplix-spots-section { max-width: 80rem; /* 1280px — Liste-mode default */ } .camplix-spots-section:has(.camplix-spots-layout[data-view="map"]) { max-width: 100rem; /* 1600px — Karte-mode dominant */ } .camplix-spots-layout { grid-template-columns: 1fr; } @media (min-width: 1024px) { .camplix-spots-layout[data-view="list"] { grid-template-columns: 260px 1fr; } /* Karte mode: filter (220px) | cards (compact 380px) | map (dominant flex) */ .camplix-spots-layout[data-view="map"] { grid-template-columns: 220px 380px 1fr; } } @media (min-width: 1440px) { .camplix-spots-layout[data-view="map"] { grid-template-columns: 240px 420px 1fr; } } /* In map view, spot cards become single-column compact list */ @media (min-width: 640px) { .camplix-spot-grid[data-view="map"] { grid-template-columns: 1fr !important; gap: 1rem !important; } } /* Mobile Karte mode: map comes first (after filter), full-height, cards below */ @media (max-width: 1023px) { .camplix-spots-layout[data-view="map"] > aside { order: 1; } .camplix-spots-layout[data-view="map"] > #spots-map-wrap { order: 2; position: relative !important; top: auto !important; height: 70vh !important; min-height: 460px !important; max-height: calc(100vh - 8rem); } .camplix-spots-layout[data-view="map"] > .camplix-spots-cards { order: 3; } } /* Active view button (Liste/Karte toggle) */ .js-view-btn[aria-selected="true"] { background: #2C2C2C; color: #fff; } /* Flash animation when a pin click scrolls to a card */ @keyframes camplix-flash { 0% { box-shadow: 0 0 0 0 rgba(43, 168, 168, 0); } 20% { box-shadow: 0 0 0 6px rgba(43, 168, 168, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(43, 168, 168, 0); } } .js-spot-card.is-flash > a { animation: camplix-flash 1.2s ease-out; border-radius: 1rem; } /* Prose for legal pages */ .legal-prose { color: rgba(44,44,44,0.78); line-height: 1.7; } .legal-prose h2 { font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: #2C2C2C; margin-top: 2rem; margin-bottom: 0.5rem; } .legal-prose h3 { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; color: #2C2C2C; margin-top: 1.5rem; margin-bottom: 0.25rem; } .legal-prose p { margin-bottom: 1rem; } .legal-prose a { color: #2BA8A8; } .legal-prose a:hover { text-decoration: underline; } .legal-prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; } .legal-prose ul li { margin-bottom: 0.25rem; } .legal-prose strong { color: #2C2C2C; } /* Hide print/dev artifacts */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ── Mapbox GL — Camplix-branded popup + controls ────────────────── */ /* Camplix pennant-logo pin (HTML marker) */ .camplix-pin-wrap { line-height: 0; cursor: pointer; } .camplix-mb-pin { position: relative; width: 28px; height: 56px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)); transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); transform-origin: bottom center; will-change: transform; } .camplix-mb-pin-lg { width: 36px; height: 72px; } .camplix-mb-pin-img { width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; } .camplix-pin-wrap:hover .camplix-mb-pin, .camplix-pin-wrap.is-highlighted .camplix-mb-pin { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 12px 20px rgba(43, 168, 168, 0.40)); } .camplix-pin-wrap.is-highlighted { z-index: 5; } /* map_only pins: muted grey (kein Betreiber-Kontakt) — SVG-Bild-Marker wird entsättigt statt neu eingefärbt; auf ~#A8A29E abgemildert. */ .camplix-pin-wrap.is-map-only .camplix-mb-pin-img { filter: grayscale(1) brightness(1.35) opacity(0.72); } .camplix-pin-wrap.is-map-only:hover .camplix-mb-pin, .camplix-pin-wrap.is-map-only.is-highlighted .camplix-mb-pin { filter: drop-shadow(0 12px 20px rgba(120, 113, 108, 0.35)); } /* Cluster marker — turquoise circle with count */ .camplix-cluster-marker { cursor: pointer; transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); } .camplix-cluster-marker:hover { transform: scale(1.08); } .camplix-cluster-inner { position: relative; border-radius: 9999px; background: #2BA8A8; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; box-shadow: 0 8px 20px -4px rgba(43, 168, 168, 0.45); border: 3px solid #fff; } .camplix-cluster-inner::before { content: ""; position: absolute; inset: -8px; border-radius: 9999px; background: rgba(43, 168, 168, 0.18); z-index: -1; } /* Popup container */ .mapboxgl-popup.camplix-popup .mapboxgl-popup-content { background: #fff; border-radius: 16px; padding: 0; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.18); border: 1px solid #F3F4F6; overflow: hidden; width: 240px; } .mapboxgl-popup.camplix-popup .mapboxgl-popup-tip { border-top-color: #fff; border-bottom-color: #fff; } .mapboxgl-popup.camplix-popup .mapboxgl-popup-close-button { color: #2C2C2C; font-size: 20px; padding: 4px 8px; font-weight: 300; border-top-right-radius: 16px; } .mapboxgl-popup.camplix-popup .mapboxgl-popup-close-button:hover { color: #2BA8A8; background: transparent; } /* Popup hero image */ .camplix-popup-img { width: 100%; height: 130px; background-size: cover; background-position: center; background-color: #F3F4F6; transition: filter 300ms ease-out; } .camplix-popup-link:hover .camplix-popup-img { filter: brightness(1.04); } /* Navigation control restyle */ .mapboxgl-ctrl-group { background: #fff !important; border: none !important; border-radius: 10px !important; box-shadow: 0 4px 12px -2px rgba(0,0,0,0.08) !important; overflow: hidden; } .mapboxgl-ctrl-group:not(:empty) { margin: 12px !important; } .mapboxgl-ctrl button { width: 32px !important; height: 32px !important; color: #2C2C2C; } .mapboxgl-ctrl button + button { border-top: 1px solid #F0EFEA !important; } .mapboxgl-ctrl button:hover { background-color: #F8F7F4 !important; } /* Attribution control — small, unobtrusive */ .mapboxgl-ctrl-attrib { background: rgba(255, 255, 255, 0.85) !important; font-size: 10px !important; border-radius: 6px 0 0 0; } .mapboxgl-ctrl-attrib a, .mapboxgl-ctrl-attrib { color: #7A6C60 !important; }