/* ============================================================ Page compositions: hero, logo-wall, steps, comparison, pricing, calculator, faq, wizard funnel. Reveal motion at the bottom. ============================================================ */ /* ---------------- Atmosphere ---------------- */ .bg-paper2 { background: var(--paper-2); } .bg-ink { background: var(--ink); color: #E7EAEF; } .bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink .h1, .bg-ink .h2 { color: #fff; } .grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; z-index: 0; background-image: radial-gradient(circle at 15% 15%, rgba(204,41,36,.05), transparent 42%), radial-gradient(circle at 85% 0%, rgba(20,27,38,.05), transparent 45%); } /* ---------------- Hero ---------------- */ /* Oberkante bewusst knapp: zwischen der klebenden Navigation und der Eyebrow standen 90px Leerraum, gemessen bei 1280px. Der Hero beginnt jetzt dort, wo der Blick ohnehin landet — die Weite traegt weiterhin der Innenabstand und der Zeilenabstand, nicht eine leere Flaeche unter der Navigation. */ .hero { position: relative; padding-top: clamp(22px, 3vw, 44px); padding-bottom: clamp(40px, 5vw, 72px); overflow: visible; } .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero h1 { margin: 18px 0 22px; } .hero .lead { max-width: 33ch; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 26px; } .hero-proof { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hero-proof .txt { font-size: 0.92rem; color: var(--ink-2); } .hero-proof .txt b { color: var(--ink); } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero .lead { max-width: none; } } /* Offer card (hero right) */ .offer-card { position: relative; padding: 30px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .offer-card .kick { font-size: 0.86rem; color: var(--ink-3); font-weight: 520; } .offer-card .price { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; } .offer-card .price .amt { font-size: 3rem; font-weight: 680; letter-spacing: var(--tracking-tighter); } .offer-card .price .cur { font-size: 1.1rem; font-weight: 560; color: var(--ink-2); } .offer-card .anchor { color: var(--ink-3); text-decoration: line-through; font-size: 1rem; } .offer-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; } .offer-list li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; font-size: 0.97rem; color: var(--ink-2); } .offer-list .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--red-wash); color: var(--red); display: grid; place-items: center; margin-top: 1px; } .pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .pay-badge { font-size: 0.66rem; font-weight: 700; letter-spacing: .02em; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-2); background: var(--paper-2); } .trust-line { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; color: var(--ink-2); margin-top: 10px; } /* ---------------- Logo wall ---------------- */ .logowall { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); } .logowall-inner { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px); flex-wrap: wrap; padding: 30px 0; } .logowall .plogo { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); opacity: .82; } .logowall .plogo .s { color: var(--red); } .logowall-cap { text-align: center; font-size: 0.82rem; color: var(--ink-3); padding-bottom: 22px; } /* ---------------- Feature/step cards ---------------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } .feature { padding: 32px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .feature .n { font-size: 0.8rem; font-weight: 700; color: var(--red); letter-spacing: .08em; } .feature h3 { margin: 14px 0 10px; } .feature p { color: var(--ink-2); font-size: 0.98rem; } .feature .fico { width: 46px; height: 46px; border-radius: 12px; background: var(--red-wash); color: var(--red); display: grid; place-items: center; margin-bottom: 16px; } /* Steps (how it works) */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: 28px 22px; } .step .sn { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; color: var(--red); opacity: .9; line-height: 1; } .step h4 { margin: 12px 0 8px; font-size: 1.12rem; } .step p { color: var(--ink-2); font-size: 0.95rem; } /* ---------------- Comparison table ---------------- */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 760px) { .compare { grid-template-columns: 1fr; } } .compare-col { padding: 32px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); } .compare-col.win { border-color: rgba(204,41,36,.3); box-shadow: var(--shadow-md); } .compare-col h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .compare-item { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line-2); font-size: 0.96rem; } .compare-item:first-of-type { border-top: 0; } .compare-item .ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; } .ic-x { background: #F1E3E2; color: var(--red-deep); } .ic-v { background: #E1F0E7; color: var(--ok); } .compare-item b { color: var(--ink); } .compare-item span { color: var(--ink-2); } /* ---------------- Savings calculator ---------------- */ .calc { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-md); } .calc-grid { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 760px) { .calc-grid { grid-template-columns: 1fr; } } .calc-left { padding: clamp(28px, 4vw, 48px); } .calc-right { padding: clamp(28px, 4vw, 48px); background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: center; } .calc input[type=range] { width: 100%; accent-color: var(--red); margin: 12px 0; } .calc .val { font-size: 1.6rem; font-weight: 660; letter-spacing: -0.02em; } .calc-save { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 700; letter-spacing: var(--tracking-tighter); color: #fff; line-height: 1; } .calc-right .sub { color: #A9B2BE; margin-top: 12px; } /* ---------------- Pricing ---------------- */ .prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; } @media (max-width: 900px) { .prices { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } } .price-card { position: relative; padding: 32px 30px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--line); transition: transform .25s var(--ease-out), box-shadow .25s; } .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .price-card.feat { border-color: var(--red); box-shadow: var(--shadow-lg); } .price-card .pname { font-weight: 600; font-size: 1.05rem; } .price-card .pbadge { position: absolute; top: -13px; left: 30px; } .price-card .pprice { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 2px; } .price-card .pprice .a { font-size: 2.6rem; font-weight: 680; letter-spacing: var(--tracking-tighter); } .price-card .pprice .c { font-size: 1rem; color: var(--ink-2); font-weight: 540; } .price-card .panchor { font-size: 0.9rem; color: var(--ink-3); } .price-card .panchor s { color: var(--ink-3); } .price-card .pdur { font-size: 0.92rem; color: var(--ink-2); font-weight: 600; margin-top: 4px; } .price-card.feat .pdur { color: var(--red-deep); } .price-card ul { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; } .price-card li { display: flex; gap: 10px; font-size: 0.94rem; color: var(--ink-2); align-items: flex-start; } /* Rot hatte auf jeder Karte vier Aufgaben gleichzeitig: Haekchen, Laufzeit, Badge und Button. Auf der Basis- und der Premium-Karte war der Button damit das leiseste rote Element auf der Karte. Rot markiert jetzt nur noch die empfohlene Karte und die Handlung — die Haekchen bestaetigen ruhig. */ .price-card li .ck { flex: none; color: var(--ink-3); margin-top: 2px; } .price-card.feat li .ck { color: var(--red); } /* ---------------- FAQ ---------------- */ .faq { max-width: 800px; margin: 0 auto; } .qa { border-bottom: 1px solid var(--line); } .qa summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-weight: 560; font-size: 1.1rem; letter-spacing: -0.01em; } .qa summary::-webkit-details-marker { display: none; } .qa summary .plus { flex: none; width: 26px; height: 26px; position: relative; transition: transform .3s var(--ease); } .qa summary .plus::before, .qa summary .plus::after { content: ''; position: absolute; background: var(--red); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%,-50%); } .qa summary .plus::before { width: 14px; height: 2px; } .qa summary .plus::after { width: 2px; height: 14px; transition: transform .3s var(--ease); } .qa[open] summary .plus::after { transform: translate(-50%,-50%) scaleY(0); } .qa .a { padding: 0 46px 26px 0; color: var(--ink-2); font-size: 1rem; line-height: 1.6; } /* ---------------- Testimonial / avatar cases ---------------- */ .case { padding: 34px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .case .quote { font-size: 1.16rem; line-height: 1.5; letter-spacing: -0.015em; color: var(--ink); font-weight: 460; } .case .who { display: flex; align-items: center; gap: 12px; margin-top: 22px; } .case .who .av { width: 44px; height: 44px; border-radius: 50%; background: var(--red-wash); color: var(--red); display: grid; place-items: center; font-weight: 640; } .case .who .meta { font-size: 0.9rem; } .case .who .meta b { display: block; color: var(--ink); } .case .who .meta span { color: var(--ink-3); } /* ---------------- Big CTA band ---------------- */ .cta-band { border-radius: var(--r-xl); background: linear-gradient(135deg, #1A2130 0%, #141B26 60%, #221316 100%); color: #fff; padding: clamp(40px, 6vw, 80px); text-align: center; position: relative; overflow: hidden; } .cta-band::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(204,41,36,.4), transparent 70%); top: -120px; right: -80px; filter: blur(20px); } .cta-band h2, .cta-band p { position: relative; z-index: 1; } .cta-band .lead { color: #B9C1CC; } /* ============================================================ Wizard funnel ============================================================ */ .funnel-shell { min-height: 100vh; display: flex; flex-direction: column; } .funnel-top { position: sticky; top: 0; z-index: 50; background: rgba(246,244,240,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .funnel-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; } .step-count { font-size: .88rem; color: var(--ink-3); white-space: nowrap; flex: none; } .progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--red); width: 0; transition: width .4s var(--ease); } /* minmax(0,1fr): ohne explizite Spalte sized der implizite `auto`-Track auf max-content — der breiteste Inhalt (nowrap-Nav-Buttons, 410px) reisst dann die ganze Seite über den Viewport hinaus, und overflow-x:clip schneidet sie ab. */ .funnel-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: start center; padding: clamp(28px, 5vw, 64px) 0; } .step-panel { width: 100%; max-width: 720px; } .step-panel[hidden] { display: none; } .step-head { margin-bottom: 28px; } .step-head .eyebrow { margin-bottom: 12px; display: block; } .step-head h2 { margin-bottom: 8px; } .wizard-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 32px; } .dropzone { border: 2px dashed var(--line); border-radius: var(--r-md); padding: 40px; text-align: center; background: var(--surface); transition: all .2s; cursor: pointer; } .dropzone.drag { border-color: var(--red); background: var(--red-wash); } .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 16px; } .thumbs .th { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); } .thumbs .th img { width: 100%; height: 100%; object-fit: cover; } .thumbs .th button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(20,27,38,.7); color: #fff; border: 0; font-size: 14px; line-height: 1; } .summary-box { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; } .bump { display: flex; gap: 14px; padding: 18px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: all .2s; margin-bottom: 12px; } .bump.sel { border-color: var(--red); background: var(--red-wash); } .bump input { margin-top: 3px; accent-color: var(--red); width: 18px; height: 18px; } .bump .bt { font-weight: 560; } .bump .bp { margin-left: auto; font-weight: 640; white-space: nowrap; } /* ---------------- Reveal motion ---------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } /* ============================================================ Trust & acceptance marks (logos.js) ============================================================ */ .paylogos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .paymark { height: 34px; width: auto; border-radius: 6px; } .offer-card .paylogos { margin-top: 4px; } /* Portal authority wall — big, bold, directly visible */ .portalwall { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 4vw, 52px); flex-wrap: wrap; padding: 6px 0; } .plogo2 { font-size: clamp(1.15rem, 2.1vw, 1.7rem); letter-spacing: -0.02em; white-space: nowrap; opacity: .95; } .plogo2 b { font-weight: 800; } /* Trust row (HEV / PriceHubble / Stripe / Swiss) */ .trustrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 860px) { .trustrow { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .trustrow { grid-template-columns: 1fr; } } .trustmark { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .tm-badge { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; } .tm-txt { font-size: 0.86rem; line-height: 1.3; color: var(--ink-2); } .tm-txt b { color: var(--ink); font-weight: 640; } /* ============================================================ PriceHubble showcase (browser-framed, scroll parallax) ============================================================ */ .showcase { position: relative; } .browser-frame { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); will-change: transform; } .browser-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #F1EEE9; border-bottom: 1px solid var(--line); } .browser-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; } .browser-bar i:nth-child(1) { background: #FF5F57; } .browser-bar i:nth-child(2) { background: #FEBC2E; } .browser-bar i:nth-child(3) { background: #28C840; } .browser-bar .url { margin-left: 12px; font-size: .78rem; color: var(--ink-3); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 4px 12px; } .browser-frame img { width: 100%; display: block; } .showcase-float { position: absolute; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 16px 18px; will-change: transform; } .showcase-float .fl-k { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .showcase-float .fl-v { font-size: 1.5rem; font-weight: 680; letter-spacing: -0.02em; color: var(--red); } @media (max-width: 640px) { .showcase-float { display: none; } } .parallax { transition: transform .1s linear; } /* ============================================================ Real payment chips + rotating portal carousel ============================================================ */ .paylogos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .paychip { display: inline-flex; align-items: center; justify-content: center; height: 38px; min-width: 58px; padding: 0 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(20,27,38,.05); } .paychip img { height: 24px; width: auto; display: block; } .pchip-twint { font-weight: 800; font-size: 14px; letter-spacing: -0.02em; color: #000; position: relative; padding-right: 8px; } .pchip-twint .pdot { position: absolute; top: 1px; right: 0; width: 5px; height: 5px; border-radius: 50%; background: #FF6600; } /* Portal carousel — infinite auto-scroll marquee */ .pcarousel { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* spacing via per-item margin (NOT flex gap) so the duplicated set tiles exactly and translateX(-50%) loops seamlessly — flex gap adds a half-gap at the seam. */ .pcarousel-track { display: flex; align-items: center; width: max-content; animation: pcarousel 20s linear infinite; will-change: transform; } /* Pause on hover ONLY on real pointers — on touch, :hover sticks after a swipe and would freeze/hide the marquee ("verschwindet beim Scrollen"). */ @media (hover: hover) and (pointer: fine) { .pcarousel:hover .pcarousel-track { animation-play-state: paused; } } .pcarousel-item { font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; white-space: nowrap; } .pcarousel-item b { font-weight: 800; } @keyframes pcarousel { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .pcarousel-track { animation: none; flex-wrap: wrap; justify-content: center; } } /* ============================================================ Comparison — bold red ✕ / green ✓ buttons ============================================================ */ .compare-item .ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; margin-top: 1px; font-weight: 900; font-size: 1rem; box-shadow: 0 2px 6px rgba(20,27,38,.1); } .ic-x { background: var(--red); color: #fff; } .ic-v { background: var(--ok); color: #fff; } /* ============================================================ "So funktioniert es" — house builds up on scroll ============================================================ */ .howhouse { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 900px) { .howhouse { grid-template-columns: 1fr; } /* On mobile the stage is full-width: sticky made the house cling and its absolutely-positioned floating portal marks overlapped the step cards (and the -9% outset overflowed the viewport). Static + no floaters. */ .howhouse .house-stage { order: -1; position: static; top: auto; aspect-ratio: auto; margin-bottom: 4px; } .howhouse .house-svg { max-width: 260px; } .howhouse .house-portals { display: none; } } .house-stage { position: sticky; top: 96px; aspect-ratio: 1 / 1; display: grid; place-items: center; } .house-svg { width: 100%; max-width: 460px; } .house-svg [data-part] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .house-svg [data-part].on { opacity: 1; transform: none; } .house-svg .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.1s var(--ease); } .house-svg .draw.on { stroke-dashoffset: 0; } .hsteps { display: grid; gap: 18px; } .hstep { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); opacity: .45; transform: translateX(-8px); transition: all .5s var(--ease); } .hstep.on { opacity: 1; transform: none; border-color: rgba(204,41,36,.28); box-shadow: var(--shadow-md); } .hstep .hn { width: 58px; height: 58px; border-radius: 16px; background: var(--red-wash); color: var(--red); font-size: 1.7rem; font-weight: 780; display: grid; place-items: center; letter-spacing: -0.03em; transition: all .4s var(--ease); } .hstep.on .hn { background: var(--red); color: #fff; box-shadow: var(--shadow-red); } .hstep h4 { font-size: 1.2rem; margin-bottom: 6px; } .hstep p { color: var(--ink-2); font-size: .97rem; } /* ============================================================ Footer brand — big centered logo ============================================================ */ .footer-hero { text-align: center; padding-bottom: 44px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); } .footer-hero img { height: 128px; width: auto; margin: 0 auto 18px; } .footer-hero .fh-name { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 720; letter-spacing: -0.02em; color: #fff; } .footer-hero .fh-name .r { color: var(--red); } .footer-hero .fh-sub { color: #98A1AD; margin-top: 8px; font-size: 1rem; } /* ============================================================ PriceHubble premium stacked showcase (layered floating cards) ============================================================ */ .ph-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 5vw, 80px); align-items: center; } @media (max-width: 960px) { .ph-hero { grid-template-columns: 1fr; } .ph-stack { margin-top: 20px; } } .ph-feats { display: grid; gap: 14px; margin-top: 26px; } .ph-feat { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 20px 22px; border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--line); transition: all .3s var(--ease); } .ph-feat.hl { border-color: var(--red); box-shadow: var(--shadow-md); } .ph-feat .pf-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--red-wash); color: var(--red); display: grid; place-items: center; } .ph-feat h4 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; } .ph-feat p { font-size: .95rem; color: var(--ink-2); line-height: 1.5; } .ph-stack { position: relative; min-height: clamp(420px, 42vw, 560px); } .ph-card { position: absolute; border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.07); } .ph-card .ph-label { padding: 11px 15px; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; background: linear-gradient(180deg, #1F2A3D, #141B26); } .ph-card .ph-label .r { color: #FF6A5F; } .ph-card img { display: block; width: 100%; height: auto; } .ph-card-main { width: 62%; left: 0; top: 10%; transform: rotate(-3deg); z-index: 2; } .ph-card-market { width: 52%; right: 0; top: 0; transform: rotate(3.5deg); z-index: 3; } .ph-chip-value { position: absolute; z-index: 4; left: 6%; bottom: 4%; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px 18px; transform: rotate(-1.5deg); } .ph-chip-value .cv-k { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .ph-chip-value .cv-v { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--red); } .ph-chip-pdf { position: absolute; z-index: 5; right: 8%; bottom: 12%; display: inline-flex; align-items: center; gap: 9px; background: var(--ok); color: #fff; border-radius: var(--r-pill); box-shadow: 0 10px 30px rgba(31,138,76,.34); padding: 11px 18px; font-weight: 620; font-size: .92rem; transform: rotate(2deg); } .ph-chip-pdf svg { flex: none; } @media (max-width: 520px) { .ph-chip-value, .ph-chip-pdf { display: none; } .ph-card-main { width: 68%; } .ph-card-market { width: 56%; } } /* PDF download reassurance strip */ .pdf-strip { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r-md); background: #E9F3EC; border: 1px solid #CDE7D5; } .pdf-strip .pd-ico { flex: none; width: 44px; height: 44px; border-radius: 11px; background: var(--ok); color: #fff; display: grid; place-items: center; } .pdf-strip b { color: var(--ink); } .pdf-strip span { color: var(--ink-2); font-size: .96rem; } /* Portal marks floating around the house (reveal on scroll) */ .house-portals { position: absolute; inset: -4% -9%; pointer-events: none; z-index: 4; } .house-portal { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px 13px; font-size: .95rem; letter-spacing: -0.02em; white-space: nowrap; opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .house-portal .pmark-img { height: 17px; width: auto; display: block; } .house-portals.on .house-portal { opacity: 1; transform: none; } .pcarousel-item .pmark-img { height: clamp(22px, 2.6vw, 34px); width: auto; display: block; } /* ============================================================ Funnel LD-premium polish ============================================================ */ .funnel-main { align-items: center; } .choices-cat { grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 640px) { .choices-cat { grid-template-columns: repeat(2, 1fr); } } .choices-cat .choice { align-items: flex-start; gap: 16px; padding: 24px; min-height: 132px; justify-content: flex-start; } .choice .cico { width: 52px; height: 52px; border-radius: 14px; background: var(--red-wash); color: var(--red); display: grid; place-items: center; transition: all .25s var(--ease); } .choice .cico svg { width: 27px; height: 27px; } .choices-cat .choice .t { font-size: 1.12rem; font-weight: 600; } .choice:hover .cico { transform: scale(1.06); } .choice.sel .cico { background: var(--red); color: #fff; } /* subtype + feature choices: cleaner */ #subtypeChoices .choice, [data-multi="features"] .choice { padding: 18px 20px; } .step-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); } /* margin-inline:auto — der .wrap ist auf 1180px zentriert, das schmalere Panel sass darin linksbündig. Auf Desktop stand der Inhalt dadurch links der Bildmitte, obwohl der Schritt-Kopf zentriert gesetzt ist. Auf Mobile fuellt das Panel den wrap → ohne Wirkung. */ .step-panel { max-width: 760px; margin-inline: auto; } .wizard-nav { margin-top: 40px; } /* Paketzeile: Preis bleibt einzeilig, der Beschrieb darf umbrechen (sonst zerbricht "CHF 349" auf zwei Zeilen, sobald es eng wird). */ #planChoices .choice > span:first-child { min-width: 0; } #planChoices .choice > span:last-child, #total { flex: none; white-space: nowrap; } /* Mobile: Zurück + CTA nebeneinander brauchen ~410px (beide .btn sind nowrap) — das passt bei 393px Viewport nicht. Darum gestapelt, CTA zuoberst. */ @media (max-width: 560px) { .wizard-nav { flex-direction: column-reverse; align-items: stretch; gap: 10px; } .wizard-nav .btn { width: 100%; } .wizard-nav > span:empty { display: none; } } /* Mobile: Wortmarke und Schrittzähler teilen sich ~345px und brachen beide zweizeilig um. Etwas kleiner gesetzt passen beide auf je eine Zeile. */ @media (max-width: 640px) { .funnel-top .brand { font-size: .88rem; gap: 9px; } .step-count { font-size: .78rem; } } /* Keep carousel logos strictly side-by-side (images must not wrap/stack) */ .pcarousel-track { flex-wrap: nowrap !important; flex-direction: row !important; } .pcarousel-item { flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: clamp(36px, 6vw, 72px); } .pcarousel-item .pmark-img { height: calc(clamp(26px, 2.4vw, 38px) * var(--pscale, 1)); width: auto; max-width: none; } @media (prefers-reduced-motion: reduce) { .pcarousel-track { flex-wrap: nowrap !important; } } /* house floating portal marks as images — uniform size, no per-logo scale (scale var is for the carousel wall only, else the ImmoScout floater blows up and overlaps the house). Container stays outset (-4% -9%, line 294) so marks sit around the house, never on its lines. */ .house-portal .pmark-img { height: 20px; } /* ImmoScout24 is a STACKED logo (Immo / Scout24) — a fixed height makes it read smaller than the wide wordmarks, so size it explicitly per context. */ .pcarousel-item .pmark-img[alt="ImmoScout24"] { height: 44px; } /* carousel ≈ iCasa */ .house-portal .pmark-img[alt="ImmoScout24"] { height: 40px; } /* house: restored size */ /* ============================================================ Funnel — LD-style premium: single-focus steps, auto-advance tiles, step slide-in, checkmark selection, trust reassurance. ============================================================ */ @keyframes stepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .step-panel:not([hidden]) { animation: stepIn .42s var(--ease-out); } /* thicker, calmer progress bar */ .progress { height: 4px; } /* single-focus centered question head */ .step-head { text-align: center; max-width: 640px; margin: 0 auto 36px; } .step-head .eyebrow { color: var(--red); } .step-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12; margin-top: 12px; } .step-head .muted { margin-top: 12px; font-size: 1.02rem; } /* premium tiles — lift on hover, ring + checkmark on select */ .choice { position: relative; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease), background .2s var(--ease); } .choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--red); } .choice.sel { border-color: var(--red); background: var(--red-wash); box-shadow: 0 0 0 2px var(--red) inset; } .choices-cat .choice.sel::after, #subtypeChoices .choice.sel::after { content: ""; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px 13px no-repeat; } /* subtype = clean 2-col cards */ #subtypeChoices { grid-template-columns: repeat(2, 1fr); gap: 14px; } #subtypeChoices .choice { flex-direction: row; align-items: center; justify-content: flex-start; padding: 22px 24px; min-height: 0; font-size: 1.06rem; font-weight: 560; } @media (max-width: 560px) { #subtypeChoices { grid-template-columns: 1fr; } } /* trust reassurance (textual, LD-style — no emoji band) */ .funnel-trust { text-align: center; padding: 26px 20px 44px; color: var(--ink-3); font-size: .92rem; line-height: 1.6; } .funnel-trust b { color: var(--ink-2); font-weight: 600; } /* address map — swisstopo tiles, premium frame + brand-red pin */ .addr-map { height: 320px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); margin: 6px 0 8px; background: var(--paper-2); position: relative; z-index: 1; } .map-hint { text-align: left; margin: 0 2px 20px; } .addr-pin { display: grid; place-items: center; } .addr-pin span { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--red); transform: rotate(-45deg); border: 2.5px solid #fff; box-shadow: 0 4px 12px rgba(204, 41, 36, .5); } .leaflet-container { font: inherit; background: var(--paper-2); } .leaflet-bar { border: 0 !important; box-shadow: var(--shadow-md) !important; } .leaflet-bar a { border-radius: 8px !important; color: var(--ink) !important; } /* dropzone icon (SVG, not emoji) */ .dz-ico { color: var(--red); display: flex; justify-content: center; } /* ============================================================ Premium emphasis — marker highlight + underline (Nachdruck) ============================================================ */ /* Red marker-highlight under key phrases — designed, not default underline */ .mk { background-image: linear-gradient(180deg, transparent 58%, rgba(204,41,36,.16) 58%, rgba(204,41,36,.16) 92%, transparent 92%); padding: 0 .04em; border-radius: 1px; } /* Ink marker for dark sections */ .bg-ink .mk, .cta-band .mk { background-image: linear-gradient(180deg, transparent 58%, rgba(255,255,255,.16) 58%, rgba(255,255,255,.16) 92%, transparent 92%); } /* Premium underline: thick red, offset, doesn't touch descenders */ .uu { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Emphasis red-bold token */ .rb { color: var(--red); font-weight: 680; } /* ============================================================ Premium feature icons (line SVGs replace emoji) — cohesive set ============================================================ */ .fico svg { width: 24px; height: 24px; display: block; } .feature .fico, .ph-feat .pf-ico { transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } .feature:hover .fico { transform: translateY(-2px) scale(1.04); } /* larger, softer icon tile for premium weight */ .feature .fico { width: 52px; height: 52px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(204,41,36,.10); } /* ============================================================ Clickable cards (valuation feature cards become links) ============================================================ */ a.ph-feat { text-decoration: none; color: inherit; cursor: pointer; position: relative; } a.ph-feat::after { content: ""; position: absolute; right: 18px; top: 22px; width: 18px; height: 18px; opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease); background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC2924' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H9M17 7v8'/%3E%3C/svg%3E"); transform: translate(-3px,3px); } a.ph-feat:hover { border-color: var(--red); box-shadow: var(--shadow-md); transform: translateY(-2px); } a.ph-feat:hover::after { opacity: 1; transform: none; } /* ============================================================ Bewertung (valuation) — premium building blocks ============================================================ */ /* Segmented control replaces the cheap native