/** * Landingpage New 2 (Post 7215) – UX-/CRO-Nachbesserungen. * * - Vergleichstabelle: CSS für Chip-Picker/Snap/CTA + Desktop 4-Spalten * - Zitate: Handschrift-Font Caveat (self-hosted) * - Statement-Video: mobil full-bleed (100vw) * * Die Vergleichstabelle wird komplett via compare-table.js gerendert * (CSS hier, JS baut DOM in #brxe-s06cnt). * * Reine Frontend-Ausgabe (CSS), 0 REST-/WPVibe-Calls. */ /* ── Vergleichstabelle ────────────────────────────────────────────────── */ .oph-cmp{--oph-bg:var(--bg,#FFF8F0);--oph-surface:var(--surface,#FAF7F2);--oph-ink:var(--text,#25211F);--oph-muted:var(--textmuted,#5E676B);--oph-accent:#3C8C8C;--oph-accent-deep:#36787B;--oph-tint:rgba(60,140,140,.13);--oph-hair:rgba(37,33,31,.12);--oph-hair2:rgba(37,33,31,.18);--oph-faint:rgba(37,33,31,.42);--oph-rail:rgba(60,140,140,.22);--oph-rail2:rgba(60,140,140,.4);--oph-font-display:var(--font-display,"Signika",system-ui,sans-serif);--oph-font-body:var(--font-body,"Golos Text",system-ui,sans-serif);--oph-ease:cubic-bezier(.22,1,.36,1);font-family:var(--oph-font-body);color:var(--oph-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;max-width:1180px;margin:0 auto} .oph-cmp *{box-sizing:border-box;margin:0;padding:0} .oph-cmp button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} .oph-cmp a{color:inherit;text-decoration:none} .oph-head{text-align:center;margin-bottom:clamp(28px,5vw,46px)} .oph-eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--primary);font-weight:700;margin-bottom:14px} .oph-title{font-family:var(--oph-font-display);font-weight:700;font-size:var(--text-xl);letter-spacing:-.015em;line-height:1.06;color:var(--oph-ink)} .oph-sub{color:var(--oph-muted);font-size:15px;max-width:600px;margin:14px auto 0;line-height:1.6} .oph-mobile{display:block} .oph-chips{display:flex;gap:10px;padding:4px 2px 2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} /* Seitliche Spacer: erlauben es, auch den ersten/letzten Chip mittig zu positionieren (ausgewählter Chip steht immer in der Mitte). */ .oph-chips::before,.oph-chips::after{content:"";flex:0 0 calc(50% - 84px)} .oph-chips::-webkit-scrollbar{display:none} .oph-chip{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border:1.5px solid var(--oph-hair2);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--oph-muted);transition:border-color .25s var(--oph-ease),color .25s var(--oph-ease),box-shadow .25s var(--oph-ease)} .oph-chip .oph-thumb{width:27px;height:27px;border-radius:50%;overflow:hidden;background:rgba(37,33,31,.06);flex:0 0 auto;display:grid;place-items:center} .oph-chip .oph-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s} .oph-thumb .oph-mono{display:none;width:100%;height:100%;place-items:center;font-family:var(--oph-font-display);font-weight:700;font-size:13px;color:var(--oph-accent)} .oph-chip.is-active{border-color:var(--oph-accent);color:var(--oph-muted)} .oph-chip.is-active.is-orphit{color:#fff;background:var(--oph-accent);box-shadow:0 0 0 3.5px var(--oph-tint)} .oph-chip.is-active.is-orphit .oph-thumb{background:rgba(255,255,255,.18)} .oph-chip.is-active .oph-thumb img{filter:none;opacity:1} .oph-chip.is-active .oph-thumb .oph-mono{color:#fff} .oph-dots{display:flex;justify-content:center;gap:7px;padding:14px 0 4px} .oph-dot{width:7px;height:7px;border-radius:50%;background:var(--oph-faint);transition:background .25s,transform .25s var(--oph-ease)} .oph-dot.on{background:var(--oph-accent);transform:scale(1.4)} .oph-stack{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none} .oph-stack::-webkit-scrollbar{display:none} .oph-panel{scroll-snap-align:start;scroll-snap-stop:always;padding:8px 4px 28px} .oph-p-head{padding:14px 0 18px;border-bottom:1px solid var(--oph-hair);margin:0 2px 4px} .oph-p-eyebrow{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--oph-muted);font-weight:700;margin-bottom:8px} .oph-p-name{font-family:var(--oph-font-display);font-weight:700;font-size:27px;letter-spacing:-.01em;line-height:1.05} .oph-p-tag{margin-top:6px;color:var(--oph-muted);font-size:13.5px} .oph-cat{padding:24px 2px 0} .oph-cat-h{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--oph-muted);padding-bottom:4px} .oph-cat-h svg{display:block;flex:0 0 auto;width:14px;height:14px;color:var(--oph-accent)} .oph-rows{list-style:none} .oph-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--oph-hair);transition:background .2s var(--oph-ease)} .oph-row:hover{background:rgba(60,140,140,.03);margin:0 -8px;padding:13px 8px;border-radius:6px} .oph-row:last-child{border-bottom:0} .oph-row-l{font-size:14.5px;color:var(--oph-muted);line-height:1.3} .oph-row-v{font-size:14.5px;color:var(--oph-ink);font-weight:500;display:flex;align-items:baseline;justify-content:flex-end;text-align:right;min-width:0} .oph-chk{display:inline-flex;align-items:center;justify-content:flex-end} .oph-chk svg{width:13px;height:13px;color:var(--oph-faint)} .oph-panel.is-orphit .oph-chk svg{color:var(--oph-accent)} .oph-dash{color:var(--oph-faint);font-size:14px;line-height:1} .oph-cta-btn{border:0;font-weight:600;font-size:15px;color:#fff;background:var(--oph-accent);padding:12px 20px;border-radius:999px;white-space:nowrap;transition:transform .2s var(--oph-ease),box-shadow .25s var(--oph-ease),background .2s} .oph-cta-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px var(--oph-tint);background:var(--oph-accent-deep)} .oph-cta-btn:active{transform:translateY(0) scale(.98)} /* Mobile Sticky-CTA-Leiste: zeigt das gewählte Produkt und bleibt am Viewport-Unterrand sichtbar, bis die Vergleichs-Sektion endet. */ .oph-ctabar{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--oph-bg,#FFF8F0) 86%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid var(--oph-hair);border-radius:16px;box-shadow:0 18px 40px -20px rgba(37,33,31,.45)} .oph-ctabar .oph-cta-thumb{flex:0 0 auto;display:grid;place-items:center} .oph-ctabar .oph-thumb{width:42px;height:42px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--oph-hair);display:grid;place-items:center} .oph-ctabar .oph-thumb img{width:100%;height:100%;object-fit:cover;display:block} .oph-ctabar .oph-thumb .oph-mono{font-size:16px} .oph-cta-right{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto} .oph-cta-price{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--oph-ink);white-space:nowrap} /* Mobile scroll hint */ .oph-stack-hint{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0 2px;font-size:12px;color:var(--oph-faint);letter-spacing:.02em} .oph-stack-hint svg{width:14px;height:14px;animation:oph-hint-slide 1.5s ease-in-out infinite} @keyframes oph-hint-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}} @media (prefers-reduced-motion:reduce){.oph-stack-hint svg{animation:none}} .oph-desktop{display:none} .oph-desk-grid{display:grid;gap:0} .oph-band{display:grid;grid-template-columns:var(--oph-labw,9em) repeat(var(--oph-cols,4),minmax(0,1fr));gap:0} .oph-dg-head{border-bottom:1px solid var(--oph-rail2);padding-bottom:4px} .oph-dg-spacer{grid-column:1} .oph-dhead{grid-column:auto;padding:10px 18px 0;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center} .oph-dhead .oph-thumb{width:54px;height:54px;border-radius:16px;overflow:hidden;background:rgba(37,33,31,.05);margin:0 auto 14px} .oph-dhead .oph-thumb img{width:100%;height:100%;object-fit:cover;display:block} .oph-dhead .oph-p-eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:7px} .oph-dhead h3{font-family:var(--oph-font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;line-height:1.05;margin:0 auto} .oph-dhead .oph-dh-meta{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:12px} .oph-dhead .oph-dh-price{font-size:14px;font-weight:600;color:var(--oph-ink);white-space:nowrap} .oph-dhead .oph-cta-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;font-size:13px;background:var(--oph-accent);color:#fff} .oph-dhead .oph-cta-btn:hover{background:var(--oph-accent-deep)} .oph-dhead .oph-dhead-spacer{display:inline-flex;height:40px;visibility:hidden} .oph-dhead-orphit{background:linear-gradient(180deg,rgba(60,140,140,.04) 0%,transparent 100%);border-radius:12px 12px 0 0;padding-top:14px;padding-left:8px;padding-right:8px} /* Toggle inside Orphit column */ .oph-dhead-orphit .oph-toggle{margin-top:12px;margin-bottom:4px} .oph-toggle{display:flex;justify-content:center} .oph-toggle[role="tablist"]{display:inline-flex;border:1px solid var(--oph-hair2);border-radius:999px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);padding:3px;gap:2px} .oph-toggle-btn{position:relative;padding:6px 16px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--oph-muted);border-radius:999px;transition:color .25s var(--oph-ease),background .25s var(--oph-ease),box-shadow .25s var(--oph-ease);z-index:1;min-width:66px;text-align:center} .oph-toggle-btn[aria-selected="true"]{color:#fff;background:var(--oph-accent);box-shadow:0 2px 8px rgba(60,140,140,.2)} .oph-toggle-btn:hover:not([aria-selected="true"]){color:var(--oph-ink);background:rgba(60,140,140,.08)} .oph-toggle-btn:focus-visible{outline:2px solid var(--oph-accent);outline-offset:2px} .oph-d-cat-title{grid-column:1/-1;display:flex;align-items:center;gap:9px;padding:30px 0 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--oph-muted)} .oph-d-cat-title svg{width:14px;height:14px;display:block;flex:0 0 auto;color:var(--oph-accent)} .oph-d-cat + .oph-d-cat .oph-d-cat-title{border-top:1px solid var(--oph-rail2);margin-top:36px;padding-top:32px} .oph-d-row{display:contents} .oph-d-rl{grid-column:1;align-self:center;padding:18px 22px 18px 0;font-size:14px;line-height:1.35;color:var(--oph-muted);transition:background .2s var(--oph-ease)} .oph-d-rv{grid-column:auto;align-self:center;text-align:center;padding:17px 12px;font-size:14px;line-height:1.4;color:var(--oph-ink);font-weight:500;min-width:0;overflow-wrap:anywhere;transition:background .2s var(--oph-ease)} .oph-d-rv:hover{background:rgba(60,140,140,.03);border-radius:6px} .oph-d-rv .oph-chk{display:inline-flex;align-items:center;justify-content:center} .oph-d-rv .oph-chk svg{width:14px;height:14px;color:var(--oph-faint)} .oph-d-rv.is-orphit .oph-chk svg{color:var(--oph-accent)} .oph-d-rv .oph-dash{color:var(--oph-faint)} @media (min-width:900px){.oph-mobile{display:none}.oph-desktop{display:block}} @media (prefers-reduced-motion:reduce){.oph-cmp *{transition:none!important;animation:none!important}.oph-stack{scroll-behavior:auto!important}} /* ── Zitate – Handschrift-Font ──────────────────────────────────────────── */ /* Wichtig: page-id-7215 + !important, sonst schlägt site-ux.css (lädt später, font-family !important auf p/.brxe-text-basic) bei gleicher Spezifität. */ body.page-id-7215 .orphit-quote { font-family: "Caveat", cursive !important; font-size: 1.3em !important; line-height: 1.25 !important; } /* ── Breites Statement-Video mobil full-bleed (100vw) ──────────────────── */ @media (max-width: 767px) { #brxe-v01vid { width: 100vw; max-width: 100vw; margin-inline: 0; border-radius: 0; } } /* ── s02aaa: Problem-Section + Video am Meer zu hoch ────────────────────── * Das Video (orphit-ohr-meer-720.mp4) in #brxe-s02im1 zusammen mit dem * Text-Block rechts macht die Sektion 1135 px Desktop / 1211 px Mobile * (143% Viewport!). Das Video wird bei den meisten Browsern abgeschnitten. * * Fix: (a) Video-Container max-height begrenzen + object-fit: cover; * (b) Mobile: Padding stark reduzieren, Video max-height 50vh; * (c) Desktop: Video max-height 70vh. */ #brxe-s02im1 video { max-height: 70vh; width: 100%; object-fit: contain; border-radius: 12px; } #brxe-s02im1 { overflow: hidden; border-radius: 12px; } @media (max-width: 767px) { #brxe-s02aaa { padding-top: 32px !important; padding-bottom: 40px !important; } #brxe-s02im1 video { max-height: 50vh; } } /* ── v02aaa: Handwerk-Video zu hoch ────────────────────────────────────── * Das Video (orphit_handcraft.mp4) in #brxe-v02vid ist ein 9/9-Portrait- * video. Bricks setzt aspect-ratio: 9/16 → 600px breit = 1067px hoch. * Fix: Container max-height begrenzen, Ratio beibehalten (skaliert runter). */ #brxe-v02vid { max-height: 70vh; overflow: hidden; } #brxe-v02vid video { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0; } /* Ecken via Container schneiden */ #brxe-v02vid { border-radius: 16px; } @media (max-width: 767px) { #brxe-v02aaa { padding-top: 32px !important; padding-bottom: 40px !important; } #brxe-v02vid { max-height: 55vh; } } /* ── TranslatePress Language-Modal ausblenden ──────────────────────────── * Das "We've detected you might be speaking a different language" Popup * überlappt Header und Hero in jedem Build. Auf der reinen DE-Seite * redundant. */ .trp-language-switcher.trp-floater, .trp-language-switcher.trp-language-floater { display: none !important; } /* ── Kontrast-Fixes (WCAG AA 4.5:1) ──────────────────────────────────── * Topbar-Counter "13" (aktuell accent #F59962 auf BG #FFF8F0 = 2.07:1). * Eyebrow-Texte "Das Problem", "So funktioniert's" etc. (aktuell * textmuted #5E676B auf BG #FFF8F0 = 3.75:1). */ #brxe-tb0day { color: #A04D18 !important; /* ≈5.8:1 auf #FFF8F0, besteht WCAG AA */ } /* Eyebrow-Spans in allen Sektionen — Selector auf Klasse + ID-Muster */ .brxe-section .brxe-text-basic[id^="brxe-s02eb"], .brxe-section .brxe-text-basic[id^="brxe-s04eyb"], .brxe-section .brxe-text-basic[id^="brxe-v01eyb"], .brxe-section .brxe-text-basic[id^="brxe-s05eyb"], .brxe-section .brxe-text-basic[id^="brxe-v02eyb"], .brxe-section .brxe-text-basic[id^="brxe-p01eyb"], .brxe-section .brxe-text-basic[id^="brxe-s08eyb"], .brxe-section .brxe-text-basic[id^="brxe-s10eyb"], .brxe-section .brxe-text-basic[id^="brxe-s11eyb"], .brxe-section .brxe-text-basic[id^="brxe-mkeyb"] { color: #4A5559 !important; /* ≈5.6:1 auf #FFF8F0 */ } /* ── Tap-Targets vergrössern (min. 44×44 px) ──────────────────────────── * Nav-Links: aktuell 105×34, 94×34, 72×34, 66×34 px. * DOI-Link: 167×16 px. Text-Links: 141×29 px. * Mobile Burger: 20×16 px. */ /* Desktop Nav-Links: vertikales Padding +8px → ~50px hoch */ @media (min-width: 900px) { #header-nav .brxe-nav-menu a, #header-nav .brxe-nav-menu li a { min-height: 44px; display: inline-flex; align-items: center; padding-top: 10px; padding-bottom: 10px; } } /* DOI-Link: min-height */ #brxe-s01clm a, .brxe-section a[href*="zenodo"] { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 0; } /* Text-Links "Jetzt konfigurieren →", "Akustiker in der Nähe →" */ .brxe-text-link { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 0; } /* Mobile Burger-Button: 44×44 px min — nur auf Mobile aktivieren, * sonst wird der Desktop-Nav durch display:flex gebroken. */ @media (max-width: 899px) { .bricks-mobile-menu-toggle { min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center; justify-content: center; } } /* ── FAQ: Sprung beim Aufklappen verhindern ────────────────────────────── * Der Parent