/** Shopify CDN: Minification failed Line 2887:30 Unexpected "{" Line 2887:39 Expected ":" Line 2887:73 Expected identifier but found whitespace Line 2887:75 Unexpected "{" Line 2887:92 Expected ":" Line 2887:97 Expected ":" **/ /* ====================================================================== O.C. Hairclinic — Theme CSS Zentrales Stylesheet für alle O.C.-Sections. Wird via {{ 'oc-theme.css' | asset_url | stylesheet_tag }} im theme.liquid geladen. ====================================================================== */ /* === Design Tokens === */ :root { --oc-accent: #1c8394; --oc-soft: #fafaf7; --oc-beige: #f6f5f0; --oc-border: #ececec; --oc-border-soft: #e3e2dc; --oc-text: #1a1a1a; --oc-muted: #5c5c5c; --oc-mute-2: #8a8a8a; --oc-dark: #0f0f0f; --oc-success: #2a8f5f; --oc-trust-green: #00B67A; --oc-wa: #25D366; } /* === Global Type Override für alle Sections === */ [class*="oc-header"], [class*="oc-footer"], [class*="oc-drawer"], [class*="oc-hero"], [class*="oc-final"], [class*="oc-fcta"], [class*="oc-faq"], [class*="oc-stats"], [class*="oc-stories"], [class*="oc-usp"], [class*="oc-tp"], [class*="oc-proof"], [class*="oc-proc"], [class*="oc-clinic"], [class*="oc-concern"], [class*="oc-price"], [class*="oc-prh"], [class*="oc-prt"], [class*="oc-prq"], [class*="oc-prin"], [class*="oc-mhe"], [class*="oc-mfb"], [class*="oc-mwa"], [class*="oc-mer"], [class*="oc-mpr"], [class*="oc-mct"], [class*="oc-oph"], [class*="oc-opv"], [class*="oc-opt"], [class*="oc-ops"], [class*="oc-opn"], [class*="oc-dkh"], [class*="oc-dkp"], [class*="oc-dkn"], [class*="oc-dkt"], [class*="oc-acv"], [class*="oc-arztnote"], [class*="oc-as"], [class*="oc-aw"], [class*="oc-ab"], [class*="oc-ah"], [class*="oc-cmtool"], [class*="oc-eh"], [class*="oc-ebu"], [class*="oc-eab"], [class*="oc-ecm"], [class*="oc-evs"], [class*="oc-eas"], [class*="oc-evb"], [class*="oc-exph"], [class*="oc-exlib"], [class*="oc-klh"], [class*="oc-klr"], [class*="oc-klo"], [class*="oc-klt"], [class*="oc-kls"], [class*="oc-kcs"], [class*="oc-uh"], [class*="oc-um"], [class*="oc-us"], [class*="oc-ul"], [class*="oc-ust"], [class*="oc-ut"], [class*="oc-uk"], [class*="oc-phub"], [class*="oc-phero"], [class*="oc-pintro"], [class*="oc-pjourney"], [class*="oc-pgal"], [class*="oc-ppull"], [class*="oc-pvideo"], [class*="oc-parzt"], [class*="oc-ugc"], [class*="oc-founders"], [class*="oc-eih"], [class*="oc-eiq"], [class*="oc-eif"], [class*="oc-tbh"], [class*="oc-tbu"], [class*="oc-tbf"], [class*="oc-tbw"], [class*="oc-tba"] { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; } [class*="oc-"] h1, [class*="oc-"] h2, [class*="oc-"] h3, [class*="oc-"] h4 { letter-spacing: -0.02em; } /* === Section: arzt-cv === */ .oc-acv { background: var(--oc-acv-bg); color: var(--oc-acv-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-acv { padding: 120px 40px; } } .oc-acv__inner { max-width: 1240px; margin: 0 auto; } .oc-acv__head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .oc-acv__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-acv-accent); margin-bottom: 14px; font-weight: 600; } .oc-acv__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-acv__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-acv-muted); margin: 0; } .oc-acv__split { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: flex-start; } @media (min-width: 1024px) { .oc-acv__split { grid-template-columns: 0.85fr 1fr; gap: 64px; } } /* ---------- Media-Col ---------- */ .oc-acv__media-col { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; } @media (max-width: 1023px) { .oc-acv__media-col { position: static; } } .oc-acv__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--oc-acv-card); box-shadow: 0 24px 64px -32px rgba(0,0,0,0.22); } .oc-acv__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-acv__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-acv-accent)); } .oc-acv__photo-caption { position: absolute; left: 18px; bottom: 18px; padding: 10px 16px; background: rgba(15, 15, 15, 0.78); color: #fff; border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 2px; } .oc-acv__photo-caption strong { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.005em; } .oc-acv__photo-caption span { font-size: 0.74rem; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; } /* ---------- Siegel-Card ---------- */ .oc-acv__seal { background: var(--oc-acv-card); border: 1px solid var(--oc-acv-border); border-radius: 14px; padding: 18px 20px; display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; } .oc-acv__seal-img-wrap { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; } .oc-acv__seal-img { width: 100%; height: 100%; object-fit: contain; } .oc-acv__seal-body strong { display: block; font-size: 0.94rem; font-weight: 600; color: var(--oc-acv-text); margin-bottom: 4px; } .oc-acv__seal-body p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--oc-acv-muted); } .oc-acv__seal-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--oc-acv-accent); text-decoration: none; } .oc-acv__seal-link svg { width: 12px; height: 12px; } .oc-acv__seal-link:hover { text-decoration: underline; } /* ---------- Body / CV ---------- */ .oc-acv__intro { font-size: 1.04rem; line-height: 1.65; color: var(--oc-acv-text); margin: 0 0 28px; } .oc-acv__details { border-top: 1px solid var(--oc-acv-border); padding: 20px 0; } .oc-acv__details:last-of-type { border-bottom: 1px solid var(--oc-acv-border); } .oc-acv__details[open] { padding-bottom: 26px; } .oc-acv__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 1rem; font-weight: 600; color: var(--oc-acv-text); letter-spacing: -0.005em; } .oc-acv__summary::-webkit-details-marker { display: none; } .oc-acv__chev { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--oc-acv-muted); transition: transform 0.2s ease; } .oc-acv__chev svg { width: 16px; height: 16px; } .oc-acv__details[open] .oc-acv__chev { transform: rotate(180deg); } /* ---------- CV-Liste ---------- */ .oc-acv__cv { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; } .oc-acv__cv-item { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-top: 1px dashed var(--oc-acv-border); } .oc-acv__cv-item:first-child { border-top: 0; padding-top: 0; } .oc-acv__cv-year { font-size: 0.84rem; font-weight: 600; color: var(--oc-acv-accent); letter-spacing: 0.01em; padding-top: 1px; } .oc-acv__cv-text { display: flex; flex-direction: column; gap: 2px; } .oc-acv__cv-text strong { font-size: 0.94rem; font-weight: 600; color: var(--oc-acv-text); line-height: 1.4; } .oc-acv__cv-text span { font-size: 0.86rem; color: var(--oc-acv-muted); line-height: 1.5; } @media (max-width: 540px) { .oc-acv__cv-item { grid-template-columns: 1fr; gap: 4px; } } /* ---------- Credentials ---------- */ .oc-acv__creds { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; } .oc-acv__cred { display: flex; align-items: flex-start; gap: 10px; } .oc-acv__cred svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--oc-acv-accent); margin-top: 3px; } .oc-acv__cred strong { display: block; font-size: 0.94rem; font-weight: 600; color: var(--oc-acv-text); line-height: 1.4; } .oc-acv__cred span { display: block; font-size: 0.86rem; color: var(--oc-acv-muted); line-height: 1.5; margin-top: 2px; } /* ---------- Quote ---------- */ .oc-acv__quote { margin: 28px 0 0; padding: 22px 24px; background: var(--oc-acv-card); border-left: 2px solid var(--oc-acv-accent); border-radius: 4px; } .oc-acv__quote blockquote { margin: 0; display: flex; gap: 12px; align-items: flex-start; } .oc-acv__quote-mark { width: 20px; height: 16px; flex-shrink: 0; color: var(--oc-acv-accent); margin-top: 4px; } .oc-acv__quote blockquote p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--oc-acv-text); font-style: italic; } .oc-acv__quote figcaption { margin: 10px 0 0 32px; font-size: 0.85rem; color: var(--oc-acv-muted); font-weight: 500; } /* === Section: arzt-note === */ .oc-arztnote { background: var(--oc-an-bg); color: var(--oc-an-text); padding: 64px 20px; } @media (min-width: 768px) { .oc-arztnote { padding: 96px 40px; } } .oc-arztnote__inner { max-width: 1200px; margin: 0 auto; } .oc-arztnote__card { display: grid; grid-template-columns: 1fr; background: var(--oc-an-card-bg); border-radius: 16px; overflow: hidden; border: 1px solid var(--oc-an-border); box-shadow: 0 10px 40px -20px rgba(0,0,0,0.12); } .oc-arztnote--dark .oc-arztnote__card { box-shadow: 0 24px 60px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); } @media (min-width: 900px) { .oc-arztnote__card { grid-template-columns: 5fr 7fr; } .oc-arztnote__card--right { grid-template-columns: 7fr 5fr; } .oc-arztnote__card--right .oc-arztnote__media { order: 2; } .oc-arztnote__card--right .oc-arztnote__body { order: 1; } } .oc-arztnote__media { position: relative; aspect-ratio: 4 / 5; background: #1a1a1a; overflow: hidden; } @media (min-width: 900px) { .oc-arztnote__media { aspect-ratio: auto; min-height: 480px; } } .oc-arztnote__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-arztnote__img--placeholder { background: linear-gradient(135deg, #c9a97a, var(--oc-an-accent)); } .oc-arztnote__badge { position: absolute; bottom: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255,255,255,0.95); color: var(--oc-an-accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,0.14); } .oc-arztnote__badge svg { width: 14px; height: 14px; } .oc-arztnote__body { padding: 40px 28px 36px; display: flex; flex-direction: column; justify-content: center; gap: 22px; } @media (min-width: 900px) { .oc-arztnote__body { padding: 56px 56px 52px; } } .oc-arztnote__eyebrow { display: inline-block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-an-accent); font-weight: 600; } .oc-arztnote__quote { position: relative; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.4; letter-spacing: -0.01em; font-weight: 500; margin: 0; color: var(--oc-an-text); } .oc-arztnote__quote-mark { color: var(--oc-an-accent); font-weight: 600; } .oc-arztnote__body-text { font-size: 0.98rem; line-height: 1.6; color: var(--oc-an-muted); } .oc-arztnote__body-text p { margin: 0 0 10px; } .oc-arztnote__body-text p:last-child { margin-bottom: 0; } .oc-arztnote__sig { display: flex; align-items: center; gap: 16px; padding-top: 14px; border-top: 1px solid var(--oc-an-border); margin-top: 4px; } .oc-arztnote__sig-img { height: 42px; width: auto; opacity: 0.85; } .oc-arztnote__sig-meta { display: flex; flex-direction: column; gap: 2px; } .oc-arztnote__doctor { font-size: 1rem; font-weight: 600; color: var(--oc-an-text); letter-spacing: -0.005em; } .oc-arztnote__role { font-size: 0.82rem; color: var(--oc-an-muted); letter-spacing: 0.01em; } /* === Section: arztberatung-buchen === */ .oc-ab { background: var(--oc-ab-bg); color: var(--oc-ab-text); padding: 72px 20px 88px; scroll-margin-top: 24px; } @media (min-width: 768px) { .oc-ab { padding: 96px 40px 112px; } } .oc-ab__inner { max-width: 1200px; margin: 0 auto; } /* Header */ .oc-ab__head { max-width: 720px; margin-bottom: 28px; } .oc-ab__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ab-accent); margin-bottom: 14px; font-weight: 600; } .oc-ab__headline { font-size: clamp(1.85rem, 3.6vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; font-weight: 600; } .oc-ab__subline { font-size: clamp(0.98rem, 1.4vw, 1.08rem); line-height: 1.6; color: var(--oc-ab-muted); margin: 0; max-width: 640px; } /* City-Section */ .oc-ab__city-section { margin-bottom: 32px; margin-top: 8px; } .oc-ab__city-label { margin: 0 0 14px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oc-ab-muted); } .oc-ab__city-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .oc-ab__city-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (min-width: 1024px) { .oc-ab__city-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } } .oc-ab__city-card { position: relative; background: var(--oc-ab-card); border: 1px solid var(--oc-ab-border); border-radius: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; overflow: hidden; } .oc-ab__city-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -16px rgba(0,0,0,0.14); border-color: rgba(28, 131, 148, 0.4); } .oc-ab__city-card--clinic { border-color: rgba(28, 131, 148, 0.32); } .oc-ab__city-card--clinic::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--oc-ab-accent); z-index: 1; } /* Active state */ .oc-ab__city-card.is-active { border-color: var(--oc-ab-accent); box-shadow: 0 0 0 2px var(--oc-ab-accent), 0 14px 32px -14px rgba(28,131,148,0.32); transform: translateY(-2px); } .oc-ab__city-card.is-active::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background: var(--oc-ab-accent); border-radius: 2px; z-index: 2; display: none; } @media (min-width: 1024px) { .oc-ab__city-card.is-active::after { display: block; } } .oc-ab__city-btn { appearance: none; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; padding: 0; display: flex; flex-direction: column; gap: 0; } .oc-ab__city-btn:focus-visible { outline: 2px solid var(--oc-ab-accent); outline-offset: -3px; border-radius: 14px; } /* Standort-Foto oben in der Card */ .oc-ab__city-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #d4dee0, #a4b5b8); } .oc-ab__city-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.45s ease; } .oc-ab__city-card:hover .oc-ab__city-photo-img { transform: scale(1.04); } /* Bei Klinik-Card: teal Top-Stripe würde sonst vom Foto verdeckt werden — leicht über das Foto legen */ .oc-ab__city-card--clinic .oc-ab__city-photo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--oc-ab-accent); z-index: 2; } .oc-ab__city-card--clinic::before { display: none; } .oc-ab__city-content { padding: 18px 22px 16px; display: flex; flex-direction: column; gap: 10px; } .oc-ab__city-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .oc-ab__pin { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oc-ab-accent); background: var(--oc-ab-accent-soft); border: 1px solid rgba(28, 131, 148, 0.2); padding: 5px 10px; border-radius: 999px; } .oc-ab__pin svg { width: 11px; height: 11px; } .oc-ab__pin--clinic { color: #fff; background: var(--oc-ab-accent); border-color: var(--oc-ab-accent); } .oc-ab__rhythm { font-size: 0.74rem; color: var(--oc-ab-muted); letter-spacing: 0.01em; } .oc-ab__city-name { font-size: clamp(1.3rem, 2vw, 1.55rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin: 4px 0 0; color: var(--oc-ab-text); } .oc-ab__city-venue { margin: -4px 0 4px; font-size: 0.84rem; color: var(--oc-ab-muted); line-height: 1.4; } .oc-ab__city-meta { margin: 4px 0 6px; padding: 10px 0; border-top: 1px solid var(--oc-ab-border); border-bottom: 1px solid var(--oc-ab-border); display: flex; flex-direction: column; gap: 6px; } .oc-ab__city-meta-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: baseline; } .oc-ab__city-meta-row dt { font-size: 0.66rem; font-weight: 600; color: var(--oc-ab-muted); letter-spacing: 0.04em; text-transform: uppercase; margin: 0; } .oc-ab__city-meta-row dd { font-size: 0.82rem; color: var(--oc-ab-text); margin: 0; line-height: 1.4; } .oc-ab__city-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.86rem; font-weight: 600; color: var(--oc-ab-accent); transition: gap 0.15s ease; } .oc-ab__city-card:hover .oc-ab__city-cta { gap: 12px; } .oc-ab__city-cta svg { width: 14px; height: 14px; flex-shrink: 0; transform: rotate(-90deg); } .oc-ab__city-cta-active { display: none; } .oc-ab__city-card.is-active .oc-ab__city-cta-default { display: none; } .oc-ab__city-card.is-active .oc-ab__city-cta-active { display: inline; } .oc-ab__city-card.is-active .oc-ab__city-cta svg { transform: rotate(180deg); } .oc-ab__city-maps { display: inline-flex; align-items: center; gap: 6px; margin: 0 22px 16px; font-size: 0.78rem; font-weight: 600; color: var(--oc-ab-muted); text-decoration: none; transition: color 0.15s ease; } .oc-ab__city-maps:hover { color: var(--oc-ab-accent); text-decoration: underline; } .oc-ab__city-maps svg { width: 12px; height: 12px; } .oc-ab__travel-note { margin: 18px 0 0; padding: 14px 18px; background: var(--oc-ab-accent-soft); border: 1px solid rgba(28, 131, 148, 0.18); border-radius: 10px; font-size: 0.88rem; line-height: 1.55; color: var(--oc-ab-text); display: flex; align-items: flex-start; gap: 10px; } .oc-ab__travel-note svg { width: 16px; height: 16px; color: var(--oc-ab-accent); flex-shrink: 0; margin-top: 3px; } .oc-ab__travel-note-text { flex: 1; min-width: 0; } .oc-ab__travel-note-text > :first-child { margin-top: 0; } .oc-ab__travel-note-text > :last-child { margin-bottom: 0; } /* Panels */ .oc-ab__panel[hidden] { display: none; } .oc-ab__panel { display: block; animation: oc-ab-fade-in 0.3s ease; } @keyframes oc-ab-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .oc-ab__deep-anchor { height: 1px; margin-top: -1px; visibility: hidden; } .oc-ab__panel-head { background: var(--oc-ab-card); border: 1px solid var(--oc-ab-border); border-top: 3px solid var(--oc-ab-accent); border-radius: 8px 8px 0 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .oc-ab__panel-arrow { font-size: 1.1rem; color: var(--oc-ab-accent); line-height: 1; margin-bottom: 4px; } .oc-ab__panel-venue { display: flex; flex-direction: column; gap: 2px; } .oc-ab__panel-venue-name { font-size: 1rem; font-weight: 600; color: var(--oc-ab-text); letter-spacing: -0.005em; } .oc-ab__panel-venue-addr { font-size: 0.84rem; color: var(--oc-ab-muted); } /* Inline-Pricing-Strip im Panel-Head — nahe am Buchungsmoment, nicht prominent oben */ .oc-ab__pricing-strip { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--oc-ab-border); display: flex; flex-wrap: wrap; gap: 8px 18px; } .oc-ab__pricing-strip li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--oc-ab-muted); letter-spacing: 0.005em; line-height: 1.3; } .oc-ab__pricing-strip svg { width: 13px; height: 13px; color: var(--oc-ab-accent); flex-shrink: 0; } /* Iframe-Wrap */ .oc-ab__iframe-wrap { background: var(--oc-ab-soft); border: 1px solid var(--oc-ab-border); border-top: 0; border-radius: 0 0 10px 10px; padding: 18px; display: flex; justify-content: center; min-height: 940px; position: relative; } .oc-ab__iframe { border: 0; background: #fff; width: 100%; max-width: 400px; height: 900px; border-radius: 4px; position: relative; z-index: 2; } .oc-ab__skeleton { position: absolute; inset: 18px; background: linear-gradient(90deg, #f0efe9 0%, #f8f7f3 50%, #f0efe9 100%); background-size: 200% 100%; animation: oc-ab-shimmer 1.4s ease-in-out infinite; border-radius: 4px; display: flex; align-items: center; justify-content: center; z-index: 1; transition: opacity 0.25s ease; } .oc-ab__skeleton[hidden] { display: flex; opacity: 0; pointer-events: none; } .oc-ab__skeleton-text { font-size: 0.78rem; color: var(--oc-ab-muted); background: rgba(255,255,255,0.85); padding: 6px 12px; border-radius: 100px; border: 1px solid var(--oc-ab-border); } @keyframes oc-ab-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Support-Box (WhatsApp-Off-Ramp) */ .oc-ab__support { margin-top: 36px; padding: 22px 24px; background: var(--oc-ab-soft); border: 1px solid var(--oc-ab-border); border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } @media (min-width: 700px) { .oc-ab__support { flex-direction: row; align-items: center; padding: 22px 26px; gap: 20px; } } .oc-ab__support-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(37, 211, 102, 0.12); color: #25D366; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-ab__support-icon svg { width: 22px; height: 22px; } .oc-ab__support-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; } .oc-ab__support-title { font-size: 0.96rem; font-weight: 600; color: var(--oc-ab-text); letter-spacing: -0.005em; line-height: 1.3; } .oc-ab__support-sub { font-size: 0.84rem; color: var(--oc-ab-muted); line-height: 1.5; } .oc-ab__support-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; font-size: 0.92rem; font-weight: 600; color: #fff; background: #25D366; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 22px -10px rgba(37, 211, 102, 0.55); transition: background 0.15s, transform 0.15s, box-shadow 0.15s; flex-shrink: 0; align-self: stretch; justify-content: center; } @media (min-width: 700px) { .oc-ab__support-cta { align-self: auto; } } .oc-ab__support-cta:hover { background: #1ebe5b; transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.65); } .oc-ab__support-cta svg { width: 16px; height: 16px; flex-shrink: 0; } /* === Section: arztberatung-care-manager === */ .oc-cmtool { --cmt-accent: #1c8394; --cmt-accent-soft: rgba(28, 131, 148, 0.08); --cmt-text: #1a1a1a; --cmt-muted: #5c5c5c; --cmt-bg: #ffffff; --cmt-soft: #fafaf7; --cmt-beige: #f6f5f0; --cmt-border: #e5e5e5; --cmt-warn: #b54836; --cmt-warn-soft: rgba(181, 72, 54, 0.08); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; color: var(--cmt-text); background: var(--cmt-bg); padding: 28px 20px 80px; min-height: 100vh; -webkit-font-smoothing: antialiased; line-height: 1.55; } .oc-cmtool .oc-cmtool__inner { max-width: 880px; margin: 0 auto; } /* Header */ .oc-cmtool .oc-cmtool__head { padding-bottom: 20px; border-bottom: 1px solid var(--cmt-border); } .oc-cmtool .oc-cmtool__badge-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .oc-cmtool .oc-cmtool__badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cmt-warn); background: var(--cmt-warn-soft); padding: 4px 10px; border-radius: 100px; } .oc-cmtool .oc-cmtool__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cmt-warn); animation: oc-cmt-pulse 2s ease-in-out infinite; } @keyframes oc-cmt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .oc-cmtool .oc-cmtool__head-meta { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cmt-muted); } .oc-cmtool .oc-cmtool__title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; margin: 0 0 6px; } .oc-cmtool .oc-cmtool__sub { font-size: 14px; color: var(--cmt-muted); margin: 0; max-width: 60ch; } /* Sticky tabs */ .oc-cmtool .oc-cmtool__tabs { position: sticky; top: 0; z-index: 10; background: var(--cmt-bg); padding: 16px 0 14px; border-bottom: 1px solid var(--cmt-border); margin-bottom: 28px; } .oc-cmtool .oc-cmtool__tablist { display: grid; grid-template-columns: repeat({{ cities.size }}, minmax(0, 1fr)); gap: 8px; } .oc-cmtool .oc-cmtool__tab { appearance: none; border: 1px solid var(--cmt-border); background: var(--cmt-bg); color: var(--cmt-text); font-family: inherit !important; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; padding: 12px 14px; border-radius: 8px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; } .oc-cmtool .oc-cmtool__tab:hover { border-color: var(--cmt-accent); color: var(--cmt-accent); } .oc-cmtool .oc-cmtool__tab:focus-visible { outline: 2px solid var(--cmt-accent); outline-offset: 2px; } .oc-cmtool .oc-cmtool__tab[aria-selected="true"] { background: var(--cmt-accent); border-color: var(--cmt-accent); color: #fff; } .oc-cmtool .oc-cmtool__tab[aria-selected="true"]:hover { color: #fff; } .oc-cmtool .oc-cmtool__tab-key { font-size: 10px; font-weight: 600; opacity: 0.6; border: 1px solid currentColor; border-radius: 3px; padding: 2px 5px 1px; line-height: 1; font-variant-numeric: tabular-nums; } .oc-cmtool .oc-cmtool__hint { margin: 10px 0 0; font-size: 11px; color: var(--cmt-muted); text-align: right; letter-spacing: 0.01em; } .oc-cmtool .oc-cmtool__hint kbd { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "SF Mono", "Menlo", monospace !important; font-size: 10px; background: var(--cmt-soft); border: 1px solid var(--cmt-border); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; margin: 0 1px; color: var(--cmt-text); } /* Panels */ .oc-cmtool .oc-cmtool__panel[hidden] { display: none; } .oc-cmtool .oc-cmtool__panel { display: block; } /* Address strip */ .oc-cmtool .oc-cmtool__address { background: var(--cmt-soft); border: 1px solid var(--cmt-border); border-left: 3px solid var(--cmt-accent); border-radius: 6px; padding: 14px 18px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .oc-cmtool .oc-cmtool__address-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .oc-cmtool .oc-cmtool__address-venue { font-size: 13px; font-weight: 700; letter-spacing: -0.005em; } .oc-cmtool .oc-cmtool__address-line { font-size: 13px; color: var(--cmt-muted); } .oc-cmtool .oc-cmtool__maps { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cmt-accent); text-decoration: none; border: 1px solid var(--cmt-accent); padding: 7px 12px; border-radius: 6px; transition: background 0.15s, color 0.15s; white-space: nowrap; } .oc-cmtool .oc-cmtool__maps:hover { background: var(--cmt-accent); color: #fff; } .oc-cmtool .oc-cmtool__maps svg { width: 13px; height: 13px; } /* Iframe wrapper */ .oc-cmtool .oc-cmtool__iframe-wrap { background: var(--cmt-soft); border: 1px solid var(--cmt-border); border-radius: 10px; padding: 16px; display: flex; justify-content: center; min-height: 940px; position: relative; } .oc-cmtool .oc-cmtool__iframe { border: 0; background: #fff; width: 100%; max-width: 400px; height: 900px; border-radius: 4px; position: relative; z-index: 2; } .oc-cmtool .oc-cmtool__skeleton { position: absolute; inset: 16px; background: linear-gradient(90deg, #f0efe9 0%, #f8f7f3 50%, #f0efe9 100%); background-size: 200% 100%; animation: oc-cmt-shimmer 1.4s ease-in-out infinite; border-radius: 4px; display: flex; align-items: center; justify-content: center; z-index: 1; transition: opacity 0.25s ease; } .oc-cmtool .oc-cmtool__skeleton[hidden] { display: flex; opacity: 0; pointer-events: none; } .oc-cmtool .oc-cmtool__skeleton-text { font-size: 12px; color: var(--cmt-muted); background: rgba(255,255,255,0.85); padding: 6px 12px; border-radius: 100px; border: 1px solid var(--cmt-border); } @keyframes oc-cmt-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Footer */ .oc-cmtool .oc-cmtool__footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cmt-border); } .oc-cmtool .oc-cmtool__footer-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cmt-muted); margin: 0 0 12px; } .oc-cmtool .oc-cmtool__footer-links { display: flex; flex-wrap: wrap; gap: 10px; } .oc-cmtool .oc-cmtool__fl { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--cmt-text); text-decoration: none; background: var(--cmt-soft); border: 1px solid var(--cmt-border); padding: 10px 14px; border-radius: 8px; transition: border-color 0.15s, color 0.15s, background 0.15s; } .oc-cmtool .oc-cmtool__fl:hover { border-color: var(--cmt-accent); color: var(--cmt-accent); background: #fff; } .oc-cmtool .oc-cmtool__fl svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--cmt-accent); } .oc-cmtool .oc-cmtool__fl-meta { font-weight: 500; color: var(--cmt-muted); font-size: 12px; font-variant-numeric: tabular-nums; } /* Mobile */ @media (max-width: 640px) { .oc-cmtool { padding: 20px 14px 60px; } .oc-cmtool .oc-cmtool__tablist { grid-template-columns: repeat(2, 1fr); } .oc-cmtool .oc-cmtool__tab-key { display: none; } .oc-cmtool .oc-cmtool__hint { display: none; } .oc-cmtool .oc-cmtool__address { flex-direction: column; align-items: stretch; } .oc-cmtool .oc-cmtool__maps { align-self: flex-start; } .oc-cmtool .oc-cmtool__fl-meta { display: none; } } /* === Section: arztberatung-hero === */ .oc-ah { background: var(--oc-ah-bg); color: var(--oc-ah-text); padding: 96px 20px 72px; position: relative; overflow: hidden; } @media (min-width: 768px) { .oc-ah { padding: 128px 40px 96px; } } .oc-ah__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } @media (min-width: 1024px) { .oc-ah__inner { grid-template-columns: 1.05fr 1fr; gap: 80px; } } .oc-ah__content { max-width: 620px; } .oc-ah__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ah-accent); margin-bottom: 16px; font-weight: 600; } .oc-ah__headline { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 600; } .oc-ah__subline { font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.6; color: var(--oc-ah-muted); margin: 0 0 30px; max-width: 560px; } .oc-ah__meta { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 32px; } .oc-ah__meta-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--oc-ah-soft); border: 1px solid var(--oc-ah-border); border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--oc-ah-text); letter-spacing: 0.01em; } .oc-ah__meta-item svg { width: 15px; height: 15px; color: var(--oc-ah-accent); flex-shrink: 0; } .oc-ah__meta-item--price { background: rgba(28, 131, 148, 0.06); border-color: rgba(28, 131, 148, 0.22); color: var(--oc-ah-accent); font-weight: 600; } .oc-ah__scroll { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: var(--oc-ah-accent); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: 4px; box-shadow: 0 8px 24px -6px rgba(28, 131, 148, 0.36); transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-ah__scroll:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-ah__scroll svg { width: 16px; height: 16px; } .oc-ah__tp { margin-top: 22px; min-height: 24px; } .oc-ah__signals { margin: 14px 0 0; font-size: 0.84rem; color: var(--oc-ah-muted); line-height: 1.5; letter-spacing: 0.01em; } /* ---------- Media (analog klinik-hero — clean Foto, Pin-Caption-Pill) ---------- */ .oc-ah__media { width: 100%; position: relative; } .oc-ah__media-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--oc-ah-soft); box-shadow: 0 24px 64px -32px rgba(0,0,0,0.22); } @media (min-width: 1024px) { .oc-ah__media-frame { aspect-ratio: 5 / 6; } } .oc-ah__img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .oc-ah__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-ah-accent)); } .oc-ah__caption { position: absolute; bottom: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(15, 15, 15, 0.72); color: #fff; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .oc-ah__caption svg { width: 14px; height: 14px; color: var(--oc-ah-accent); flex-shrink: 0; } /* ---------- Stats unter dem Foto (optional, dezent) ---------- */ .oc-ah__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; margin-top: 22px; padding: 16px 4px 0; border-top: 1px solid var(--oc-ah-border); } .oc-ah__stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .oc-ah__stat-num { font-size: clamp(1.1rem, 1.8vw, 1.32rem); font-weight: 700; color: var(--oc-ah-accent); letter-spacing: -0.015em; line-height: 1.1; font-variant-numeric: tabular-nums; } .oc-ah__stat-label { font-size: 0.74rem; color: var(--oc-ah-muted); letter-spacing: 0.01em; line-height: 1.3; } /* === Section: arztberatung-stimmen === */ .oc-as { background: var(--oc-as-bg); color: var(--oc-as-text); padding: 72px 20px 88px; } @media (min-width: 768px) { .oc-as { padding: 104px 40px 112px; } } .oc-as__inner { max-width: 1200px; margin: 0 auto; } /* Header */ .oc-as__head { max-width: 720px; margin-bottom: 44px; } .oc-as__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-as-accent); margin-bottom: 14px; font-weight: 600; } .oc-as__headline { font-size: clamp(1.75rem, 3.6vw, 2.4rem); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 600; } .oc-as__subline { font-size: clamp(0.98rem, 1.4vw, 1.06rem); line-height: 1.6; color: var(--oc-as-muted); margin: 0; max-width: 640px; } /* Grid */ .oc-as__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 640px) { .oc-as__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (min-width: 1024px) { .oc-as__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } /* Card */ .oc-as__card { background: var(--oc-as-card); border: 1px solid var(--oc-as-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .oc-as__card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0,0,0,0.18); border-color: rgba(28, 131, 148, 0.22); } /* Photo */ .oc-as__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(135deg, #d4dee0, #a4b5b8); } .oc-as__photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transition: transform 0.4s ease; } .oc-as__card:hover .oc-as__photo-img { transform: scale(1.03); } .oc-as__photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); } .oc-as__photo-placeholder svg { width: 30%; height: 30%; } .oc-as__photo-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 30%; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.85)); pointer-events: none; } /* Body */ .oc-as__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; } .oc-as__quote-mark { width: 24px; height: 24px; color: var(--oc-as-accent); opacity: 0.85; margin-bottom: -6px; } .oc-as__quote { margin: 0; font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.55; color: var(--oc-as-text); letter-spacing: -0.005em; font-weight: 500; flex-grow: 1; } .oc-as__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--oc-as-border); display: flex; flex-direction: column; gap: 2px; } .oc-as__name { font-size: 0.92rem; font-weight: 600; color: var(--oc-as-text); letter-spacing: -0.005em; } .oc-as__detail { font-size: 0.8rem; color: var(--oc-as-muted); letter-spacing: 0.01em; line-height: 1.4; } /* Footer link */ .oc-as__footer { margin-top: 36px; text-align: center; } .oc-as__footer-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--oc-as-accent); text-decoration: none; transition: gap 0.2s ease; } .oc-as__footer-link:hover { gap: 12px; } .oc-as__footer-link svg { width: 14px; height: 14px; } /* === Section: arztberatung-wert === */ .oc-aw { background: var(--oc-aw-bg); color: var(--oc-aw-text); padding: 72px 20px 80px; } @media (min-width: 768px) { .oc-aw { padding: 104px 40px 112px; } } .oc-aw__inner { max-width: 1200px; margin: 0 auto; } /* ---------- Header ---------- */ .oc-aw__head { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; } @media (min-width: 900px) { .oc-aw__head { grid-template-columns: 1fr auto; align-items: end; gap: 56px; } } .oc-aw__head-text { max-width: 720px; } .oc-aw__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-aw-accent); margin-bottom: 14px; font-weight: 600; } .oc-aw__headline { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 600; } .oc-aw__subline { font-size: clamp(0.98rem, 1.4vw, 1.08rem); line-height: 1.6; color: var(--oc-aw-muted); margin: 0; max-width: 620px; } .oc-aw__head-meta { display: flex; align-items: baseline; gap: 8px; padding: 14px 18px; background: var(--oc-aw-card); border: 1px solid var(--oc-aw-border); border-left: 3px solid var(--oc-aw-accent); border-radius: 6px; flex-shrink: 0; align-self: start; } @media (min-width: 900px) { .oc-aw__head-meta { align-self: end; } } .oc-aw__head-meta-num { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 700; color: var(--oc-aw-accent); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .oc-aw__head-meta-label { font-size: 0.78rem; color: var(--oc-aw-muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } /* ---------- Cards: Mobile horizontal scroll-snap, Tablet+Desktop Grid ---------- */ .oc-aw__grid { list-style: none; margin: 0; padding: 0; } /* Mobile: horizontaler Scroll-Carousel mit Snap */ @media (max-width: 639px) { .oc-aw__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; gap: 12px; margin: 0 -20px; padding: 4px 20px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(28, 131, 148, 0.3) transparent; } .oc-aw__grid::-webkit-scrollbar { height: 4px; } .oc-aw__grid::-webkit-scrollbar-thumb { background: rgba(28, 131, 148, 0.3); border-radius: 2px; } } /* Tablet+Desktop: Grid */ @media (min-width: 640px) { .oc-aw__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (min-width: 1024px) { .oc-aw__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } } .oc-aw__card { background: var(--oc-aw-card); border: 1px solid var(--oc-aw-border); border-radius: 14px; padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } @media (min-width: 640px) { .oc-aw__card { padding: 28px 26px 26px; } } /* Mobile-Carousel-Cards: feste breite + snap */ @media (max-width: 639px) { .oc-aw__card { flex: 0 0 82%; scroll-snap-align: start; scroll-snap-stop: always; } } .oc-aw__card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(0,0,0,0.12); border-color: rgba(28, 131, 148, 0.24); } /* Featured-Card: dunkler visueller Akzent zwischen den hellen Cards. User-Feedback 2026-04-30: „auf Mobile sind das sehr viele flache, weiße Elemente — irgendwo etwas Dunkles einbauen". Diese Card hebt die Hauptbotschaft (Person + Zeit) visuell hervor. */ .oc-aw__card--featured { background: #0f0f0f; border-color: #0f0f0f; color: #ffffff; } .oc-aw__card--featured .oc-aw__card-icon { background: rgba(28, 131, 148, 0.22); color: #4eb8c9; } .oc-aw__card--featured .oc-aw__card-kicker { color: #4eb8c9; } .oc-aw__card--featured .oc-aw__card-title { color: #ffffff; } .oc-aw__card--featured .oc-aw__card-body { color: rgba(255, 255, 255, 0.74); } .oc-aw__card--featured .oc-aw__card-detail { color: #ffffff; border-top-color: rgba(255, 255, 255, 0.14); } .oc-aw__card--featured .oc-aw__card-detail-arrow { color: #4eb8c9; } .oc-aw__card--featured:hover { border-color: rgba(78, 184, 201, 0.4); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.45); } /* Mobile-Hinweis: „weiter blättern" */ .oc-aw__swipe-hint { display: none; margin: 0 -20px 0; padding: 0 20px 8px; font-size: 0.74rem; color: var(--oc-aw-muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 8px; opacity: 0.7; } @media (min-width: 640px) { .oc-aw__swipe-hint { display: none; } } @media (max-width: 639px) { .oc-aw__swipe-hint { display: flex; } .oc-aw__swipe-hint svg { width: 14px; height: 14px; } } .oc-aw__card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--oc-aw-accent-soft); color: var(--oc-aw-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .oc-aw__card-icon svg { width: 22px; height: 22px; } .oc-aw__card-kicker { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-aw-accent); font-weight: 700; } .oc-aw__card-title { font-size: 1.08rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0; font-weight: 600; color: var(--oc-aw-text); } .oc-aw__card-body { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--oc-aw-muted); } .oc-aw__card-detail { margin: 4px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--oc-aw-text); padding-top: 12px; border-top: 1px dashed var(--oc-aw-border); display: flex; gap: 8px; align-items: flex-start; } .oc-aw__card-detail-arrow { color: var(--oc-aw-accent); font-weight: 700; flex-shrink: 0; line-height: 1.5; } /* ---------- Footer Note ---------- */ .oc-aw__footer { margin-top: 48px; background: var(--oc-aw-card); border-radius: 12px; padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--oc-aw-border); position: relative; overflow: hidden; } .oc-aw__footer-stripe { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--oc-aw-accent); } .oc-aw__footer-text { margin: 0 0 0 6px; font-size: 0.95rem; line-height: 1.6; color: var(--oc-aw-text); max-width: 78ch; } .oc-aw__footer-text strong { color: var(--oc-aw-accent); font-weight: 600; } .oc-aw__footer-text p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } /* === Section: clinic-gallery === */ .oc-clinic { background: var(--oc-c-bg); color: var(--oc-c-text); padding: 72px 20px; } @media (min-width: 768px) { .oc-clinic { padding: 112px 40px; } } .oc-clinic__inner { max-width: 1280px; margin: 0 auto; } .oc-clinic__header { max-width: 720px; margin: 0 0 48px; } .oc-clinic__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-c-accent); margin-bottom: 12px; font-weight: 600; } .oc-clinic__headline { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; font-weight: 600; } .oc-clinic__sub { font-size: 1rem; line-height: 1.55; color: var(--oc-c-muted); margin: 0; max-width: 640px; } .oc-clinic__grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 200px; gap: 12px; } @media (min-width: 600px) { .oc-clinic__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; gap: 14px; } } @media (min-width: 1024px) { .oc-clinic__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 16px; } } .oc-clinic__tile { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: #f0f0f0; grid-column: span 1; grid-row: span 1; } .oc-clinic__tile--wide { grid-column: span 2; } .oc-clinic__tile--tall { grid-row: span 2; } .oc-clinic__tile--featured { grid-column: span 2; grid-row: span 2; } @media (max-width: 599px) { .oc-clinic__tile--wide, .oc-clinic__tile--tall, .oc-clinic__tile--featured { grid-column: span 1; grid-row: span 1; } .oc-clinic__tile--featured { grid-row: span 2; } } .oc-clinic__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .oc-clinic__img--placeholder { background: linear-gradient(135deg, #c9a97a, var(--oc-c-accent)); } .oc-clinic__tile:hover .oc-clinic__img { transform: scale(1.04); } .oc-clinic__caption { position: absolute; bottom: 14px; left: 14px; padding: 6px 12px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .oc-clinic__cities { margin-top: 32px; padding: 24px 28px; background: var(--oc-c-cities-bg); border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; } .oc-clinic__cities-label { font-size: 0.85rem; color: var(--oc-c-muted); font-weight: 500; letter-spacing: 0.01em; flex-shrink: 0; } .oc-clinic__city { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #e0ddd0; font-size: 0.9rem; font-weight: 500; color: var(--oc-c-text); white-space: nowrap; } .oc-clinic__city--main { background: var(--oc-c-accent); color: #fff; border-color: transparent; } .oc-clinic__city svg { width: 14px; height: 14px; flex-shrink: 0; } .oc-clinic__city-sub { font-size: 0.75rem; opacity: 0.75; font-weight: 400; } /* === Section: dr-kour-hero === */ .oc-dkh { background: var(--oc-dkh-bg); color: var(--oc-dkh-text); padding: 64px 20px 56px; } @media (min-width: 768px) { .oc-dkh { padding: 96px 40px 80px; } } .oc-dkh__inner { max-width: 1280px; margin: 0 auto; } .oc-dkh__split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .oc-dkh__split { grid-template-columns: 1fr 1fr; gap: 72px; } } .oc-dkh__body { max-width: 560px; } .oc-dkh__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-dkh-accent); font-weight: 600; margin-bottom: 16px; } .oc-dkh__headline { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 600; } .oc-dkh__sub { font-size: 1.05rem; line-height: 1.6; color: var(--oc-dkh-muted); margin: 0 0 28px; } .oc-dkh__pills { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; } .oc-dkh__pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 500; background: var(--oc-dkh-soft); color: var(--oc-dkh-text); border: 1px solid var(--oc-dkh-border); letter-spacing: 0.005em; } .oc-dkh__pill--hl { background: color-mix(in srgb, var(--oc-dkh-accent) 12%, var(--oc-dkh-soft)); color: var(--oc-dkh-accent); border-color: color-mix(in srgb, var(--oc-dkh-accent) 28%, transparent); font-weight: 600; } .oc-dkh__ctas { display: flex; flex-wrap: wrap; gap: 14px; } .oc-dkh__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: 4px; transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-dkh__cta svg { width: 18px; height: 18px; } .oc-dkh__cta--primary { background: var(--oc-dkh-accent); color: #fff; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--oc-dkh-accent) 70%, transparent); } .oc-dkh__cta--primary:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-dkh__cta--ghost { background: #fff; color: var(--oc-dkh-accent); border: 1.5px solid var(--oc-dkh-accent); } .oc-dkh__cta--ghost:hover { background: var(--oc-dkh-soft); } /* ---------- Media ---------- */ .oc-dkh__media-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--oc-dkh-soft); box-shadow: 0 28px 64px -36px rgba(0,0,0,0.28); } @media (min-width: 1024px) { .oc-dkh__media-frame { aspect-ratio: 5 / 6; } } .oc-dkh__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-dkh__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-dkh-accent)); } .oc-dkh__caption { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(15,15,15,0.72); color: #fff; border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: calc(100% - 36px); } .oc-dkh__caption-icon { width: 16px; height: 16px; color: var(--oc-dkh-accent); flex-shrink: 0; } .oc-dkh__caption-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .oc-dkh__caption-text strong { font-size: 0.88rem; font-weight: 600; letter-spacing: 0.005em; } .oc-dkh__caption-text span { font-size: 0.72rem; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; } /* ---------- Stats ---------- */ .oc-dkh__stats { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--oc-dkh-border); display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (min-width: 768px) { .oc-dkh__stats { grid-template-columns: repeat(4, 1fr); gap: 32px; } } .oc-dkh__stat { display: flex; flex-direction: column; gap: 4px; } .oc-dkh__stat-value { font-size: clamp(1.4rem, 2.4vw, 1.7rem); font-weight: 600; color: var(--oc-dkh-text); letter-spacing: -0.01em; line-height: 1.15; } .oc-dkh__stat-label { font-size: 0.84rem; line-height: 1.45; color: var(--oc-dkh-muted); } /* === Section: dr-kour-personal === */ .oc-dkn { background: var(--oc-dkn-bg); color: var(--oc-dkn-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-dkn { padding: 112px 40px; } } .oc-dkn__inner { max-width: 1180px; margin: 0 auto; } .oc-dkn__split { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; } @media (min-width: 1024px) { .oc-dkn__split { grid-template-columns: 0.85fr 1fr; gap: 64px; } .oc-dkn__split--reverse { grid-template-columns: 1fr 0.85fr; } .oc-dkn__split--reverse .oc-dkn__media { order: 2; } } .oc-dkn__photo { aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--oc-dkn-soft); box-shadow: 0 24px 56px -32px rgba(0,0,0,0.22); } .oc-dkn__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-dkn__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-dkn-accent)); } .oc-dkn__caption { margin: 12px 4px 0; font-size: 0.82rem; line-height: 1.5; color: var(--oc-dkn-muted); font-style: italic; } .oc-dkn__body { max-width: 540px; } .oc-dkn__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-dkn-accent); font-weight: 600; margin-bottom: 14px; } .oc-dkn__headline { font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-dkn__text { font-size: 1rem; line-height: 1.65; color: var(--oc-dkn-text); } .oc-dkn__text p { margin: 0 0 14px; } .oc-dkn__text p:last-child { margin-bottom: 0; } .oc-dkn__bridge { margin: 22px 0 0; padding: 16px 18px; background: var(--oc-dkn-soft); border-left: 2px solid var(--oc-dkn-accent); border-radius: 4px; font-size: 0.96rem; line-height: 1.55; color: var(--oc-dkn-text); font-style: italic; } /* === Section: dr-kour-philosophie === */ .oc-dkp { background: var(--oc-dkp-bg); color: var(--oc-dkp-text); padding: 96px 20px; } @media (min-width: 768px) { .oc-dkp { padding: 128px 40px; } } .oc-dkp__inner { max-width: 1240px; margin: 0 auto; } .oc-dkp__head { max-width: 680px; margin: 0 auto 56px; text-align: center; } .oc-dkp__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-dkp-accent); font-weight: 600; margin-bottom: 14px; } .oc-dkp__headline { font-size: clamp(1.9rem, 3.8vw, 2.6rem); line-height: 1.16; letter-spacing: -0.015em; margin: 0 0 16px; font-weight: 600; } .oc-dkp__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-dkp-muted); margin: 0; } .oc-dkp__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 700px) { .oc-dkp__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (min-width: 1024px) { .oc-dkp__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); } .oc-dkp__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .oc-dkp__grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); } } .oc-dkp__card { position: relative; background: var(--oc-dkp-card); border: 1px solid var(--oc-dkp-border); border-radius: 14px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s ease, border-color 0.2s ease; } .oc-dkp__card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--oc-dkp-accent) 38%, var(--oc-dkp-border)); } .oc-dkp__num { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; color: var(--oc-dkp-accent); margin-bottom: 4px; } .oc-dkp__title { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0; color: var(--oc-dkp-text); font-weight: 600; } .oc-dkp__body { font-size: 0.94rem; line-height: 1.6; color: var(--oc-dkp-muted); margin: 0; } .oc-dkp__quote { margin: 8px 0 0; padding: 16px 16px 14px 18px; background: rgba(28, 131, 148, 0.08); border-left: 2px solid var(--oc-dkp-accent); border-radius: 4px; position: relative; } .oc-dkp__quote-mark { position: absolute; top: 12px; right: 14px; width: 18px; height: 14px; color: color-mix(in srgb, var(--oc-dkp-accent) 60%, transparent); } .oc-dkp__quote blockquote { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--oc-dkp-text); font-style: italic; padding-right: 28px; } .oc-dkp__quote figcaption { margin-top: 8px; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--oc-dkp-muted); font-weight: 500; } .oc-dkp__footer { max-width: 720px; margin: 56px auto 0; text-align: center; font-size: 1rem; line-height: 1.6; color: var(--oc-dkp-muted); font-style: italic; } /* === Section: dr-kour-team-technik === */ .oc-dkt { background: var(--oc-dkt-bg); color: var(--oc-dkt-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-dkt { padding: 112px 40px; } } .oc-dkt__inner { max-width: 1240px; margin: 0 auto; } .oc-dkt__head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .oc-dkt__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-dkt-accent); font-weight: 600; margin-bottom: 14px; } .oc-dkt__headline { font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 16px; font-weight: 600; } .oc-dkt__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-dkt-muted); margin: 0; } .oc-dkt__grid { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 900px) { .oc-dkt__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } .oc-dkt__card { background: var(--oc-dkt-card); border: 1px solid var(--oc-dkt-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .oc-dkt__card:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -32px rgba(0,0,0,0.22); } .oc-dkt__photo { aspect-ratio: 16 / 10; overflow: hidden; background: #eee; } .oc-dkt__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .oc-dkt__card:hover .oc-dkt__img { transform: scale(1.03); } .oc-dkt__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-dkt-accent)); } .oc-dkt__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .oc-dkt__kicker { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oc-dkt-accent); } .oc-dkt__title { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0; font-weight: 600; color: var(--oc-dkt-text); } .oc-dkt__copy { font-size: 0.95rem; line-height: 1.6; color: var(--oc-dkt-muted); margin: 0; } .oc-dkt__quote { margin: 6px 0 0; padding: 14px 16px; background: color-mix(in srgb, var(--oc-dkt-accent) 6%, transparent); border-left: 2px solid var(--oc-dkt-accent); border-radius: 4px; } .oc-dkt__quote blockquote { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--oc-dkt-text); font-style: italic; } .oc-dkt__quote figcaption { margin-top: 6px; font-size: 0.78rem; color: var(--oc-dkt-muted); font-weight: 500; letter-spacing: 0.02em; } .oc-dkt__link { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 8px; color: var(--oc-dkt-accent); font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: gap 0.15s ease; } .oc-dkt__link:hover { gap: 12px; } .oc-dkt__link svg { width: 16px; height: 16px; } /* === Section: eignung-filter === */ .oc-eif { --c-bg: #ffffff; --c-text: #1a1a1a; --c-muted: #5c5c5c; --c-accent: #1c8394; --c-border: #ececec; background: var(--c-bg); color: var(--c-text); padding: 80px 20px 96px; border-top: 1px solid var(--c-border); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; } @media (min-width: 768px) { .oc-eif { padding: 112px 40px 128px; } } .oc-eif__inner { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; text-align: center; } @media (min-width: 768px) { .oc-eif__inner { grid-template-columns: auto 1fr; gap: 40px; text-align: left; } } .oc-eif__portrait { width: 120px; height: 120px; border-radius: 999px; overflow: hidden; background: #eee; box-shadow: 0 12px 32px -16px rgba(0,0,0,0.24); margin: 0 auto; flex-shrink: 0; } @media (min-width: 768px) { .oc-eif__portrait { width: 140px; height: 140px; margin: 0; } } .oc-eif__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .oc-eif__quote { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.42; letter-spacing: -0.01em; color: var(--c-text); font-weight: 500; margin: 0 0 18px; } .oc-eif__quote em { font-style: normal; color: var(--c-accent); font-weight: 600; } .oc-eif__attr { font-size: 0.86rem; color: var(--c-muted); } .oc-eif__attr strong { color: var(--c-text); font-weight: 600; } .oc-eif__quote p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } .oc-eif__attr p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } /* === Section: eignung-hero === */ .oc-eih { --c-bg: #ffffff; --c-soft: #fafaf7; --c-text: #1a1a1a; --c-muted: #5c5c5c; --c-accent: #1c8394; --c-border: #ececec; background: var(--c-bg); color: var(--c-text); padding: 96px 20px 48px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; } @media (min-width: 768px) { .oc-eih { padding: 128px 40px 64px; } } .oc-eih__inner { max-width: 760px; margin: 0 auto; } .oc-eih__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 18px; font-weight: 600; } .oc-eih__h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 600; } .oc-eih__sub { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; color: var(--c-muted); max-width: 580px; margin: 0 auto 28px; } .oc-eih__meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-bottom: 28px; } .oc-eih__meta-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--c-soft); border: 1px solid var(--c-border); border-radius: 999px; font-size: 0.82rem; font-weight: 500; color: var(--c-text); } .oc-eih__meta-item svg { width: 14px; height: 14px; color: var(--c-accent); flex-shrink: 0; } .oc-eih__tp { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--c-text); font-size: 0.86rem; } .oc-eih__tp .tp-stars-row { display: inline-flex; gap: 2px; } .oc-eih__tp .tp-star { display: inline-block; width: 18px; height: 18px; background: #00B67A; border-radius: 2px; } .oc-eih__tp .tp-star--partial { background: linear-gradient(to right, #00B67A 70%, #d3d3d3 70%); } .oc-eih__tp .tp-text { font-size: 0.84rem; color: var(--c-muted); } .oc-eih__tp .tp-text strong { color: var(--c-text); font-weight: 700; } .oc-eih__tp .tp-logo-text { font-weight: 700; color: var(--c-text); letter-spacing: -0.01em; font-size: 0.88rem; } .oc-eih__tp:hover { opacity: 0.85; } .oc-eih__cue { display: block; margin: 32px auto 0; width: 1px; height: 32px; background: linear-gradient(to bottom, var(--c-border), transparent); } /* === Section: eignung-quiz === */ .oc-eiq { --c-soft: #fafaf7; --c-border: #ececec; background: var(--c-soft); padding: 24px 16px 64px; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; } @media (min-width: 768px) { .oc-eiq { padding: 32px 40px 96px; } } .oc-eiq__frame { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; box-shadow: 0 24px 64px -32px rgba(0,0,0,0.18); overflow: hidden; } .oc-eiq__embed { width: 100%; min-height: 560px; } .oc-eiq__embed > div { width: 100% !important; height: 560px !important; } @media (max-width: 640px) { .oc-eiq__embed { min-height: 620px; } .oc-eiq__embed > div { height: 620px !important; } } .oc-eiq__note { max-width: 880px; margin: 18px auto 0; text-align: center; font-size: 0.8rem; color: #777; letter-spacing: 0.01em; } /* === Section: erstberatung-ablauf === */ .oc-eab { background: var(--oc-eab-bg); color: var(--oc-eab-text); padding: 56px 20px 64px; } @media (min-width: 768px) { .oc-eab { padding: 72px 40px 80px; } } .oc-eab__inner { max-width: 1080px; margin: 0 auto; } .oc-eab__header { max-width: 640px; margin: 0 auto 32px; text-align: center; } .oc-eab__eyebrow { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-eab-accent); margin-bottom: 8px; font-weight: 600; } .oc-eab__headline { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.25; letter-spacing: -0.005em; margin: 0; font-weight: 600; } .oc-eab__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; counter-reset: step; position: relative; } @media (min-width: 768px) { .oc-eab__steps--2 { grid-template-columns: repeat(2, 1fr); gap: 12px; } .oc-eab__steps--3 { grid-template-columns: repeat(3, 1fr); gap: 12px; } .oc-eab__steps--4 { grid-template-columns: repeat(4, 1fr); gap: 12px; } .oc-eab__steps--5 { grid-template-columns: repeat(5, 1fr); gap: 10px; } } .oc-eab__step { background: var(--oc-eab-card); border: 1px solid var(--oc-eab-border); border-radius: 12px; padding: 16px 18px 18px; counter-increment: step; position: relative; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.2s ease; } .oc-eab__step::before { content: counter(step, decimal-leading-zero); position: absolute; top: 14px; right: 16px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--oc-eab-muted); opacity: 0.5; font-variant-numeric: tabular-nums; } .oc-eab__step:hover { border-color: var(--oc-eab-accent); } .oc-eab__step-min { display: inline-flex; align-items: center; align-self: flex-start; font-size: 0.7rem; font-weight: 700; color: var(--oc-eab-accent); background: rgba(28, 131, 148, 0.1); padding: 3px 9px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; } .oc-eab__step-title { font-size: 0.95rem; line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; margin: 0; color: var(--oc-eab-text); } .oc-eab__step-body { font-size: 0.82rem; line-height: 1.5; color: var(--oc-eab-muted); margin: 0; } .oc-eab__footer { margin: 24px auto 0; max-width: 600px; text-align: center; font-size: 0.84rem; line-height: 1.55; color: var(--oc-eab-muted); } .oc-eab__footer strong { color: var(--oc-eab-text); font-weight: 600; } .oc-eab__footer p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } /* === Section: erstberatung-anti-sales === */ .oc-eas { background: var(--oc-eas-bg); color: var(--oc-eas-text); padding: 56px 20px; } @media (min-width: 768px) { .oc-eas { padding: 80px 40px; } } .oc-eas__inner { max-width: 1080px; margin: 0 auto; } .oc-eas__banner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } @media (min-width: 768px) { .oc-eas__banner { flex-direction: row; align-items: center; text-align: left; gap: 36px; } } .oc-eas__stat { flex-shrink: 0; font-size: clamp(3.6rem, 8vw, 5.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.035em; color: var(--oc-eas-accent); font-variant-numeric: tabular-nums; } .oc-eas__body { display: flex; flex-direction: column; gap: 10px; max-width: 660px; } .oc-eas__statement { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.5; color: var(--oc-eas-text); font-weight: 500; letter-spacing: -0.005em; } .oc-eas__statement strong { color: var(--oc-eas-accent); font-weight: 700; } .oc-eas__attribution { font-size: 0.84rem; color: var(--oc-eas-muted); letter-spacing: 0.02em; font-weight: 500; } .oc-eas__statement p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } /* === Section: erstberatung-buchen === */ @media (min-width: 768px) { #shopify-section-{{ section.id }} .oc-ebu__calendly { height: {{ embed_h_desktop }}px !important; } } .oc-ebu { background: var(--oc-ebu-bg); color: var(--oc-ebu-text); padding: 88px 20px; scroll-margin-top: 24px; } @media (min-width: 768px) { .oc-ebu { padding: 120px 40px; } } .oc-ebu__inner { max-width: 980px; margin: 0 auto; } .oc-ebu__head { text-align: center; margin-bottom: 32px; max-width: 640px; margin-left: auto; margin-right: auto; } .oc-ebu__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-ebu-accent); margin-bottom: 14px; font-weight: 600; } .oc-ebu__headline { font-size: clamp(1.7rem, 3.2vw, 2.2rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; font-weight: 600; } .oc-ebu__sub { font-size: 1rem; line-height: 1.6; color: var(--oc-ebu-muted); margin: 0; } .oc-ebu__trust { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; } .oc-ebu__trust-item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; background: var(--oc-ebu-soft); border: 1px solid var(--oc-ebu-border); border-radius: 999px; font-size: 0.84rem; font-weight: 500; color: var(--oc-ebu-text); } .oc-ebu__trust-item svg { width: 13px; height: 13px; color: var(--oc-ebu-accent); flex-shrink: 0; } .oc-ebu__embed-wrap { background: var(--oc-ebu-soft); border: 1px solid var(--oc-ebu-border); border-radius: 16px; padding: 12px; overflow: hidden; box-shadow: 0 16px 48px -28px rgba(0,0,0,0.18); } @media (min-width: 768px) { .oc-ebu__embed-wrap { padding: 16px; } } .oc-ebu__embed-wrap .calendly-inline-widget { border-radius: 8px; overflow: hidden; background: #fff; width: 100%; } .oc-ebu__fallback { margin-top: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .oc-ebu__fallback-label { font-size: 0.85rem; color: var(--oc-ebu-muted); letter-spacing: 0.01em; } .oc-ebu__fallback-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .oc-ebu__fallback-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 0.9rem; font-weight: 600; text-decoration: none; color: #fff; background: #25D366; border-radius: 999px; border: 1px solid #25D366; transition: filter 0.15s, transform 0.15s; } .oc-ebu__fallback-btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .oc-ebu__fallback-btn svg { width: 15px; height: 15px; } .oc-ebu__fallback-btn--ghost { background: transparent; color: var(--oc-ebu-text); border-color: var(--oc-ebu-border); } .oc-ebu__fallback-btn--ghost svg { color: var(--oc-ebu-accent); } .oc-ebu__fallback-btn--ghost:hover { background: var(--oc-ebu-soft); border-color: var(--oc-ebu-accent); color: var(--oc-ebu-accent); } .oc-ebu__fallback-meta { font-size: 0.78rem; font-weight: 500; color: var(--oc-ebu-muted); letter-spacing: 0.01em; } .oc-ebu__fallback-btn--ghost:hover .oc-ebu__fallback-meta { color: var(--oc-ebu-accent); } /* === Section: erstberatung-care-manager === */ .oc-ecm { background: var(--oc-ecm-bg); color: var(--oc-ecm-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-ecm { padding: 112px 40px; } } .oc-ecm__inner { max-width: 1280px; margin: 0 auto; } .oc-ecm__split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } @media (min-width: 1024px) { .oc-ecm__split { grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; } .oc-ecm__split--right .oc-ecm__media { order: 2; } .oc-ecm__split--right .oc-ecm__body { order: 1; } } .oc-ecm__media { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--oc-ecm-soft); border: 1px solid var(--oc-ecm-border); } @media (min-width: 1024px) { .oc-ecm__media { aspect-ratio: 5 / 6; position: sticky; top: 100px; } } .oc-ecm__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .oc-ecm__img--placeholder { display: block; background: linear-gradient(135deg, #c9d5d8, var(--oc-ecm-accent)); width: 100%; height: 100%; } .oc-ecm__badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: rgba(255,255,255,0.95); color: var(--oc-ecm-accent); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,0.14); } .oc-ecm__badge svg { width: 12px; height: 12px; } .oc-ecm__caption { position: absolute; bottom: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255,255,255,0.94); color: var(--oc-ecm-accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .oc-ecm__caption svg { width: 13px; height: 13px; } .oc-ecm__body { max-width: 580px; } .oc-ecm__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ecm-accent); margin-bottom: 18px; font-weight: 600; } .oc-ecm__quote { position: relative; margin: 0 0 18px; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; color: var(--oc-ecm-text); } .oc-ecm__quote-mark { color: var(--oc-ecm-accent); font-weight: 600; } .oc-ecm__quote p { margin: 0; } .oc-ecm__quote p + p { margin-top: 10px; } .oc-ecm__byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 28px; font-size: 0.92rem; } .oc-ecm__byline-name { font-weight: 600; color: var(--oc-ecm-text); letter-spacing: -0.005em; } .oc-ecm__byline-name::before { content: "— "; color: var(--oc-ecm-muted); font-weight: 500; } .oc-ecm__byline-role { color: var(--oc-ecm-muted); font-weight: 500; } .oc-ecm__sub { font-size: 0.98rem; line-height: 1.65; color: var(--oc-ecm-muted); margin: 0 0 32px; } .oc-ecm__sub p { margin: 0 0 12px; } .oc-ecm__sub p:last-child { margin: 0; } .oc-ecm__sub strong { color: var(--oc-ecm-text); font-weight: 600; } .oc-ecm__separator { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; color: var(--oc-ecm-muted); } .oc-ecm__separator::before, .oc-ecm__separator::after { content: ""; flex: 1; height: 1px; background: var(--oc-ecm-border); } .oc-ecm__separator-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; flex-shrink: 0; } .oc-ecm__points { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 16px; } .oc-ecm__point { display: flex; gap: 14px; align-items: flex-start; } .oc-ecm__point-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: rgba(28, 131, 148, 0.10); color: var(--oc-ecm-accent); } .oc-ecm__point-icon svg { width: 16px; height: 16px; } .oc-ecm__point-text { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; line-height: 1.5; } .oc-ecm__point-title { font-size: 0.96rem; font-weight: 600; color: var(--oc-ecm-text); letter-spacing: -0.005em; } .oc-ecm__point-body { font-size: 0.9rem; color: var(--oc-ecm-muted); } .oc-ecm__disclaimer { margin: 0; padding: 14px 18px; border-left: 3px solid var(--oc-ecm-accent); background: var(--oc-ecm-soft); border-radius: 0 8px 8px 0; font-size: 0.88rem; line-height: 1.55; color: var(--oc-ecm-muted); } .oc-ecm__disclaimer strong { color: var(--oc-ecm-text); font-weight: 600; } .oc-ecm__disclaimer p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } .oc-ecm__disclaimer p + p { margin-top: 8px; } /* === Section: erstberatung-hero === */ .oc-eh { background: var(--oc-eh-bg); color: var(--oc-eh-text); padding: 96px 20px 72px; position: relative; overflow: hidden; } @media (min-width: 768px) { .oc-eh { padding: 128px 40px 96px; } } .oc-eh__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } @media (min-width: 1024px) { .oc-eh__inner { grid-template-columns: 1.1fr 1fr; gap: 72px; } } .oc-eh__content { max-width: 620px; } .oc-eh__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-eh-accent); margin-bottom: 16px; font-weight: 600; } .oc-eh__headline { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 600; } .oc-eh__subline { font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.6; color: var(--oc-eh-muted); margin: 0 0 30px; max-width: 540px; } .oc-eh__meta { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 32px; } .oc-eh__meta-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--oc-eh-soft); border: 1px solid var(--oc-eh-border); border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--oc-eh-text); letter-spacing: 0.01em; } .oc-eh__meta-item svg { width: 15px; height: 15px; color: var(--oc-eh-accent); flex-shrink: 0; } .oc-eh__scroll { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: var(--oc-eh-accent); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: 4px; box-shadow: 0 8px 24px -6px rgba(28, 131, 148, 0.36); transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-eh__scroll:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-eh__scroll svg { width: 16px; height: 16px; } .oc-eh__tp { margin-top: 22px; min-height: 24px; } .oc-eh__signals { margin: 14px 0 0; font-size: 0.84rem; color: var(--oc-eh-muted); line-height: 1.5; letter-spacing: 0.01em; } /* ---------- Care-Team-Stack ---------- */ .oc-eh__team { width: 100%; position: relative; } .oc-eh__team-frame { background: var(--oc-eh-soft); border: 1px solid var(--oc-eh-border); border-radius: 20px; padding: 28px 24px 22px; position: relative; } .oc-eh__team-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 540px) { .oc-eh__team-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } } .oc-eh__card { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .oc-eh__card-media { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #ddd; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.18); transition: transform 0.3s ease, box-shadow 0.3s ease; } .oc-eh__card:hover .oc-eh__card-media { transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(0,0,0,0.24); } .oc-eh__card-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .oc-eh__card-img--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #c9d5d8, var(--oc-eh-accent)); color: rgba(255,255,255,0.7); font-size: 2rem; font-weight: 700; width: 100%; height: 100%; } .oc-eh__card-pill { position: absolute; bottom: 8px; left: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; background: rgba(255,255,255,0.94); color: var(--oc-eh-accent); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; backdrop-filter: blur(6px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); } .oc-eh__card-pill svg { width: 10px; height: 10px; } /* Subtle stagger for visual rhythm */ @media (min-width: 540px) { .oc-eh__card--1 { transform: translateY(8px); } .oc-eh__card--2 { transform: translateY(-8px); } .oc-eh__card--3 { transform: translateY(8px); } } .oc-eh__card-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; } .oc-eh__card-name { font-size: 0.82rem; font-weight: 600; color: var(--oc-eh-text); letter-spacing: -0.005em; line-height: 1.25; } .oc-eh__card-role { font-size: 0.74rem; color: var(--oc-eh-muted); line-height: 1.3; } .oc-eh__team-caption { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 0; font-size: 0.78rem; color: var(--oc-eh-muted); letter-spacing: 0.01em; text-align: center; } .oc-eh__team-caption svg { width: 13px; height: 13px; color: var(--oc-eh-accent); flex-shrink: 0; } /* === Section: erstberatung-vorbereitung === */ .oc-evb { background: var(--oc-evb-bg); color: var(--oc-evb-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-evb { padding: 112px 40px; } } .oc-evb__inner { max-width: 1120px; margin: 0 auto; } .oc-evb__head { text-align: center; margin-bottom: 48px; max-width: 640px; margin-left: auto; margin-right: auto; } .oc-evb__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-evb-accent); margin-bottom: 12px; font-weight: 600; } .oc-evb__headline { font-size: clamp(1.7rem, 3.2vw, 2.2rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; font-weight: 600; } .oc-evb__sub { font-size: 1rem; line-height: 1.6; color: var(--oc-evb-muted); margin: 0; } .oc-evb__sub strong { color: var(--oc-evb-text); font-weight: 600; } .oc-evb__cards { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .oc-evb__cards { grid-template-columns: repeat(3, 1fr); gap: 18px; } } .oc-evb__card { background: var(--oc-evb-card); border: 1px solid var(--oc-evb-border); border-radius: 14px; padding: 28px 26px 28px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.2s, border-color 0.2s; } .oc-evb__card:hover { transform: translateY(-2px); border-color: var(--oc-evb-accent); } .oc-evb__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(28, 131, 148, 0.10); color: var(--oc-evb-accent); margin-bottom: 6px; } .oc-evb__icon svg { width: 22px; height: 22px; } .oc-evb__optional { display: inline-block; align-self: flex-start; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-evb-muted); background: rgba(0,0,0,0.04); padding: 3px 9px; border-radius: 999px; } .oc-evb__title { font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; margin: 4px 0 0; color: var(--oc-evb-text); } .oc-evb__body { font-size: 0.92rem; line-height: 1.6; color: var(--oc-evb-muted); margin: 0; } .oc-evb__footer { margin: 36px auto 0; text-align: center; max-width: 600px; font-size: 0.92rem; line-height: 1.6; color: var(--oc-evb-muted); } .oc-evb__footer strong { color: var(--oc-evb-text); font-weight: 600; } .oc-evb__footer p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } /* === Section: erstberatung-vs-arztberatung === */ .oc-evs { background: var(--oc-evs-bg); color: var(--oc-evs-text); padding: 32px 20px; } @media (min-width: 768px) { .oc-evs { padding: 40px 40px; } } .oc-evs__inner { max-width: 1080px; margin: 0 auto; } .oc-evs__strip { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 22px; border: 1px solid var(--oc-evs-border); border-radius: 14px; background: #fafaf7; } @media (min-width: 768px) { .oc-evs__strip { flex-direction: row; align-items: center; gap: 18px; padding: 18px 24px; } } .oc-evs__step { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .oc-evs__num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.84rem; font-weight: 700; background: var(--oc-evs-accent); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .oc-evs__num--ghost { background: transparent; color: var(--oc-evs-accent); border: 1.5px solid var(--oc-evs-accent); } .oc-evs__step-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; } .oc-evs__step-text strong { font-size: 0.96rem; font-weight: 600; color: var(--oc-evs-text); letter-spacing: -0.005em; } .oc-evs__step-text span { font-size: 0.82rem; color: var(--oc-evs-muted); } .oc-evs__connector { display: flex; align-items: center; justify-content: center; color: var(--oc-evs-accent); flex-shrink: 0; } .oc-evs__connector svg { width: 20px; height: 20px; transform: rotate(90deg); } @media (min-width: 768px) { .oc-evs__connector svg { transform: rotate(0); } } .oc-evs__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--oc-evs-accent); font-weight: 600; font-size: 0.88rem; text-decoration: none; transition: gap 0.2s ease; white-space: nowrap; flex-shrink: 0; } .oc-evs__cta:hover { gap: 12px; } .oc-evs__cta svg { width: 14px; height: 14px; } /* === Section: expert-concerns === */ .oc-concern { background: var(--oc-cn-bg); color: var(--oc-cn-text); padding: 96px 20px; } @media (min-width: 768px) { .oc-concern { padding: 128px 40px; } } .oc-concern__inner { max-width: 1280px; margin: 0 auto; } .oc-concern__header { max-width: 720px; margin: 0 auto 64px; text-align: center; } .oc-concern__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-cn-accent); margin-bottom: 14px; font-weight: 600; } .oc-concern__headline { font-size: clamp(1.9rem, 3.8vw, 2.6rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 16px; font-weight: 600; color: var(--oc-cn-text); } .oc-concern__sub { font-size: 1.02rem; line-height: 1.55; color: var(--oc-cn-muted); margin: 0; } .oc-concern__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 700px) { .oc-concern__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .oc-concern__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .oc-concern__card { background: var(--oc-cn-card-bg); border: 1px solid var(--oc-cn-card-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, border-color 0.25s ease; } .oc-concern__card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--oc-cn-accent) 50%, transparent); } .oc-concern__media { position: relative; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: none; background: #000; cursor: pointer; overflow: hidden; } .oc-concern__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.3s ease; } .oc-concern__poster--placeholder { background: linear-gradient(135deg, #c9a97a, var(--oc-cn-accent)); } .oc-concern__media:hover .oc-concern__poster { transform: scale(1.04); filter: brightness(0.75); } .oc-concern__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%); pointer-events: none; } .oc-concern__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); color: var(--oc-cn-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, background 0.2s ease; } .oc-concern__media:hover .oc-concern__play { transform: scale(1.12); } .oc-concern__play svg { width: 26px; height: 26px; margin-left: 3px; } .oc-concern__duration { position: absolute; bottom: 14px; left: 14px; padding: 5px 10px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; border-radius: 999px; backdrop-filter: blur(6px); } .oc-concern__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; } .oc-concern__number { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-cn-accent); font-weight: 600; margin-bottom: 12px; } .oc-concern__question { font-size: 1.2rem; line-height: 1.3; margin: 0 0 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--oc-cn-text); } .oc-concern__answer { font-size: 0.95rem; line-height: 1.6; color: var(--oc-cn-muted); margin: 0 0 14px; flex: 1; } .oc-concern__attribution { display: block; font-size: 0.82rem; color: var(--oc-cn-muted); letter-spacing: 0.02em; opacity: 0.85; } .oc-concern__cta-wrap { text-align: center; margin-top: 56px; } .oc-concern__cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: var(--oc-cn-accent); color: #fff; font-weight: 600; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.01em; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transition: transform 0.15s, filter 0.15s, gap 0.15s; } .oc-concern__cta:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-concern__cta svg { width: 18px; height: 18px; } /* Modal */ .oc-concern__modal { position: fixed; inset: 0; z-index: 999; background: rgba(10, 10, 10, 0.94); display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(10px); } .oc-concern__modal.is-open { display: flex; } .oc-concern__modal-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; } .oc-concern__modal-frame { width: min(92vw, calc(86vh * 9 / 16)); aspect-ratio: 9 / 16; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .oc-concern__modal-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } .oc-concern__modal-title { color: #fff; margin: 0; font-size: 0.95rem; letter-spacing: 0.02em; max-width: 400px; text-align: center; } .oc-concern__modal-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background 0.15s; } .oc-concern__modal-close:hover { background: rgba(255, 255, 255, 0.2); } .oc-concern__modal-close svg { width: 20px; height: 20px; } /* === Section: expertenwissen-hero === */ .oc-exph { background: var(--oc-exph-bg); color: var(--oc-exph-text); padding: 96px 20px 72px; position: relative; overflow: hidden; } @media (min-width: 768px) { .oc-exph { padding: 128px 40px 96px; } } .oc-exph__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } @media (min-width: 1024px) { .oc-exph__inner { grid-template-columns: 1.1fr 1fr; gap: 80px; } } .oc-exph__content { max-width: 620px; } .oc-exph__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-exph-accent); margin-bottom: 16px; font-weight: 600; } .oc-exph__headline { font-size: clamp(2.1rem, 4.8vw, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 600; } .oc-exph__subline { font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6; color: var(--oc-exph-muted); margin: 0 0 36px; max-width: 560px; } .oc-exph__meta { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 40px; } .oc-exph__meta-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--oc-exph-soft); border: 1px solid var(--oc-exph-border); border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--oc-exph-text); letter-spacing: 0.01em; } .oc-exph__meta-item svg { width: 15px; height: 15px; color: var(--oc-exph-accent); flex-shrink: 0; } .oc-exph__scroll { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--oc-exph-accent); color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-exph__scroll:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-exph__scroll svg { width: 16px; height: 16px; } /* ---------- Visual (Doppel-Portrait) ---------- */ .oc-exph__visual { position: relative; display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 520px; margin: 0 auto; } .oc-exph__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (min-width: 640px) { .oc-exph__pair { gap: 18px; } } .oc-exph__portrait { position: relative; margin: 0; } .oc-exph__portrait-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: #111; box-shadow: 0 14px 40px -20px rgba(0,0,0,0.22); } .oc-exph__portrait-img--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #c9a97a, var(--oc-exph-accent)); color: #fff; font-size: 3rem; font-weight: 600; text-transform: uppercase; } .oc-exph__portrait-caption { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 0 2px; } .oc-exph__portrait-name { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; color: var(--oc-exph-text); } .oc-exph__portrait-role { font-size: 0.8rem; color: var(--oc-exph-muted); letter-spacing: 0.01em; } .oc-exph__visual-caption { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--oc-exph-border); font-size: 0.88rem; color: var(--oc-exph-muted); line-height: 1.55; } /* === Section: expertenwissen-library === */ .oc-exlib { background: var(--oc-exlib-bg); color: var(--oc-exlib-text); padding: 72px 20px 96px; } @media (min-width: 768px) { .oc-exlib { padding: 96px 40px 140px; } } .oc-exlib__inner { max-width: 1280px; margin: 0 auto; } .oc-exlib__header { max-width: 720px; margin: 0 auto 40px; text-align: center; } .oc-exlib__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-exlib-accent); margin-bottom: 12px; font-weight: 600; } .oc-exlib__headline { font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 14px; font-weight: 600; } .oc-exlib__subline { font-size: 1rem; line-height: 1.55; color: var(--oc-exlib-muted); margin: 0; } /* ---------- Filter ---------- */ .oc-exlib__filter { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--oc-exlib-border); } @media (min-width: 768px) { .oc-exlib__filter { flex-direction: row; align-items: center; gap: 20px; } } .oc-exlib__filter-label { font-size: 0.82rem; color: var(--oc-exlib-muted); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; flex-shrink: 0; } .oc-exlib__pills { display: flex; flex-wrap: wrap; gap: 8px; } .oc-exlib__pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: transparent; border: 1px solid var(--oc-exlib-border); color: var(--oc-exlib-text); font-family: inherit !important; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .oc-exlib__pill:hover { border-color: var(--oc-exlib-accent); color: var(--oc-exlib-accent); } .oc-exlib__pill.is-active { background: var(--oc-exlib-text); border-color: var(--oc-exlib-text); color: #fff; } .oc-exlib__pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--oc-exlib-border); color: var(--oc-exlib-muted); font-size: 0.72rem; font-weight: 600; } .oc-exlib__pill.is-active .oc-exlib__pill-count { background: rgba(255,255,255,0.2); color: #fff; } /* ---------- Grid ---------- */ .oc-exlib__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 640px) { .oc-exlib__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } @media (min-width: 1024px) { .oc-exlib__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } } .oc-exlib__card { display: flex; flex-direction: column; gap: 14px; padding: 0; background: none; border: none; cursor: pointer; color: inherit; text-align: left; font: inherit; text-decoration: none; transition: transform 0.25s ease; } .oc-exlib__card:hover { transform: translateY(-3px); } .oc-exlib__card:focus-visible { outline: 2px solid var(--oc-exlib-accent); outline-offset: 4px; border-radius: 12px; } .oc-exlib__card.is-hidden { display: none; } .oc-exlib__card--upcoming { cursor: default; } .oc-exlib__card--upcoming:hover { transform: none; } /* ---------- Thumb ---------- */ .oc-exlib__thumb { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #111; box-shadow: 0 12px 32px -14px rgba(0,0,0,0.3); } .oc-exlib__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } video.oc-exlib__thumb-img { background: #111; } .oc-exlib__thumb-img--placeholder { background: linear-gradient(135deg, #c9a97a, var(--oc-exlib-accent)); } .oc-exlib__card:hover .oc-exlib__thumb-img { transform: scale(1.04); } .oc-exlib__card--upcoming .oc-exlib__thumb-img { filter: saturate(0.65) brightness(0.95); opacity: 0.85; } .oc-exlib__thumb-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%); pointer-events: none; } .oc-exlib__play { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.95); color: var(--oc-exlib-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: transform 0.2s ease, background 0.2s ease; } .oc-exlib__card:hover .oc-exlib__play { transform: scale(1.12); background: #fff; } .oc-exlib__play svg { width: 18px; height: 18px; margin-left: 2px; } .oc-exlib__duration { position: absolute; bottom: 12px; left: 12px; padding: 4px 10px; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; border-radius: 999px; backdrop-filter: blur(4px); } .oc-exlib__duration:empty { display: none; } .oc-exlib__upcoming-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: rgba(255,255,255,0.95); color: var(--oc-exlib-text); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .oc-exlib__upcoming-dot { width: 6px; height: 6px; border-radius: 50%; background: #c9a97a; animation: oc-exlib-pulse 1.8s ease-in-out infinite; } @keyframes oc-exlib-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.25); } } /* ---------- Body ---------- */ .oc-exlib__body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; } .oc-exlib__topic { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-exlib-accent); font-weight: 600; margin-bottom: 2px; } .oc-exlib__title { font-size: 0.98rem; line-height: 1.3; letter-spacing: -0.005em; margin: 0; font-weight: 600; color: var(--oc-exlib-text); } .oc-exlib__teaser { font-size: 0.84rem; line-height: 1.45; color: var(--oc-exlib-muted); margin: 4px 0 0; } .oc-exlib__card--upcoming .oc-exlib__title, .oc-exlib__card--upcoming .oc-exlib__teaser { color: var(--oc-exlib-muted); } .oc-exlib__empty { grid-column: 1 / -1; text-align: center; color: var(--oc-exlib-muted); font-size: 0.95rem; padding: 60px 20px; margin: 0; } /* ---------- Modal (shared 9:16 pattern) ---------- */ .oc-exlib__modal { position: fixed; inset: 0; z-index: 999; background: rgba(10,10,10,0.94); display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(10px); } .oc-exlib__modal.is-open { display: flex; } .oc-exlib__modal-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; } .oc-exlib__modal-frame { width: min(92vw, calc(86vh * 9 / 16)); aspect-ratio: 9 / 16; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .oc-exlib__modal-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } .oc-exlib__modal-title { color: #fff; margin: 0; font-size: 0.95rem; letter-spacing: 0.02em; max-width: 400px; text-align: center; } .oc-exlib__modal-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background 0.15s; } .oc-exlib__modal-close:hover { background: rgba(255,255,255,0.2); } .oc-exlib__modal-close svg { width: 20px; height: 20px; } /* === Section: faq-short === */ .oc-faq { background: var(--oc-faq-bg); color: var(--oc-faq-text); padding: 72px 20px; } @media (min-width: 768px) { .oc-faq { padding: 112px 40px; } } .oc-faq__inner { max-width: 1280px; margin: 0 auto; display: grid; gap: 48px; grid-template-columns: 1fr; } @media (min-width: 900px) { .oc-faq__inner { grid-template-columns: 0.9fr 1.2fr; gap: 80px; align-items: start; } } .oc-faq__header { max-width: 440px; } @media (min-width: 900px) { .oc-faq__header { position: sticky; top: 40px; } } .oc-faq__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-faq-accent); margin-bottom: 12px; font-weight: 600; } .oc-faq__headline { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 16px; font-weight: 600; } .oc-faq__sub { font-size: 1rem; line-height: 1.55; color: var(--oc-faq-muted); margin: 0 0 24px; } .oc-faq__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--oc-faq-accent); font-weight: 600; text-decoration: none; font-size: 0.95rem; transition: gap 0.2s ease; } .oc-faq__cta:hover { gap: 12px; } .oc-faq__cta svg { width: 18px; height: 18px; } .oc-faq__list { border-top: 1px solid var(--oc-faq-line); } .oc-faq__item { border-bottom: 1px solid var(--oc-faq-line); } .oc-faq__item summary { list-style: none; cursor: pointer; } .oc-faq__item summary::-webkit-details-marker { display: none; } .oc-faq__question { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 4px; font-size: 1.05rem; line-height: 1.4; font-weight: 600; color: var(--oc-faq-text); transition: color 0.15s ease; } .oc-faq__item:hover summary .oc-faq__question { color: var(--oc-faq-accent); } .oc-faq__q-text { flex: 1; padding-top: 2px; } .oc-faq__q-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--oc-faq-accent); transition: transform 0.25s ease; } .oc-faq__q-icon svg { width: 20px; height: 20px; } .oc-faq__item[open] .oc-faq__q-icon { transform: rotate(45deg); } .oc-faq__answer { padding: 0 4px 28px; max-width: 680px; font-size: 0.98rem; line-height: 1.65; color: var(--oc-faq-muted); } .oc-faq__answer p { margin: 0 0 14px; } .oc-faq__answer p:last-child { margin-bottom: 0; } .oc-faq__answer a { color: var(--oc-faq-accent); text-decoration: underline; text-underline-offset: 2px; } .oc-faq__answer ul, .oc-faq__answer ol { padding-left: 22px; margin: 0 0 14px; } .oc-faq__answer li { margin: 4px 0; } /* === Section: final-cta === */ .oc-final { position: relative; color: var(--oc-f-text); overflow: hidden; isolation: isolate; min-height: 560px; display: flex; align-items: center; padding: 96px 20px; } @media (min-width: 768px) { .oc-final { min-height: 640px; padding: 120px 40px; } } .oc-final__media { position: absolute; inset: 0; z-index: 0; } .oc-final__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .oc-final__img--placeholder { background: linear-gradient(135deg, #3a3a3a, #0f0f0f); } .oc-final__overlay { position: absolute; inset: 0; background: var(--oc-f-overlay); opacity: var(--oc-f-overlay-opacity); } .oc-final__content { position: relative; z-index: 1; width: 100%; } .oc-final__inner { max-width: 720px; margin: 0 auto; text-align: center; } .oc-final__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-f-accent); margin-bottom: 18px; font-weight: 600; } .oc-final__headline { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px; font-weight: 600; color: var(--oc-f-text); } .oc-final__sub { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; color: var(--oc-f-muted); margin: 0 0 36px; max-width: 560px; margin-left: auto; margin-right: auto; } .oc-final__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .oc-final__btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 4px; border: 1px solid transparent; transition: transform 0.15s, filter 0.15s, background 0.15s; min-height: 52px; cursor: pointer; } .oc-final__btn--primary { background: var(--oc-f-accent); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .oc-final__btn--primary:hover { transform: translateY(-2px); filter: brightness(1.08); } .oc-final__btn--secondary { background: rgba(255, 255, 255, 0.12); color: var(--oc-f-text); border-color: rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .oc-final__btn--secondary:hover { background: rgba(255, 255, 255, 0.2); } .oc-final__btn svg { width: 20px; height: 20px; } .oc-final__trust { margin: 28px 0 0; font-size: 0.85rem; color: var(--oc-f-muted); opacity: 0.9; letter-spacing: 0.02em; } /* === Section: footer === */ .oc-footer { --oc-accent: #1c8394; --oc-soft: #fafaf7; --oc-beige: #f6f5f0; --oc-border: #ececec; --oc-border-soft: #e3e2dc; --oc-text: #1a1a1a; --oc-muted: #5c5c5c; --oc-mute-2: #8a8a8a; background: var(--oc-beige); color: var(--oc-text); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; border-top: 1px solid #d5d3ca; } .oc-footer a { color: inherit; } /* === Etage 1: Brand-Block === */ .oc-footer__brand-inner { max-width: 1280px; margin: 0 auto; padding: 64px 32px 40px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; } .oc-footer__eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-accent); margin-bottom: 14px; } .oc-footer__mission { font-size: clamp(20px, 2vw, 24px); line-height: 1.35; font-weight: 400; letter-spacing: -0.015em; color: var(--oc-text); margin: 0 0 14px; max-width: 540px; } .oc-footer__cities { font-size: 14px; color: var(--oc-muted); margin: 0; line-height: 1.5; } .oc-footer__whatsapp { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; background: #fff; border: 1px solid var(--oc-border); border-radius: 999px; padding: 10px 22px 10px 12px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .oc-footer__whatsapp:hover { border-color: var(--oc-accent); transform: translateY(-1px); box-shadow: 0 6px 20px -10px rgba(0,0,0,0.18); } .oc-footer__whatsapp-avatars { display: inline-flex; flex-shrink: 0; } .oc-footer__whatsapp-avatars img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -10px; } .oc-footer__whatsapp-avatars img:first-child { margin-left: 0; } .oc-footer__whatsapp-text { display: flex; flex-direction: column; gap: 2px; } .oc-footer__whatsapp-title { font-size: 14px; font-weight: 600; color: var(--oc-text); letter-spacing: -0.005em; } .oc-footer__whatsapp-sub { font-size: 12px; color: var(--oc-muted); } /* === Etage 2: Link-Cluster === */ .oc-footer__links { border-top: 1px solid #e3e1d8; } .oc-footer__links-inner { max-width: 1280px; margin: 0 auto; padding: 36px 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .oc-footer__heading { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-muted); margin-bottom: 16px; } .oc-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .oc-footer__col a { color: var(--oc-text); text-decoration: none; font-size: 14px; transition: color .15s ease; } .oc-footer__col a:hover { color: var(--oc-accent); } /* === Etage 3: Trust-Strip === */ .oc-footer__trust { border-top: 1px solid #e3e1d8; border-bottom: 1px solid #e3e1d8; background: #fff; } .oc-footer__trust-inner { max-width: 1280px; margin: 0 auto; padding: 22px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .oc-footer__trust-left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .oc-footer__trustpilot { min-width: 180px; } .oc-footer__siegel { display: inline-block; opacity: .9; transition: opacity .18s ease; } .oc-footer__siegel:hover { opacity: 1; } .oc-footer__siegel img { display: block; height: 56px; width: auto; } .oc-footer__social { display: flex; gap: 10px; } .oc-footer__social a { width: 36px; height: 36px; border: 1px solid var(--oc-border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--oc-text); background: #fff; transition: border-color .18s ease, color .18s ease; } .oc-footer__social a:hover { border-color: var(--oc-accent); color: var(--oc-accent); } .oc-footer__social svg { width: 18px; height: 18px; } /* === Etage 4: Legal-Bar === */ .oc-footer__legal {} .oc-footer__legal-inner { max-width: 1280px; margin: 0 auto; padding: 22px 32px; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .oc-footer__legal-left { flex: 1; min-width: 320px; } .oc-footer__copy { margin: 0 0 6px; font-size: 12px; color: var(--oc-muted); } .oc-footer__copy a { color: var(--oc-muted); text-decoration: none; transition: color .15s ease; } .oc-footer__copy a:hover { color: var(--oc-accent); } .oc-footer__disclaimer { margin: 0; font-size: 11px; line-height: 1.55; color: var(--oc-mute-2); max-width: 720px; } .oc-footer__legal-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .oc-footer__legal-links a, .oc-footer__legal-btn { color: var(--oc-mute-2); text-decoration: none; font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit !important; transition: color .15s ease; } .oc-footer__legal-links a:hover, .oc-footer__legal-btn:hover { color: var(--oc-accent); } /* === Responsive === */ @media (max-width: 900px) { .oc-footer__brand-inner { grid-template-columns: 1fr; gap: 28px; padding: 48px 24px 32px; } .oc-footer__whatsapp { align-self: flex-start; } .oc-footer__links-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 24px; } } @media (max-width: 560px) { .oc-footer__links-inner { grid-template-columns: 1fr; gap: 28px; } .oc-footer__trust-inner, .oc-footer__legal-inner { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 18px; } .oc-footer__legal-links { gap: 14px 18px; } .oc-footer__whatsapp { width: 100%; } } @media (prefers-reduced-motion: reduce) { .oc-footer__whatsapp, .oc-footer__siegel, .oc-footer__col a, .oc-footer__social a, .oc-footer__legal-links a, .oc-footer__legal-btn { transition: none !important; } } /* === Section: founders-intro === */ .oc-founders { background: var(--oc-f-bg); color: var(--oc-f-text); padding: 72px 20px; } @media (min-width: 768px) { .oc-founders { padding: 112px 40px; } } .oc-founders__inner { max-width: 1280px; margin: 0 auto; display: grid; gap: 56px; grid-template-columns: 1fr; align-items: start; } @media (min-width: 1024px) { .oc-founders__inner { grid-template-columns: 1.15fr 1fr; gap: 72px; } } .oc-founders__gallery { position: relative; } .oc-founders__series-badge { display: inline-block; margin-bottom: 20px; padding: 6px 14px; background: var(--oc-f-accent); color: #fff; border-radius: 999px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .oc-founders__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 640px) { .oc-founders__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (min-width: 1024px) { .oc-founders__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .oc-founders__grid { grid-template-columns: repeat(3, 1fr); } } .oc-founders__thumb { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0; background: none; border: none; cursor: pointer; font: inherit; color: inherit; text-align: left; text-decoration: none; transition: transform 0.25s ease; } .oc-founders__thumb:hover { transform: translateY(-2px); } .oc-founders__thumb:focus-visible { outline: 2px solid var(--oc-f-accent); outline-offset: 3px; border-radius: 12px; } .oc-founders__thumb-media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); } .oc-founders__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .oc-founders__thumb-img--placeholder { background: linear-gradient(135deg, #c9a97a, var(--oc-f-accent)); } .oc-founders__thumb:hover .oc-founders__thumb-img { transform: scale(1.04); } .oc-founders__thumb-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%); pointer-events: none; } .oc-founders__thumb-play { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--oc-f-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; } .oc-founders__thumb:hover .oc-founders__thumb-play { transform: scale(1.12); } .oc-founders__thumb-play svg { width: 16px; height: 16px; margin-left: 2px; } .oc-founders__thumb-title { display: block; font-size: 0.88rem; line-height: 1.35; font-weight: 600; color: var(--oc-f-text); letter-spacing: -0.005em; padding: 0 2px; } .oc-founders__thumb--more { align-items: stretch; } .oc-founders__thumb--more .oc-founders__more-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 4 / 5; border-radius: 10px; background: color-mix(in srgb, var(--oc-f-accent) 8%, var(--oc-f-card-bg)); border: 2px dashed color-mix(in srgb, var(--oc-f-accent) 40%, transparent); color: var(--oc-f-accent); text-align: center; padding: 16px; transition: background 0.2s ease; } .oc-founders__thumb--more:hover .oc-founders__more-inner { background: color-mix(in srgb, var(--oc-f-accent) 14%, var(--oc-f-card-bg)); } .oc-founders__thumb--more .oc-founders__more-label { font-weight: 600; font-size: 0.9rem; line-height: 1.3; } .oc-founders__thumb--more svg { width: 22px; height: 22px; } .oc-founders__content { max-width: 560px; } .oc-founders__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-f-accent); margin-bottom: 12px; font-weight: 600; } .oc-founders__headline { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 20px; font-weight: 600; } .oc-founders__intro { font-size: 1.02rem; line-height: 1.6; color: var(--oc-f-muted); margin: 0 0 32px; } .oc-founders__intro p { margin: 0 0 12px; } .oc-founders__intro p:last-child { margin-bottom: 0; } .oc-founders__profiles { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; } .oc-founders__profile { display: flex; gap: 16px; padding: 18px; background: var(--oc-f-card-bg); border-radius: 10px; align-items: flex-start; border: 1px solid #ececec; } .oc-founders__portrait { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .oc-founders__portrait--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #c9a97a, var(--oc-f-accent)); color: #fff; font-weight: 600; font-size: 1.3rem; text-transform: uppercase; } .oc-founders__profile-text { flex: 1; min-width: 0; } .oc-founders__name { font-size: 1rem; font-weight: 600; margin: 0 0 2px; line-height: 1.2; } .oc-founders__role { display: block; font-size: 0.82rem; color: var(--oc-f-muted); letter-spacing: 0.02em; margin-bottom: 8px; } .oc-founders__quote { font-size: 0.9rem; line-height: 1.5; margin: 0; color: var(--oc-f-text); font-style: italic; border-left: 2px solid var(--oc-f-accent); padding-left: 10px; } .oc-founders__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--oc-f-accent); color: #fff; font-weight: 600; text-decoration: none; font-size: 0.95rem; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-founders__cta:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-founders__cta svg { width: 18px; height: 18px; } /* ===== Modal ===== */ .oc-founders__modal { position: fixed; inset: 0; z-index: 999; background: rgba(10, 10, 10, 0.92); display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(8px); } .oc-founders__modal.is-open { display: flex; } .oc-founders__modal-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; max-height: 100%; } .oc-founders__modal-frame { position: relative; width: min(92vw, calc(86vh * 9 / 16)); aspect-ratio: 9 / 16; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .oc-founders__modal-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } .oc-founders__modal-title { color: #fff; margin: 0; font-size: 0.95rem; letter-spacing: 0.02em; max-width: 400px; text-align: center; } .oc-founders__modal-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background 0.15s ease; } .oc-founders__modal-close:hover { background: rgba(255, 255, 255, 0.2); } .oc-founders__modal-close svg { width: 20px; height: 20px; } /* === Section: header === */ .oc-header { --oc-accent: #1c8394; --oc-text: #1a1a1a; --oc-muted: #5c5c5c; --oc-border: #ececec; --oc-soft: #fafaf7; --oc-beige: #f6f5f0; --oc-white: #ffffff; --oc-bar-h: 72px; position: sticky; top: 0; z-index: 1000; background: var(--oc-white); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; color: var(--oc-text); } .oc-header *, .oc-drawer * { box-sizing: border-box; } .oc-header a { text-decoration: none; } /* Trust-Stripe */ .oc-header__trust { background: var(--oc-beige); border-bottom: 1px solid var(--oc-border); height: 32px; overflow: hidden; position: relative; } .oc-header__trust-track { height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; position: relative; } .oc-header__trust-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; letter-spacing: 0.01em; color: var(--oc-muted); opacity: 0; transition: opacity 480ms ease; text-align: center; padding: 0 20px; } .oc-header__trust-slot.is-active { opacity: 1; } .oc-header__trust-slot strong { color: var(--oc-text); font-weight: 600; } .oc-header__trust-icon { width: 12px; height: 12px; color: var(--oc-accent); flex: 0 0 auto; } /* Bar */ .oc-header__bar { height: var(--oc-bar-h); border-bottom: 1px solid var(--oc-border); background: var(--oc-white); transition: height 200ms ease; } .oc-header[data-oc-scrolled="true"] .oc-header__bar { height: 60px; } .oc-header__inner { height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 24px; } .oc-header__logo { flex: 0 0 auto; display: flex; align-items: center; } .oc-header__logo img { display: block; height: 32px; width: auto; } /* Desktop Nav */ .oc-header__nav { flex: 1 1 auto; display: none; } @media (min-width: 1080px) { .oc-header__nav { display: block; } } .oc-header__nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px; } .oc-header__nav-item { position: relative; } .oc-header__nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--oc-text); background: none; border: 0; cursor: pointer; font-family: inherit !important; letter-spacing: 0; position: relative; transition: color 160ms ease; } .oc-header__nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--oc-accent); transform: scaleX(0); transform-origin: left; transition: transform 200ms ease; } .oc-header__nav-link:hover, .oc-header__nav-item.is-open .oc-header__nav-link { color: var(--oc-accent); } .oc-header__nav-link:hover::after, .oc-header__nav-item.is-open .oc-header__nav-link::after { transform: scaleX(1); } .oc-header__caret { width: 9px; height: 5px; transition: transform 200ms ease; } .oc-header__nav-item.is-open .oc-header__caret { transform: rotate(180deg); } /* Mega-Menü */ .oc-header__mega { position: absolute; top: calc(100% + 1px); left: 0; transform: translateY(-6px); min-width: 720px; max-width: calc(100vw - 32px); background: var(--oc-soft); border: 1px solid var(--oc-border); box-shadow: 0 18px 48px rgba(0,0,0,0.06); border-radius: 6px; padding: 36px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease, visibility 220ms; } .oc-header__nav-item.is-open .oc-header__mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .oc-header__mega-eyebrow { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-accent); font-weight: 600; margin-bottom: 16px; } .oc-header__mega--two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: stretch; } .oc-header__mega-col { display: flex; flex-direction: column; gap: 4px; } .oc-header__mega-row { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 4px; background: var(--oc-white); border: 1px solid var(--oc-border); transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .oc-header__mega-row:hover { border-color: var(--oc-accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(28,131,148,0.08); } .oc-header__mega-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 4px; background: var(--oc-soft); border: 1px solid var(--oc-border); display: flex; align-items: center; justify-content: center; color: var(--oc-accent); } .oc-header__mega-icon svg { width: 20px; height: 20px; } .oc-header__mega-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .oc-header__mega-title { font-size: 15px; font-weight: 600; color: var(--oc-text); } .oc-header__mega-sub { font-size: 13px; color: var(--oc-muted); line-height: 1.5; } .oc-header__mega-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--oc-muted); transition: transform 180ms ease, color 160ms ease; } .oc-header__mega-row:hover .oc-header__mega-chev { color: var(--oc-accent); transform: translateX(3px); } /* Hub-Card (Kundenerfahrungen Mega — left col) */ .oc-header__mega--hub { display: grid; grid-template-columns: 1.1fr 1.6fr; gap: 28px; min-width: 880px; } .oc-header__hub-card { position: relative; overflow: hidden; border-radius: 4px; background: var(--oc-white); border: 1px solid var(--oc-border); display: flex; flex-direction: column; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .oc-header__hub-card:hover { border-color: var(--oc-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28,131,148,0.10); } .oc-header__hub-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .oc-header__hub-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .oc-header__hub-card-eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-accent); font-weight: 600; } .oc-header__hub-card-title { font-size: 18px; font-weight: 600; color: var(--oc-text); line-height: 1.3; } .oc-header__hub-card-sub { font-size: 13px; color: var(--oc-muted); line-height: 1.5; } .oc-header__hub-card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--oc-accent); padding-top: 10px; } .oc-header__hub-card-cta svg { width: 14px; height: 10px; transition: transform 180ms ease; } .oc-header__hub-card:hover .oc-header__hub-card-cta svg { transform: translateX(3px); } .oc-header__hub-right { display: flex; flex-direction: column; gap: 12px; } .oc-header__hub-right-eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-muted); font-weight: 600; margin-bottom: 4px; } .oc-header__patient-grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .oc-header__patient-card-h { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 4px; background: var(--oc-white); border: 1px solid var(--oc-border); transition: border-color 160ms ease, transform 160ms ease; } .oc-header__patient-card-h:hover { border-color: var(--oc-accent); transform: translateY(-1px); } .oc-header__patient-thumb-h { flex: 0 0 56px; width: 56px; height: 70px; overflow: hidden; border-radius: 3px; background: var(--oc-beige); } .oc-header__patient-thumb-h img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-header__patient-card-h-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .oc-header__patient-card-h-name { font-size: 14px; font-weight: 600; color: var(--oc-text); } .oc-header__patient-card-h-meta { font-size: 12px; color: var(--oc-muted); } .oc-header__mega-teaser { position: relative; overflow: hidden; border-radius: 4px; background: var(--oc-white); border: 1px solid var(--oc-border); display: flex; flex-direction: column; min-height: 240px; transition: transform 200ms ease; } .oc-header__mega-teaser:hover { transform: translateY(-2px); } .oc-header__mega-teaser img { width: 100%; height: 160px; object-fit: cover; display: block; } .oc-header__mega-teaser-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: space-between; } .oc-header__mega-teaser-quote { font-size: 14px; line-height: 1.4; color: var(--oc-text); font-style: italic; } .oc-header__mega-teaser-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--oc-accent); } .oc-header__mega-teaser-cta svg { width: 14px; height: 10px; transition: transform 180ms ease; } .oc-header__mega-teaser:hover .oc-header__mega-teaser-cta svg { transform: translateX(3px); } /* Patient-Mega */ .oc-header__mega--cards { min-width: 880px; } .oc-header__patient-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .oc-header__patient-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 4px; transition: background 160ms ease; } .oc-header__patient-card:hover { background: var(--oc-white); } .oc-header__patient-thumb { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--oc-beige); display: block; } .oc-header__patient-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 240ms ease; } .oc-header__patient-card:hover .oc-header__patient-thumb img { transform: scale(1.03); } .oc-header__patient-thumb--all { display: flex; align-items: center; justify-content: center; color: var(--oc-accent); border: 1px dashed var(--oc-border); background: transparent; } .oc-header__patient-thumb--all svg { width: 32px; height: 32px; } .oc-header__patient-name { font-size: 14px; font-weight: 600; color: var(--oc-text); } .oc-header__patient-meta { font-size: 12px; color: var(--oc-muted); } /* Actions / CTA */ .oc-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: auto; } .oc-header__cta { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 18px; background: var(--oc-accent); color: var(--oc-white); font-size: 14px; font-weight: 600; border-radius: 4px; transition: filter 160ms ease, transform 160ms ease; white-space: nowrap; } @media (min-width: 1080px) { .oc-header__cta { display: inline-flex; } } .oc-header__cta:hover { filter: brightness(1.08); transform: translateY(-1px); } .oc-header__cta svg { width: 16px; height: 16px; } .oc-header__burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 44px; height: 44px; background: none; border: 1px solid var(--oc-border); border-radius: 4px; cursor: pointer; transition: border-color 160ms ease; } @media (min-width: 1080px) { .oc-header__burger { display: none; } } .oc-header__burger:hover { border-color: var(--oc-text); } .oc-header__burger span { display: block; width: 18px; height: 1.5px; background: var(--oc-text); border-radius: 1px; } /* === Drawer === */ .oc-drawer { position: fixed; inset: 0; z-index: 1100; } .oc-drawer[hidden] { display: none; } .oc-drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 240ms ease; } .oc-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--oc-soft); box-shadow: -16px 0 48px rgba(0,0,0,0.12); transform: translateX(100%); transition: transform 320ms cubic-bezier(.16,1,.3,1); overflow-y: auto; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; color: var(--oc-text); --oc-accent: #1c8394; --oc-text: #1a1a1a; --oc-muted: #5c5c5c; --oc-border: #ececec; --oc-soft: #fafaf7; --oc-beige: #f6f5f0; --oc-white: #ffffff; } .oc-drawer.is-open .oc-drawer__backdrop { opacity: 1; } .oc-drawer.is-open .oc-drawer__panel { transform: translateX(0); } .oc-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--oc-border); background: var(--oc-white); position: sticky; top: 0; z-index: 2; } .oc-drawer__logo img { display: block; height: 28px; width: auto; } .oc-drawer__close { width: 40px; height: 40px; border: 1px solid var(--oc-border); border-radius: 4px; background: var(--oc-white); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--oc-text); transition: border-color 160ms ease; } .oc-drawer__close:hover { border-color: var(--oc-text); } .oc-drawer__close svg { width: 18px; height: 18px; } .oc-drawer__cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); min-height: 64px; background: var(--oc-accent); color: var(--oc-white); font-size: 15px; font-weight: 600; border-radius: 0; flex-shrink: 0; position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -8px 20px rgba(0,0,0,0.08); } .oc-drawer__cta svg { width: 18px; height: 18px; } .oc-drawer__nav { padding: 8px 20px; } .oc-drawer__list { list-style: none; margin: 0; padding: 0; } .oc-drawer__item { border-bottom: 1px solid var(--oc-border); } .oc-drawer__item:last-child { border-bottom: 0; } .oc-drawer__row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 4px; font-size: 17px; font-weight: 500; color: var(--oc-text); background: none; border: 0; font-family: inherit !important; text-align: left; cursor: pointer; } .oc-drawer__row--toggle { gap: 12px; } .oc-drawer__plus { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--oc-muted); transition: transform 240ms ease, color 160ms ease; } .oc-drawer__plus svg { width: 12px; height: 12px; } .oc-drawer__row--toggle[aria-expanded="true"] .oc-drawer__plus { transform: rotate(45deg); color: var(--oc-accent); } .oc-drawer__sub { list-style: none; margin: 0; padding: 0 0 8px; max-height: 0; overflow: hidden; transition: max-height 280ms ease; } .oc-drawer__row--toggle[aria-expanded="true"] + .oc-drawer__sub { max-height: 800px; } .oc-drawer__sub-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px 10px 8px; font-size: 14px; } .oc-drawer__sub-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--oc-white); border: 1px solid var(--oc-border); color: var(--oc-accent); display: flex; align-items: center; justify-content: center; } .oc-drawer__sub-icon svg { width: 14px; height: 14px; } .oc-drawer__sub-thumb { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--oc-beige); } .oc-drawer__sub-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-drawer__sub-thumb--all { display: flex; align-items: center; justify-content: center; color: var(--oc-accent); border: 1px dashed var(--oc-border); background: transparent; } .oc-drawer__sub-thumb--all svg { width: 16px; height: 16px; } .oc-drawer__sub-title { display: block; font-size: 15px; font-weight: 500; color: var(--oc-text); } .oc-drawer__sub-meta { display: block; font-size: 12px; color: var(--oc-muted); margin-top: 2px; } .oc-drawer__trust { margin-top: auto; padding: 16px 20px; background: var(--oc-beige); border-top: 1px solid var(--oc-border); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--oc-muted); } .oc-drawer__trust svg { width: 14px; height: 14px; color: var(--oc-accent); flex: 0 0 auto; } .oc-drawer__trust strong { color: var(--oc-text); font-weight: 600; } .oc-drawer__whatsapp { margin: 16px 20px 8px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--oc-white); border: 1px solid var(--oc-border); border-radius: 4px; transition: border-color 160ms ease; } .oc-drawer__whatsapp:hover { border-color: var(--oc-accent); } .oc-drawer__whatsapp-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; } .oc-drawer__whatsapp-icon svg { width: 20px; height: 20px; } .oc-drawer__whatsapp-body { display: flex; flex-direction: column; gap: 2px; } .oc-drawer__whatsapp-title { font-size: 15px; font-weight: 600; color: var(--oc-text); } .oc-drawer__whatsapp-sub { font-size: 12px; color: var(--oc-muted); } .oc-drawer__phone { display: block; padding: 0 20px 20px; font-size: 13px; color: var(--oc-muted); text-align: center; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .oc-header *, .oc-drawer * { transition: none !important; } } /* === Section: hero-video === */ .oc-hero { position: relative; width: 100%; min-height: var(--oc-hero-min-height-mobile); overflow: hidden; color: var(--oc-hero-text-color); display: flex; align-items: center; } @media (min-width: 768px) { .oc-hero { min-height: var(--oc-hero-min-height-desktop); } } .oc-hero__media { position: absolute; inset: 0; z-index: 0; } .oc-hero__video, .oc-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .oc-hero__overlay { position: absolute; inset: 0; background: var(--oc-hero-overlay); opacity: var(--oc-hero-overlay-opacity); pointer-events: none; } .oc-hero__content { position: relative; z-index: 2; width: 100%; padding: 80px 20px; } .oc-hero__inner { max-width: 720px; margin: 0 auto; text-align: center; } @media (min-width: 1024px) { .oc-hero__inner { margin: 0; padding-left: 40px; text-align: left; } .oc-hero__content { max-width: 1440px; margin: 0 auto; padding: 120px 40px; } } .oc-hero__badge { display: inline-block; padding: 6px 14px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 24px; color: inherit; } .oc-hero__headline { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; font-weight: 600; color: inherit; } .oc-hero__subline { font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.5; margin: 0 0 32px; opacity: 0.92; max-width: 560px; color: inherit; } @media (max-width: 1023px) { .oc-hero__subline { margin-left: auto; margin-right: auto; } } .oc-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } @media (min-width: 1024px) { .oc-hero__ctas { justify-content: flex-start; } } .oc-hero__btn { display: inline-block; padding: 16px 28px; font-size: 0.95rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-decoration: none; border-radius: 4px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; cursor: pointer; border: 1px solid transparent; min-height: 48px; } .oc-hero__btn--primary { background: var(--oc-hero-accent); color: #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .oc-hero__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); filter: brightness(1.08); } .oc-hero__btn--secondary { background: transparent; color: var(--oc-hero-text-color); border-color: currentColor; } .oc-hero__btn--secondary:hover { background: rgba(255, 255, 255, 0.12); } .oc-hero__trust { margin: 24px 0 0; font-size: 0.88rem; opacity: 0.8; color: inherit; } @media (prefers-reduced-motion: reduce) { .oc-hero__video { display: none; } } /* === Section: klinik-cities-strip === */ .oc-kcs { background: var(--oc-kcs-bg); color: var(--oc-kcs-text); padding: 24px 20px; border-top: 1px solid var(--oc-kcs-border); border-bottom: 1px solid var(--oc-kcs-border); } @media (min-width: 768px) { .oc-kcs { padding: 28px 40px; } } .oc-kcs__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; } @media (min-width: 900px) { .oc-kcs__inner { grid-template-columns: auto 1fr; gap: 28px; } } .oc-kcs__lead { display: flex; flex-direction: column; gap: 4px; } .oc-kcs__lead-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--oc-kcs-accent); } .oc-kcs__lead-text { font-size: 0.94rem; font-weight: 600; color: var(--oc-kcs-text); line-height: 1.35; letter-spacing: -0.005em; } .oc-kcs__pills { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: flex-start; } @media (min-width: 900px) { .oc-kcs__pills { justify-content: flex-end; } } .oc-kcs__pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--oc-kcs-card); border: 1px solid var(--oc-kcs-border); border-radius: 999px; font-size: 0.86rem; font-weight: 500; color: var(--oc-kcs-text); text-decoration: none; letter-spacing: 0.005em; white-space: nowrap; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .oc-kcs__pill:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--oc-kcs-accent) 35%, var(--oc-kcs-border)); } .oc-kcs__pill svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--oc-kcs-accent); } .oc-kcs__pill-name { font-weight: 600; } .oc-kcs__pill-role { font-weight: 400; color: var(--oc-kcs-muted); font-size: 0.84rem; } .oc-kcs__pill--main { background: var(--oc-kcs-accent); border-color: transparent; color: #fff; } .oc-kcs__pill--main:hover { filter: brightness(1.08); border-color: transparent; } .oc-kcs__pill--main svg { color: #fff; } .oc-kcs__pill--main .oc-kcs__pill-role { color: rgba(255, 255, 255, 0.78); } /* === Section: klinik-hero === */ .oc-klh { background: var(--oc-klh-bg); color: var(--oc-klh-text); padding: 96px 20px 72px; position: relative; overflow: hidden; } @media (min-width: 768px) { .oc-klh { padding: 128px 40px 96px; } } .oc-klh__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 1024px) { .oc-klh__inner { grid-template-columns: 1.05fr 1fr; gap: 72px; } } .oc-klh__content { max-width: 620px; } .oc-klh__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-klh-accent); margin-bottom: 16px; font-weight: 600; } .oc-klh__headline { font-size: clamp(2.1rem, 4.8vw, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 600; } .oc-klh__subline { font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6; color: var(--oc-klh-muted); margin: 0 0 32px; max-width: 560px; } /* ---------- City-Pills (Standorte direkt im Hero) ---------- */ .oc-klh__cities { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; } .oc-klh__cities-label { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--oc-klh-muted); } .oc-klh__pills { display: flex; flex-wrap: wrap; gap: 8px 10px; } .oc-klh__pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--oc-klh-soft); border: 1px solid var(--oc-klh-border); border-radius: 999px; font-size: 0.9rem; font-weight: 500; color: var(--oc-klh-text); text-decoration: none; letter-spacing: 0.005em; white-space: nowrap; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .oc-klh__pill:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--oc-klh-accent) 35%, var(--oc-klh-border)); } .oc-klh__pill svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--oc-klh-accent); } .oc-klh__pill-name { font-weight: 600; } .oc-klh__pill-role { font-weight: 400; color: var(--oc-klh-muted); font-size: 0.85rem; } .oc-klh__pill--main { background: var(--oc-klh-accent); border-color: transparent; color: #fff; } .oc-klh__pill--main:hover { filter: brightness(1.08); border-color: transparent; } .oc-klh__pill--main svg { color: #fff; } .oc-klh__pill--main .oc-klh__pill-role { color: rgba(255, 255, 255, 0.78); } .oc-klh__scroll { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--oc-klh-accent); color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-klh__scroll:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-klh__scroll svg { width: 16px; height: 16px; } /* ---------- Media ---------- */ .oc-klh__media { position: relative; width: 100%; } .oc-klh__media-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--oc-klh-soft); box-shadow: 0 24px 64px -32px rgba(0,0,0,0.22); } @media (min-width: 1024px) { .oc-klh__media-frame { aspect-ratio: 5 / 6; } } .oc-klh__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .oc-klh__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-klh-accent)); } .oc-klh__caption { position: absolute; bottom: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(15, 15, 15, 0.72); color: #fff; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .oc-klh__caption svg { width: 14px; height: 14px; color: var(--oc-klh-accent); flex-shrink: 0; } /* === Section: klinik-op-moment === */ .oc-klo { background: var(--oc-klo-bg); color: var(--oc-klo-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-klo { padding: 120px 40px; } } .oc-klo__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .oc-klo__inner { grid-template-columns: 1fr 1fr; gap: 72px; } } /* ---------- Media ---------- */ .oc-klo__media { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--oc-klo-card); box-shadow: 0 24px 64px -32px rgba(0,0,0,0.24); } @media (min-width: 1024px) { .oc-klo__media { aspect-ratio: 4 / 5; } } .oc-klo__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-klo__img--placeholder { background: linear-gradient(135deg, #1a1a1a, var(--oc-klo-accent)); } .oc-klo__photo-caption { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; background: rgba(15, 15, 15, 0.72); color: #fff; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ---------- Body ---------- */ .oc-klo__body { max-width: 560px; } .oc-klo__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-klo-accent); margin-bottom: 12px; font-weight: 600; } .oc-klo__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 20px; font-weight: 600; } .oc-klo__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-klo-muted); margin: 0 0 32px; } /* ---------- Facts ---------- */ .oc-klo__facts { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 18px; } .oc-klo__fact { display: flex; align-items: flex-start; gap: 16px; } .oc-klo__fact-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--oc-klo-accent) 12%, transparent); color: var(--oc-klo-accent); display: flex; align-items: center; justify-content: center; } .oc-klo__fact-icon svg { width: 20px; height: 20px; } .oc-klo__fact-body { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; } .oc-klo__fact-title { font-size: 0.98rem; font-weight: 600; color: var(--oc-klo-text); line-height: 1.4; letter-spacing: -0.005em; } .oc-klo__fact-detail { font-size: 0.9rem; line-height: 1.55; color: var(--oc-klo-muted); } /* ---------- Quote ---------- */ .oc-klo__quote { margin: 0; padding: 22px 24px; background: var(--oc-klo-card); border-left: 2px solid var(--oc-klo-accent); border-radius: 4px; } .oc-klo__quote blockquote { margin: 0; display: flex; gap: 12px; align-items: flex-start; } .oc-klo__quote-mark { width: 20px; height: 16px; flex-shrink: 0; color: var(--oc-klo-accent); margin-top: 4px; } .oc-klo__quote blockquote p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--oc-klo-text); font-style: italic; } .oc-klo__quote figcaption { margin: 10px 0 0 32px; font-size: 0.85rem; color: var(--oc-klo-muted); font-weight: 500; letter-spacing: 0.01em; } /* === Section: klinik-rooms === */ .oc-klr { background: var(--oc-klr-bg); color: var(--oc-klr-text); padding: 80px 20px; scroll-margin-top: 80px; } @media (min-width: 768px) { .oc-klr { padding: 120px 40px; } } .oc-klr__inner { max-width: 1280px; margin: 0 auto; } .oc-klr__header { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 48px; align-items: end; } @media (min-width: 900px) { .oc-klr__header { grid-template-columns: 1.2fr 1fr; gap: 48px; } } .oc-klr__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-klr-accent); margin-bottom: 12px; font-weight: 600; } .oc-klr__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0; font-weight: 600; max-width: 620px; } .oc-klr__sub { font-size: 1rem; line-height: 1.6; color: var(--oc-klr-muted); margin: 0; max-width: 460px; } /* ---------- Bento Grid ---------- */ .oc-klr__grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 14px; } @media (min-width: 640px) { .oc-klr__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; gap: 16px; } } @media (min-width: 1024px) { .oc-klr__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; gap: 18px; } } .oc-klr__tile { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: #f0f0f0; isolation: isolate; grid-column: span 1; grid-row: span 1; } /* Desktop: 6-col bento */ @media (min-width: 1024px) { .oc-klr__tile--regular { grid-column: span 2; grid-row: span 1; } .oc-klr__tile--wide { grid-column: span 3; grid-row: span 1; } .oc-klr__tile--tall { grid-column: span 2; grid-row: span 2; } .oc-klr__tile--featured { grid-column: span 4; grid-row: span 2; } .oc-klr__tile--column { grid-column: span 2; grid-row: span 2; } } /* Tablet */ @media (min-width: 640px) and (max-width: 1023px) { .oc-klr__tile--wide, .oc-klr__tile--featured { grid-column: span 2; } .oc-klr__tile--tall, .oc-klr__tile--column { grid-row: span 2; } } .oc-klr__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .oc-klr__img--placeholder { background: linear-gradient(135deg, #c9a97a, var(--oc-klr-accent)); } .oc-klr__tile:hover .oc-klr__img { transform: scale(1.04); } .oc-klr__tile-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100% ); pointer-events: none; } .oc-klr__tile-meta { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .oc-klr__chip { display: inline-block; padding: 6px 12px; background: var(--oc-klr-accent); color: #fff; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; } .oc-klr__tile-caption { display: inline-block; font-size: 0.88rem; color: #fff; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; text-shadow: 0 1px 6px rgba(0,0,0,0.35); max-width: 100%; } .oc-klr__footnote { margin: 40px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--oc-klr-muted); max-width: 640px; font-style: italic; } /* === Section: klinik-standorte === */ .oc-kls { background: var(--oc-kls-bg); color: var(--oc-kls-text); padding: 80px 20px; scroll-margin-top: 80px; } @media (min-width: 768px) { .oc-kls { padding: 120px 40px; } } .oc-kls__inner { max-width: 1280px; margin: 0 auto; } .oc-kls__header { max-width: 720px; margin: 0 0 48px; } .oc-kls__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-kls-accent); margin-bottom: 12px; font-weight: 600; } .oc-kls__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; font-weight: 600; } .oc-kls__sub { font-size: 1rem; line-height: 1.6; color: var(--oc-kls-muted); margin: 0; } /* ---------- Badges ---------- */ .oc-kls__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .oc-kls__badge svg { width: 13px; height: 13px; flex-shrink: 0; } .oc-kls__badge--hub { background: var(--oc-kls-accent); color: #fff; } .oc-kls__badge--sat { background: color-mix(in srgb, var(--oc-kls-accent) 10%, transparent); color: var(--oc-kls-accent); border: 1px solid color-mix(in srgb, var(--oc-kls-accent) 22%, transparent); } /* ---------- HUB Card ---------- */ .oc-kls__hubs { margin-bottom: 48px; } .oc-kls__hub { background: var(--oc-kls-card); border: 1px solid var(--oc-kls-border); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1fr; box-shadow: 0 20px 56px -30px rgba(0,0,0,0.18); position: relative; } .oc-kls__hub::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--oc-kls-accent); border-radius: 18px 18px 0 0; z-index: 2; } @media (min-width: 900px) { .oc-kls__hub { grid-template-columns: 1fr 1fr; } } .oc-kls__hub-media { position: relative; aspect-ratio: 4 / 3; background: var(--oc-kls-sat); overflow: hidden; } @media (min-width: 900px) { .oc-kls__hub-media { aspect-ratio: auto; min-height: 440px; } } .oc-kls__hub-img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-kls__hub-img--placeholder { background: linear-gradient(135deg, #4c4c4c, var(--oc-kls-accent)); } .oc-kls__hub-body { padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 16px; } @media (min-width: 900px) { .oc-kls__hub-body { padding: 48px 44px; gap: 18px; } } .oc-kls__hub-city { font-size: clamp(1.6rem, 2.8vw, 2rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin: 0; } .oc-kls__hub-tagline { font-size: 1rem; line-height: 1.55; color: var(--oc-kls-muted); margin: 0; } .oc-kls__hub-meta { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--oc-kls-sat); border-radius: 10px; } .oc-kls__meta-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.5; color: var(--oc-kls-text); } .oc-kls__meta-row svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--oc-kls-accent); } .oc-kls__hub-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .oc-kls__hub-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; line-height: 1.5; color: var(--oc-kls-text); } .oc-kls__hub-points svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--oc-kls-accent); } .oc-kls__hub-travel-note { margin: 4px 0 0; padding: 14px 16px; font-size: 0.9rem; line-height: 1.55; color: var(--oc-kls-muted); background: transparent; border-left: 2px solid var(--oc-kls-accent); font-style: italic; } .oc-kls__hub-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 14px 22px; background: var(--oc-kls-accent); color: #fff; font-size: 0.95rem; font-weight: 600; text-decoration: none; border-radius: 4px; transition: transform 0.15s, filter 0.15s, gap 0.15s; } .oc-kls__hub-cta svg { width: 16px; height: 16px; } .oc-kls__hub-cta:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } /* ---------- Divider Row ---------- */ .oc-kls__sat-intro { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; } .oc-kls__divider { flex: 1; height: 1px; background: var(--oc-kls-border); } .oc-kls__sat-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oc-kls-muted); font-weight: 600; white-space: nowrap; } /* ---------- Satellites ---------- */ .oc-kls__sat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .oc-kls__sat-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (min-width: 960px) { .oc-kls__sat-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .oc-kls__sat { background: var(--oc-kls-card); border: 1px solid var(--oc-kls-border); border-radius: 14px; padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .oc-kls__sat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--oc-kls-accent) 32%, var(--oc-kls-border)); box-shadow: 0 16px 40px -24px rgba(0,0,0,0.14); } .oc-kls__sat-media { margin: -28px -26px 4px; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--oc-kls-accent) 8%, var(--oc-kls-card)); } .oc-kls__sat-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .oc-kls__sat:hover .oc-kls__sat-img { transform: scale(1.03); } .oc-kls__sat-head { display: flex; align-items: center; justify-content: space-between; } .oc-kls__sat-city { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0; } .oc-kls__sat-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .oc-kls__sat-meta li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--oc-kls-text); } .oc-kls__sat-meta svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--oc-kls-accent); } .oc-kls__next-label { font-style: normal; font-weight: 600; color: var(--oc-kls-muted); margin-right: 4px; } .oc-kls__sat-note { font-size: 0.86rem; line-height: 1.55; color: var(--oc-kls-muted); margin: 0; padding-top: 12px; border-top: 1px dashed var(--oc-kls-border); } .oc-kls__sat-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--oc-kls-accent); text-decoration: none; transition: gap 0.15s ease; margin-top: auto; } .oc-kls__sat-cta svg { width: 14px; height: 14px; } .oc-kls__sat-cta:hover { gap: 12px; } /* ---------- Footer-Note ---------- */ .oc-kls__footer { margin: 40px auto 0; max-width: 620px; text-align: center; font-size: 0.88rem; line-height: 1.6; color: var(--oc-kls-muted); font-style: italic; } /* === Section: klinik-team === */ .oc-klt { background: var(--oc-klt-bg); color: var(--oc-klt-text); padding: 80px 0; } @media (min-width: 768px) { .oc-klt { padding: 120px 0; } } .oc-klt__inner { max-width: 1280px; margin: 0 auto; } .oc-klt__header { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 0 20px; margin: 0 0 40px; align-items: end; } @media (min-width: 768px) { .oc-klt__header { padding: 0 40px; } } @media (min-width: 900px) { .oc-klt__header { grid-template-columns: 1.3fr 1fr; gap: 48px; } } .oc-klt__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-klt-accent); margin-bottom: 12px; font-weight: 600; } .oc-klt__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; font-weight: 600; } .oc-klt__sub { font-size: 1rem; line-height: 1.6; color: var(--oc-klt-muted); margin: 0; max-width: 560px; } .oc-klt__meta-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 24px 28px; background: var(--oc-klt-card); border: 1px solid var(--oc-klt-border); border-radius: 12px; } @media (max-width: 640px) { .oc-klt__meta-strip { grid-template-columns: 1fr; gap: 16px; } } .oc-klt__stat { display: flex; flex-direction: column; gap: 4px; } .oc-klt__stat strong { font-size: 1.4rem; font-weight: 700; color: var(--oc-klt-accent); letter-spacing: -0.015em; line-height: 1.1; } .oc-klt__stat span { font-size: 0.85rem; color: var(--oc-klt-muted); line-height: 1.4; } /* ---------- Rail ---------- */ .oc-klt__rail-wrapper { position: relative; } .oc-klt__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 20px; padding: 4px 20px 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .oc-klt__rail::-webkit-scrollbar { display: none; } @media (min-width: 640px) { .oc-klt__rail { grid-auto-columns: 40%; gap: 16px; padding: 4px 40px 20px; } } @media (min-width: 1024px) { .oc-klt__rail { grid-auto-columns: 22%; gap: 20px; } } .oc-klt__card { scroll-snap-align: start; display: flex; flex-direction: column; background: transparent; border-radius: 14px; overflow: hidden; } .oc-klt__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--oc-klt-card); } .oc-klt__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .oc-klt__card:hover .oc-klt__img { transform: scale(1.03); } .oc-klt__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-klt-accent)); } .oc-klt__card-body { padding: 14px 4px 0; display: flex; flex-direction: column; gap: 2px; } .oc-klt__name { font-size: 0.98rem; font-weight: 600; color: var(--oc-klt-text); line-height: 1.35; letter-spacing: -0.005em; } .oc-klt__role { font-size: 0.84rem; color: var(--oc-klt-muted); line-height: 1.45; } /* ---------- Nav Buttons ---------- */ .oc-klt__nav { position: absolute; top: calc(50% - 22px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: #fff; border: 1px solid var(--oc-klt-border); color: var(--oc-klt-text); cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.1); transition: transform 0.15s, filter 0.15s; z-index: 2; } .oc-klt__nav svg { width: 18px; height: 18px; } .oc-klt__nav:hover { transform: translateY(-50%) scale(1.06); } .oc-klt__nav--prev { left: 12px; } .oc-klt__nav--next { right: 12px; } @media (min-width: 1024px) { .oc-klt__nav { display: inline-flex; } } /* === Section: methode-cross-teaser === */ .oc-mct { background: var(--oc-mct-bg); color: var(--oc-mct-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-mct { padding: 112px 40px; } } .oc-mct__inner { max-width: 1240px; margin: 0 auto; } .oc-mct__head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .oc-mct__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-mct-accent); font-weight: 600; margin-bottom: 14px; } .oc-mct__headline { font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 16px; font-weight: 600; } .oc-mct__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-mct-muted); margin: 0; } .oc-mct__grid { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 900px) { .oc-mct__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } .oc-mct__card { background: var(--oc-mct-card); border: 1px solid var(--oc-mct-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; } .oc-mct__card:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -32px rgba(0,0,0,0.22); } .oc-mct__photo { aspect-ratio: 16/10; overflow: hidden; background: #eee; } .oc-mct__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .oc-mct__card:hover .oc-mct__img { transform: scale(1.03); } .oc-mct__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-mct-accent)); } .oc-mct__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .oc-mct__kicker { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oc-mct-accent); } .oc-mct__title { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0; font-weight: 600; color: var(--oc-mct-text); } .oc-mct__copy { font-size: 0.95rem; line-height: 1.6; color: var(--oc-mct-muted); margin: 0; } .oc-mct__link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--oc-mct-accent); font-size: 0.92rem; font-weight: 600; transition: gap 0.15s ease; } .oc-mct__card:hover .oc-mct__link { gap: 12px; } .oc-mct__link svg { width: 16px; height: 16px; } /* === Section: methode-ergebnis === */ .oc-mer { background: var(--oc-mer-bg); color: var(--oc-mer-text); padding: 96px 20px; } @media (min-width: 768px) { .oc-mer { padding: 128px 40px; } } .oc-mer__inner { max-width: 1180px; margin: 0 auto; } .oc-mer__head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .oc-mer__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-mer-accent); font-weight: 600; margin-bottom: 14px; } .oc-mer__headline { font-size: clamp(1.9rem, 3.8vw, 2.6rem); line-height: 1.16; letter-spacing: -0.015em; margin: 0 0 16px; font-weight: 600; } .oc-mer__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-mer-muted); margin: 0; } .oc-mer__grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 900px) { .oc-mer__grid { grid-template-columns: 1fr 1.15fr; gap: 22px; } } .oc-mer__card { background: var(--oc-mer-card); border: 1px solid var(--oc-mer-border); border-radius: 16px; padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 12px; } .oc-mer__card--stat { align-items: flex-start; justify-content: center; min-height: 280px; } .oc-mer__stat-value { font-size: clamp(3.4rem, 7vw, 4.8rem); font-weight: 600; color: var(--oc-mer-accent); letter-spacing: -0.025em; line-height: 1; } .oc-mer__stat-label { display: block; font-size: 1.05rem; font-weight: 600; color: var(--oc-mer-text); margin-top: 2px; line-height: 1.3; } .oc-mer__kicker { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oc-mer-accent); } .oc-mer__title { font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0; font-weight: 600; color: var(--oc-mer-text); } .oc-mer__copy { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--oc-mer-muted); } .oc-mer__note { display: block; font-size: 0.84rem; color: var(--oc-mer-muted); font-style: italic; margin-top: 4px; } .oc-mer__quote { margin: 6px 0 0; padding: 16px 18px; background: color-mix(in srgb, var(--oc-mer-accent) 8%, transparent); border-left: 2px solid var(--oc-mer-accent); border-radius: 4px; } .oc-mer__quote blockquote { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--oc-mer-text); font-style: italic; } .oc-mer__quote figcaption { margin-top: 8px; font-size: 0.78rem; color: var(--oc-mer-muted); font-weight: 500; letter-spacing: 0.02em; } .oc-mer__link { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 8px; color: var(--oc-mer-accent); font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: gap 0.15s ease; } .oc-mer__link:hover { gap: 12px; } .oc-mer__link svg { width: 16px; height: 16px; } .oc-mer__footnote { max-width: 720px; margin: 36px auto 0; text-align: center; font-size: 0.86rem; line-height: 1.55; color: var(--oc-mer-muted); font-style: italic; } /* === Section: methode-fue-basics === */ .oc-mfb { background: var(--oc-mfb-bg); color: var(--oc-mfb-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-mfb { padding: 112px 40px; } } .oc-mfb__inner { max-width: 1240px; margin: 0 auto; } .oc-mfb__head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .oc-mfb__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-mfb-accent); font-weight: 600; margin-bottom: 14px; } .oc-mfb__headline { font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 16px; font-weight: 600; } .oc-mfb__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-mfb-muted); margin: 0; } .oc-mfb__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 18px; counter-reset: step; } @media (min-width: 768px) { .oc-mfb__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } } .oc-mfb__step { background: var(--oc-mfb-card); border: 1px solid var(--oc-mfb-border); border-radius: 14px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 10px; } .oc-mfb__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: color-mix(in srgb, var(--oc-mfb-accent) 12%, transparent); color: var(--oc-mfb-accent); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 4px; } .oc-mfb__title { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0; font-weight: 600; color: var(--oc-mfb-text); } .oc-mfb__body { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--oc-mfb-muted); } .oc-mfb__detail { margin-top: 6px; padding: 8px 12px; background: color-mix(in srgb, var(--oc-mfb-accent) 6%, transparent); border-left: 2px solid var(--oc-mfb-accent); border-radius: 4px; font-size: 0.85rem; color: var(--oc-mfb-text); line-height: 1.5; } .oc-mfb__note { max-width: 720px; margin: 36px auto 0; text-align: center; font-size: 0.95rem; line-height: 1.6; color: var(--oc-mfb-muted); font-style: italic; } .oc-mfb__note p { margin: 0; } /* === Section: methode-hero === */ .oc-mhe { background: var(--oc-mhe-bg); color: var(--oc-mhe-text); padding: 64px 20px 56px; } @media (min-width: 768px) { .oc-mhe { padding: 96px 40px 80px; } } .oc-mhe__inner { max-width: 1280px; margin: 0 auto; } .oc-mhe__split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .oc-mhe__split { grid-template-columns: 1fr 1fr; gap: 72px; } } .oc-mhe__body { max-width: 560px; } .oc-mhe__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-mhe-accent); font-weight: 600; margin-bottom: 16px; } .oc-mhe__headline { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 600; } .oc-mhe__sub { font-size: 1.05rem; line-height: 1.6; color: var(--oc-mhe-muted); margin: 0 0 28px; } .oc-mhe__pills { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; } .oc-mhe__pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 500; background: var(--oc-mhe-soft); color: var(--oc-mhe-text); border: 1px solid var(--oc-mhe-border); letter-spacing: 0.005em; } .oc-mhe__pill--hl { background: color-mix(in srgb, var(--oc-mhe-accent) 12%, var(--oc-mhe-soft)); color: var(--oc-mhe-accent); border-color: color-mix(in srgb, var(--oc-mhe-accent) 28%, transparent); font-weight: 600; } .oc-mhe__ctas { display: flex; flex-wrap: wrap; gap: 14px; } .oc-mhe__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: 4px; transition: transform 0.15s, filter 0.15s, gap 0.15s; } .oc-mhe__cta svg { width: 18px; height: 18px; } .oc-mhe__cta--primary { background: var(--oc-mhe-accent); color: #fff; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--oc-mhe-accent) 70%, transparent); } .oc-mhe__cta--primary:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-mhe__cta--ghost { background: transparent; color: var(--oc-mhe-text); border: 1px solid var(--oc-mhe-border); } .oc-mhe__cta--ghost:hover { background: var(--oc-mhe-soft); } .oc-mhe__media-frame { position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: var(--oc-mhe-soft); box-shadow: 0 28px 64px -36px rgba(0,0,0,0.28); } @media (min-width: 1024px) { .oc-mhe__media-frame { aspect-ratio: 5/6; } } .oc-mhe__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-mhe__img--placeholder { background: linear-gradient(135deg, #1a1a1a, var(--oc-mhe-accent)); } .oc-mhe__caption { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(15,15,15,0.78); color: #fff; border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: calc(100% - 36px); } .oc-mhe__caption-icon { width: 16px; height: 16px; color: var(--oc-mhe-accent); flex-shrink: 0; } .oc-mhe__caption-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .oc-mhe__caption-text strong { font-size: 0.88rem; font-weight: 600; letter-spacing: 0.005em; } .oc-mhe__caption-text span { font-size: 0.72rem; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; } /* === Section: methode-prp === */ .oc-mpr { background: var(--oc-mpr-bg); color: var(--oc-mpr-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-mpr { padding: 120px 40px; } } .oc-mpr__inner { max-width: 1280px; margin: 0 auto; } .oc-mpr__split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .oc-mpr__split { grid-template-columns: 1fr 1.05fr; gap: 72px; } } .oc-mpr__photo { position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: var(--oc-mpr-card); box-shadow: 0 24px 64px -32px rgba(0,0,0,0.24); } .oc-mpr__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-mpr__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-mpr-accent)); } .oc-mpr__badge { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--oc-mpr-accent); color: #fff; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 8px 20px -8px rgba(28,131,148,0.5); } .oc-mpr__badge svg { width: 14px; height: 14px; } .oc-mpr__body { max-width: 580px; } .oc-mpr__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-mpr-accent); font-weight: 600; margin-bottom: 14px; } .oc-mpr__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-mpr__sub { font-size: 1.04rem; line-height: 1.6; color: var(--oc-mpr-muted); margin: 0 0 28px; } .oc-mpr__steps { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; } .oc-mpr__step { display: flex; gap: 14px; align-items: flex-start; } .oc-mpr__step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--oc-mpr-accent) 12%, transparent); color: var(--oc-mpr-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; } .oc-mpr__step-title { display: block; font-size: 0.98rem; font-weight: 600; color: var(--oc-mpr-text); margin-bottom: 4px; line-height: 1.35; } .oc-mpr__step-text { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--oc-mpr-muted); } .oc-mpr__lead { padding: 16px 18px; background: var(--oc-mpr-card); border-left: 2px solid var(--oc-mpr-accent); border-radius: 4px; } .oc-mpr__lead strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-mpr-accent); margin-bottom: 6px; } .oc-mpr__lead p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--oc-mpr-text); } /* === Section: methode-waw === */ .oc-mwa { background: var(--oc-mwa-bg); color: var(--oc-mwa-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-mwa { padding: 120px 40px; } } .oc-mwa__inner { max-width: 1280px; margin: 0 auto; } .oc-mwa__body { max-width: 720px; margin: 0 auto 36px; text-align: center; } .oc-mwa__body .oc-mwa__inventor { margin-left: auto; margin-right: auto; } .oc-mwa__hero { max-width: 780px; margin: 0 auto 48px; } .oc-mwa__media-frame { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #0d0d0d; box-shadow: 0 24px 64px -32px rgba(0,0,0,0.28); } .oc-mwa__img, .oc-mwa__video { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-mwa__img--placeholder { background: linear-gradient(135deg, #1a1a1a, var(--oc-mwa-accent)); } .oc-mwa__brand-pill { position: absolute; bottom: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(15,15,15,0.78); color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .oc-mwa__brand-pill svg { width: 14px; height: 14px; color: var(--oc-mwa-accent); } .oc-mwa__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-mwa-accent); margin-bottom: 14px; font-weight: 600; } .oc-mwa__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-mwa__sub { font-size: 1.04rem; line-height: 1.6; color: var(--oc-mwa-muted); margin: 0 0 18px; } .oc-mwa__inventor { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; margin: 0 0 18px; background: var(--oc-mwa-card); border: 1px solid var(--oc-mwa-border); border-radius: 999px; } .oc-mwa__inventor-img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; display: block; flex-shrink: 0; background: var(--oc-mwa-border); } .oc-mwa__inventor-img--placeholder { display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600; color: var(--oc-mwa-muted); letter-spacing: 0.04em; } .oc-mwa__inventor-cap { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; } .oc-mwa__inventor-cap strong { font-size: 0.86rem; font-weight: 600; color: var(--oc-mwa-text); } .oc-mwa__inventor-cap span { font-size: 0.74rem; color: var(--oc-mwa-muted); letter-spacing: 0.01em; } .oc-mwa__lead { font-size: 0.96rem; line-height: 1.6; color: var(--oc-mwa-text); margin: 0; padding: 16px 18px; background: var(--oc-mwa-card); border-left: 2px solid var(--oc-mwa-accent); border-radius: 4px; } /* ---------- Icon-Tile-Grid ---------- */ .oc-mwa__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 700px) { .oc-mwa__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (min-width: 1024px) { .oc-mwa__grid { grid-template-columns: repeat(6, 1fr); gap: 14px; } } .oc-mwa__tile { background: var(--oc-mwa-card); border: 1px solid var(--oc-mwa-border); border-radius: 14px; padding: 22px 18px 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; transition: transform 0.2s ease, border-color 0.2s ease; } .oc-mwa__tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--oc-mwa-accent) 35%, var(--oc-mwa-border)); } .oc-mwa__tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--oc-mwa-accent) 10%, transparent); color: var(--oc-mwa-accent); margin-bottom: 4px; } .oc-mwa__tile-icon svg { width: 22px; height: 22px; } .oc-mwa__tile-kicker { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--oc-mwa-muted); } .oc-mwa__tile-title { font-size: 0.92rem; line-height: 1.3; font-weight: 600; color: var(--oc-mwa-text); letter-spacing: -0.005em; } .oc-mwa__note { margin: 40px auto 0; max-width: 720px; padding: 16px 22px; background: var(--oc-mwa-card); border-left: 2px solid var(--oc-mwa-accent); border-radius: 4px; } .oc-mwa__note strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-mwa-accent); margin-bottom: 6px; } .oc-mwa__note p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--oc-mwa-text); } /* === Section: op-danach === */ .oc-opn { background: var(--oc-opn-bg); color: var(--oc-opn-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-opn { padding: 120px 40px; } } .oc-opn__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .oc-opn__inner { grid-template-columns: 1fr 1fr; gap: 72px; } } .oc-opn__media-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--oc-opn-card); box-shadow: 0 24px 64px -32px rgba(0,0,0,0.22); } .oc-opn__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-opn__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-opn-accent)); } .oc-opn__caption { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; background: rgba(15,15,15,0.72); color: #fff; font-size: 0.78rem; font-weight: 500; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .oc-opn__body { max-width: 560px; } .oc-opn__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-opn-accent); margin-bottom: 12px; font-weight: 600; } .oc-opn__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 18px; font-weight: 600; } .oc-opn__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-opn-muted); margin: 0 0 28px; } .oc-opn__phases { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; } .oc-opn__phase { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--oc-opn-border); } .oc-opn__phase:last-child { border-bottom: 1px solid var(--oc-opn-border); } .oc-opn__phase-when { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--oc-opn-accent); padding-top: 2px; } .oc-opn__phase-text { display: flex; flex-direction: column; gap: 4px; } .oc-opn__phase-text strong { font-size: 0.96rem; font-weight: 600; color: var(--oc-opn-text); line-height: 1.4; } .oc-opn__phase-text span { font-size: 0.9rem; line-height: 1.55; color: var(--oc-opn-muted); } @media (max-width: 540px) { .oc-opn__phase { grid-template-columns: 1fr; gap: 4px; } } .oc-opn__cta { display: inline-flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 600; color: var(--oc-opn-accent); text-decoration: none; transition: gap 0.15s ease; } .oc-opn__cta:hover { gap: 14px; } .oc-opn__cta svg { width: 18px; height: 18px; } /* === Section: op-hero === */ .oc-oph { background: var(--oc-oph-bg); color: var(--oc-oph-text); padding: 96px 20px 72px; position: relative; overflow: hidden; } @media (min-width: 768px) { .oc-oph { padding: 128px 40px 96px; } } .oc-oph__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 1024px) { .oc-oph__inner { grid-template-columns: 1.05fr 1fr; gap: 72px; } } .oc-oph__content { max-width: 620px; } .oc-oph__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-oph-accent); margin-bottom: 16px; font-weight: 600; } .oc-oph__headline { font-size: clamp(2.1rem, 4.8vw, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 600; } .oc-oph__subline { font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6; color: var(--oc-oph-muted); margin: 0 0 32px; max-width: 560px; } .oc-oph__metas { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-wrap: wrap; gap: 8px 10px; } .oc-oph__meta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--oc-oph-soft); border: 1px solid var(--oc-oph-border); border-radius: 999px; font-size: 0.88rem; font-weight: 500; color: var(--oc-oph-text); } .oc-oph__meta-icon { width: 16px; height: 16px; color: var(--oc-oph-accent); display: flex; } .oc-oph__meta-icon svg { width: 100%; height: 100%; } .oc-oph__scroll { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--oc-oph-accent); color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-oph__scroll:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-oph__scroll svg { width: 16px; height: 16px; } .oc-oph__media { position: relative; width: 100%; } .oc-oph__media-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--oc-oph-soft); box-shadow: 0 24px 64px -32px rgba(0,0,0,0.22); } @media (min-width: 1024px) { .oc-oph__media-frame { aspect-ratio: 5 / 6; } } .oc-oph__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .oc-oph__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-oph-accent)); } .oc-oph__caption { position: absolute; bottom: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(15, 15, 15, 0.72); color: #fff; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .oc-oph__caption svg { width: 14px; height: 14px; color: var(--oc-oph-accent); flex-shrink: 0; } /* === Section: op-schmerzfrei === */ .oc-ops { background: var(--oc-ops-bg); color: var(--oc-ops-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-ops { padding: 112px 40px; } } .oc-ops__inner { max-width: 1200px; margin: 0 auto; } .oc-ops__head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .oc-ops__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ops-accent); margin-bottom: 14px; font-weight: 600; } .oc-ops__headline { font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-ops__sub { font-size: 1.04rem; line-height: 1.6; color: var(--oc-ops-muted); margin: 0; } .oc-ops__grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 760px) { .oc-ops__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .oc-ops__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } } .oc-ops__card { background: var(--oc-ops-card); border: 1px solid var(--oc-ops-border); border-radius: 16px; padding: 28px 26px 26px; } .oc-ops__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--oc-ops-accent) 16%, transparent); color: var(--oc-ops-accent); margin-bottom: 16px; } .oc-ops__icon svg { width: 22px; height: 22px; } .oc-ops__kicker { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--oc-ops-accent); margin-bottom: 6px; } .oc-ops__title { font-size: 1.15rem; line-height: 1.3; font-weight: 600; margin: 0 0 10px; color: var(--oc-ops-text); } .oc-ops__body { font-size: 0.94rem; line-height: 1.6; color: var(--oc-ops-muted); margin: 0; } .oc-ops__quote { margin: 48px auto 0; max-width: 720px; padding: 22px 26px; background: var(--oc-ops-card); border-left: 2px solid var(--oc-ops-accent); border-radius: 4px; } .oc-ops__quote blockquote { margin: 0; display: flex; gap: 12px; align-items: flex-start; } .oc-ops__quote-mark { width: 20px; height: 16px; flex-shrink: 0; color: var(--oc-ops-accent); margin-top: 4px; } .oc-ops__quote blockquote p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--oc-ops-text); font-style: italic; } .oc-ops__quote figcaption { margin: 12px 0 0 32px; font-size: 0.85rem; color: var(--oc-ops-muted); font-weight: 500; } /* === Section: op-timeline === */ .oc-opt { background: var(--oc-opt-bg); color: var(--oc-opt-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-opt { padding: 112px 40px; } } .oc-opt__inner { max-width: 1240px; margin: 0 auto; } .oc-opt__head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .oc-opt__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-opt-accent); margin-bottom: 14px; font-weight: 600; } .oc-opt__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-opt__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-opt-muted); margin: 0; } /* ---------- Timeline ---------- */ .oc-opt__line { list-style: none; padding: 0; margin: 0; position: relative; } .oc-opt__line::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: 16px; width: 2px; background: var(--oc-opt-border); } @media (min-width: 1024px) { .oc-opt__line::before { left: 50%; transform: translateX(-1px); } } .oc-opt__phase { position: relative; padding-left: 56px; padding-bottom: 56px; } .oc-opt__phase:last-child { padding-bottom: 0; } @media (min-width: 1024px) { .oc-opt__phase { padding-left: 0; padding-bottom: 80px; width: 50%; } .oc-opt__phase--left { padding-right: 56px; } .oc-opt__phase--right { margin-left: 50%; padding-left: 56px; } } .oc-opt__node { position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--oc-opt-bg); border: 2px solid var(--oc-opt-accent); display: flex; align-items: center; justify-content: center; z-index: 1; } @media (min-width: 1024px) { .oc-opt__phase--left .oc-opt__node { left: auto; right: -18px; top: 12px; } .oc-opt__phase--right .oc-opt__node { left: -18px; top: 12px; } } .oc-opt__node-num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--oc-opt-accent); } .oc-opt__panel { background: var(--oc-opt-card); border: 1px solid var(--oc-opt-border); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px -28px rgba(0,0,0,0.18); } .oc-opt__media { position: relative; aspect-ratio: 16 / 10; background: #f0eee6; overflow: hidden; } .oc-opt__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .oc-opt__panel:hover .oc-opt__img { transform: scale(1.03); } .oc-opt__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-opt-accent)); } .oc-opt__time-pill { position: absolute; top: 14px; left: 14px; padding: 7px 13px; background: rgba(15, 15, 15, 0.78); color: #fff; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .oc-opt__body { padding: 24px 26px 26px; } .oc-opt__kicker { display: inline-block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--oc-opt-accent); margin-bottom: 8px; } .oc-opt__title { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.25; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; } .oc-opt__text { font-size: 0.96rem; line-height: 1.55; color: var(--oc-opt-muted); margin: 0 0 16px; } .oc-opt__bullets { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px dashed var(--oc-opt-border); display: flex; flex-direction: column; gap: 8px; } .oc-opt__bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--oc-opt-text); } .oc-opt__bullets svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--oc-opt-accent); margin-top: 3px; } /* === Section: op-vorbereitung === */ .oc-opv { background: var(--oc-opv-bg); color: var(--oc-opv-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-opv { padding: 112px 40px; } } .oc-opv__inner { max-width: 1180px; margin: 0 auto; } .oc-opv__head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .oc-opv__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-opv-accent); margin-bottom: 14px; font-weight: 600; } .oc-opv__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-opv__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-opv-muted); margin: 0; } .oc-opv__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 700px) { .oc-opv__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .oc-opv__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .oc-opv__card { position: relative; padding: 26px 24px 24px; background: var(--oc-opv-card); border: 1px solid var(--oc-opv-border); border-radius: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .oc-opv__card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(0,0,0,0.12); } .oc-opv__kicker { display: inline-block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--oc-opv-accent); background: color-mix(in srgb, var(--oc-opv-accent) 10%, transparent); padding: 4px 9px; border-radius: 999px; margin-bottom: 16px; } .oc-opv__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--oc-opv-accent) 10%, transparent); color: var(--oc-opv-accent); margin-bottom: 14px; } .oc-opv__icon svg { width: 22px; height: 22px; } .oc-opv__title { font-size: 1.05rem; line-height: 1.3; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.005em; } .oc-opv__body { font-size: 0.93rem; line-height: 1.55; color: var(--oc-opv-muted); margin: 0; } .oc-opv__note { margin: 36px auto 0; max-width: 720px; padding: 18px 22px; background: var(--oc-opv-card); border-left: 2px solid var(--oc-opv-accent); border-radius: 4px; } .oc-opv__note strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-opv-accent); margin-bottom: 6px; } .oc-opv__note p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--oc-opv-text); } /* === Section: patient-hub === */ .oc-phub { background: var(--oc-ph-bg); color: var(--oc-ph-text); } /* ---------- Hero ---------- */ .oc-phub__hero { padding: 72px 20px 40px; } @media (min-width: 768px) { .oc-phub__hero { padding: 112px 40px 56px; } } .oc-phub__hero-inner { max-width: 880px; margin: 0 auto; text-align: center; } .oc-phub__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ph-accent); margin-bottom: 14px; font-weight: 600; } .oc-phub__headline { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 600; } .oc-phub__subline { font-size: clamp(1rem, 1.5vw, 1.08rem); line-height: 1.6; color: var(--oc-ph-muted); margin: 0 auto; max-width: 640px; } /* ---------- Stats ---------- */ .oc-phub__stats-wrap { padding: 0 20px 48px; } @media (min-width: 768px) { .oc-phub__stats-wrap { padding: 0 40px 72px; } } .oc-phub__stats { max-width: 1080px; margin: 0 auto; background: var(--oc-ph-soft); border-radius: 16px; padding: 32px 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } @media (min-width: 768px) { .oc-phub__stats { padding: 40px 24px; gap: 20px; } .oc-phub__stats--3 { grid-template-columns: repeat(3, 1fr); } .oc-phub__stats--4 { grid-template-columns: repeat(4, 1fr); } } .oc-phub__stat { text-align: center; position: relative; display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 0 10px; } @media (min-width: 768px) { .oc-phub__stat:not(:last-child)::after { content: ""; position: absolute; right: -8px; top: 20%; height: 60%; width: 1px; background: var(--oc-ph-border); } } .oc-phub__stat-value { font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--oc-ph-accent); } .oc-phub__stat-label { font-size: 0.88rem; font-weight: 600; color: var(--oc-ph-text); max-width: 200px; line-height: 1.35; } .oc-phub__stat-sub { font-size: 0.78rem; color: var(--oc-ph-muted); max-width: 200px; line-height: 1.35; } /* ---------- Body (Filter + Grid) ---------- */ .oc-phub__body { padding: 0 20px 96px; } @media (min-width: 768px) { .oc-phub__body { padding: 0 40px 140px; } } .oc-phub__body-inner { max-width: 1280px; margin: 0 auto; } .oc-phub__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--oc-ph-border); } .oc-phub__filter-label { font-size: 0.82rem; color: var(--oc-ph-muted); font-weight: 500; letter-spacing: 0.02em; margin-right: 6px; } .oc-phub__pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; background: transparent; border: 1px solid var(--oc-ph-border); color: var(--oc-ph-text); font-family: inherit !important; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .oc-phub__pill:hover { border-color: var(--oc-ph-accent); color: var(--oc-ph-accent); } .oc-phub__pill.is-active { background: var(--oc-ph-text); border-color: var(--oc-ph-text); color: #fff; } .oc-phub__pill svg { width: 12px; height: 12px; } .oc-phub__pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--oc-ph-border); color: var(--oc-ph-muted); font-size: 0.72rem; font-weight: 600; margin-left: 2px; } .oc-phub__pill.is-active .oc-phub__pill-count { background: rgba(255,255,255,0.18); color: #fff; } /* ---------- Grid ---------- */ .oc-phub__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .oc-phub__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .oc-phub__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .oc-phub__card { display: flex; flex-direction: column; background: var(--oc-ph-card-bg); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--oc-ph-border); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; } .oc-phub__card:hover:not(.oc-phub__card--static) { transform: translateY(-4px); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.15); border-color: color-mix(in srgb, var(--oc-ph-accent) 30%, transparent); } .oc-phub__card.is-hidden { display: none; } .oc-phub__card--wip { background: var(--oc-ph-soft); } .oc-phub__card--wip .oc-phub__card-img { filter: saturate(0.7) brightness(1.02); opacity: 0.9; } .oc-phub__card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a1a; } .oc-phub__card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .oc-phub__card-img--placeholder { background: linear-gradient(135deg, #c9a97a, var(--oc-ph-accent)); } .oc-phub__card:hover .oc-phub__card-img { transform: scale(1.04); } .oc-phub__badges { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; } .oc-phub__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(255,255,255,0.95); color: var(--oc-ph-text); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .oc-phub__badge--video { color: var(--oc-ph-accent); } .oc-phub__badge svg { width: 12px; height: 12px; } .oc-phub__phase { position: absolute; bottom: 14px; left: 14px; padding: 5px 10px; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em; border-radius: 999px; backdrop-filter: blur(4px); } .oc-phub__wip { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: rgba(255,255,255,0.95); color: var(--oc-ph-text); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .oc-phub__wip-dot { width: 7px; height: 7px; border-radius: 50%; background: #c9a97a; animation: oc-phub-pulse 1.8s ease-in-out infinite; } @keyframes oc-phub-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.2); } } .oc-phub__card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .oc-phub__card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .oc-phub__card-name { font-size: 1.1rem; font-weight: 600; margin: 0; letter-spacing: -0.005em; } .oc-phub__card-grafts { font-size: 0.78rem; color: var(--oc-ph-accent); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .oc-phub__card-meta { font-size: 0.85rem; color: var(--oc-ph-muted); margin-bottom: 14px; } .oc-phub__card-quote { font-size: 0.92rem; line-height: 1.5; margin: 0 0 20px; color: var(--oc-ph-text); font-style: italic; flex: 1; } .oc-phub__card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--oc-ph-accent); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; transition: gap 0.2s ease; } .oc-phub__card:hover .oc-phub__card-link { gap: 10px; } .oc-phub__card-link svg { width: 16px; height: 16px; } .oc-phub__card-wip-note { font-size: 0.85rem; color: var(--oc-ph-muted); line-height: 1.5; font-style: italic; margin-top: auto; } .oc-phub__empty { grid-column: 1 / -1; text-align: center; color: var(--oc-ph-muted); font-size: 0.95rem; padding: 60px 20px; margin: 0; } /* ---------- Footer ---------- */ .oc-phub__footer { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--oc-ph-border); display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; } .oc-phub__footer-text { font-size: 1rem; color: var(--oc-ph-muted); margin: 0; max-width: 560px; line-height: 1.55; } .oc-phub__footer-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--oc-ph-accent); color: #fff; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .oc-phub__footer-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--oc-ph-accent) 60%, transparent); } .oc-phub__footer-cta svg { width: 16px; height: 16px; } /* === Section: patient-stories-grid === */ .oc-stories { background: var(--oc-s-bg); color: var(--oc-s-text); padding: 72px 20px; } @media (min-width: 768px) { .oc-stories { padding: 112px 40px; } } .oc-stories__inner { max-width: 1280px; margin: 0 auto; } .oc-stories__header { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; } @media (min-width: 900px) { .oc-stories__header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; } } .oc-stories__header-text { max-width: 640px; } .oc-stories__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-s-accent); margin-bottom: 12px; font-weight: 600; } .oc-stories__headline { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; font-weight: 600; } .oc-stories__subline { font-size: 1rem; line-height: 1.55; color: var(--oc-s-muted); margin: 0; max-width: 560px; } .oc-stories__header-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--oc-s-accent); font-weight: 600; text-decoration: none; font-size: 0.95rem; white-space: nowrap; transition: gap 0.2s ease; } .oc-stories__header-cta:hover { gap: 12px; } .oc-stories__header-cta svg { width: 18px; height: 18px; } .oc-stories__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } /* Mobile: immer Slider mit Peek */ @media (max-width: 699px) { .oc-stories__grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 4px 20px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .oc-stories__grid::-webkit-scrollbar { display: none; } .oc-stories__grid > * { flex: 0 0 84%; scroll-snap-align: start; } } @media (min-width: 700px) and (max-width: 1023px) { .oc-stories__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .oc-stories__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } /* Desktop ab >3 Cards: Slider mit 3 Cards sichtbar + Peek */ .oc-stories__grid--slider { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -40px; padding: 4px 40px 16px; scrollbar-width: none; } .oc-stories__grid--slider::-webkit-scrollbar { display: none; } .oc-stories__grid--slider > * { flex: 0 0 31%; scroll-snap-align: start; } } .oc-stories__card { display: flex; flex-direction: column; background: var(--oc-s-card-bg); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid #ececec; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .oc-stories__card:hover:not(.oc-stories__card--static) { transform: translateY(-4px); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.15); border-color: color-mix(in srgb, var(--oc-s-accent) 30%, transparent); } .oc-stories__card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a1a; } .oc-stories__card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .oc-stories__card-img--placeholder { background: linear-gradient(135deg, #c9a97a, var(--oc-s-accent)); } .oc-stories__card:hover .oc-stories__card-img { transform: scale(1.04); } .oc-stories__badges { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; } .oc-stories__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(255, 255, 255, 0.95); color: var(--oc-s-text); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .oc-stories__badge--video { color: var(--oc-s-accent); } .oc-stories__badge svg { width: 12px; height: 12px; } .oc-stories__phase { position: absolute; bottom: 14px; left: 14px; padding: 5px 10px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em; border-radius: 999px; backdrop-filter: blur(4px); } .oc-stories__card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .oc-stories__card-name { font-size: 1.1rem; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.005em; } .oc-stories__card-meta { font-size: 0.85rem; color: var(--oc-s-muted); margin-bottom: 14px; } .oc-stories__card-quote { font-size: 0.92rem; line-height: 1.5; margin: 0 0 20px; color: var(--oc-s-text); font-style: italic; flex: 1; } .oc-stories__card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--oc-s-accent); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; transition: gap 0.2s ease; } .oc-stories__card:hover .oc-stories__card-link { gap: 10px; } .oc-stories__card-link svg { width: 16px; height: 16px; } /* === Section: patient-story-arzt-note === */ .oc-parzt { background: var(--oc-pa-bg); padding: 96px 24px; } @media (max-width: 768px) { .oc-parzt { padding: 64px 24px; } } .oc-parzt__card { max-width: 920px; margin: 0 auto; padding: 48px; background: var(--oc-pa-card-bg); border-radius: 14px; border: 1px solid #ececec; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; box-shadow: 0 10px 30px -15px rgba(0,0,0,0.1); } @media (min-width: 700px) { .oc-parzt__card { grid-template-columns: 120px 1fr; padding: 56px; gap: 40px; } } .oc-parzt__portrait { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; } .oc-parzt__portrait--placeholder { display: block; background: linear-gradient(135deg, #c9a97a, var(--oc-pa-accent)); } .oc-parzt__body { min-width: 0; } .oc-parzt__label { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-pa-accent); margin-bottom: 8px; font-weight: 600; } .oc-parzt__title { font-size: 1.25rem; font-weight: 600; margin: 0 0 16px; line-height: 1.3; color: var(--oc-pa-text); } .oc-parzt__text { font-size: 1rem; line-height: 1.65; color: var(--oc-pa-text); margin: 0 0 16px; } .oc-parzt__text p { margin: 0 0 12px; } .oc-parzt__text p:last-child { margin-bottom: 0; } .oc-parzt__sig { display: block; font-size: 0.9rem; color: var(--oc-pa-muted); font-weight: 500; } /* === Section: patient-story-gallery === */ .oc-pgal { background: var(--oc-pg-bg); color: var(--oc-pg-text); padding: 96px 24px; } @media (max-width: 768px) { .oc-pgal { padding: 64px 24px; } } .oc-pgal__header { max-width: 720px; margin: 0 auto 48px; text-align: center; } .oc-pgal__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-pg-accent); margin-bottom: 12px; font-weight: 600; } .oc-pgal__headline { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0; font-weight: 600; color: var(--oc-pg-text); } .oc-pgal__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 700px) { .oc-pgal__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .oc-pgal__grid { grid-template-columns: repeat(var(--oc-pg-cols-desktop), 1fr); gap: 14px; } } .oc-pgal__item { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; cursor: pointer; padding: 0; border: none; background: #f0f0f0; transition: transform 0.3s; } .oc-pgal__item:hover { transform: scale(0.985); } .oc-pgal__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; } .oc-pgal__item:hover img { transform: scale(1.06); } .oc-pgal__lightbox { position: fixed; inset: 0; z-index: 999; background: rgba(10,10,10,0.94); display: none; align-items: center; justify-content: center; padding: 40px; backdrop-filter: blur(8px); } .oc-pgal__lightbox.is-open { display: flex; } .oc-pgal__lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,0.6); border-radius: 8px; } .oc-pgal__lightbox-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .oc-pgal__lightbox-close:hover { background: rgba(255,255,255,0.2); } .oc-pgal__lightbox-close svg { width: 20px; height: 20px; } /* === Section: patient-story-hero === */ .oc-phero { position: relative; min-height: 90vh; color: var(--oc-phero-text); background: #000; display: flex; align-items: flex-end; padding: 80px 24px 48px; overflow: hidden; } .oc-phero__media { position: absolute; inset: 0; } .oc-phero__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--oc-phero-object-pos); display: block; } .oc-phero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%), linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%); } .oc-phero__content { position: relative; z-index: 2; width: 100%; } .oc-phero__inner { max-width: 1200px; margin: 0 auto; } .oc-phero__breadcrumb { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 20px; } .oc-phero__breadcrumb a { color: inherit; text-decoration: none; } .oc-phero__breadcrumb a:hover { color: #fff; } .oc-phero__eyebrow { display: inline-block; padding: 6px 12px; background: var(--oc-phero-accent); color: #fff; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; } .oc-phero__name { font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; font-weight: 600; max-width: 880px; color: inherit; } .oc-phero__meta { font-size: 1rem; color: rgba(255,255,255,0.88); margin-bottom: 28px; } .oc-phero__quote { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.4; font-style: italic; max-width: 720px; margin-bottom: 32px; color: inherit; padding-left: 16px; border-left: 3px solid var(--oc-phero-accent); } .oc-phero__stats { display: grid; gap: 20px; grid-template-columns: 1fr; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.2); max-width: 720px; } @media (min-width: 640px) { .oc-phero__stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } .oc-phero__stat-label { display: block; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 4px; } .oc-phero__stat-value { display: block; font-size: 1rem; font-weight: 600; color: inherit; } /* === Section: patient-story-intro === */ .oc-pintro { background: var(--oc-pi-bg); color: var(--oc-pi-text); padding: 96px 24px; } @media (max-width: 768px) { .oc-pintro { padding: 64px 24px; } } .oc-pintro__inner { max-width: 720px; margin: 0 auto; } .oc-pintro__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-pi-accent); margin-bottom: 12px; font-weight: 600; } .oc-pintro__headline { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 24px; font-weight: 600; color: var(--oc-pi-text); } .oc-pintro__lead { font-size: 1.2rem; line-height: 1.55; color: var(--oc-pi-muted); margin: 0 0 20px; } .oc-pintro__body { font-size: 1.05rem; line-height: 1.7; color: var(--oc-pi-text); } .oc-pintro__body p { margin: 0 0 20px; } .oc-pintro__body p:last-child { margin-bottom: 0; } /* === Section: patient-story-journey === */ .oc-pjourney { background: var(--oc-pj-bg); color: var(--oc-pj-text); padding: 96px 0; } @media (max-width: 768px) { .oc-pjourney { padding: 64px 0; } } .oc-pjourney__header { max-width: 720px; margin: 0 auto 64px; padding: 0 24px; text-align: center; } .oc-pjourney__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-pj-accent); margin-bottom: 12px; font-weight: 600; } .oc-pjourney__headline { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 16px; font-weight: 600; color: var(--oc-pj-text); } .oc-pjourney__sub { font-size: 1rem; line-height: 1.55; color: var(--oc-pj-muted); margin: 0; } .oc-pjourney__phase { max-width: 1100px; margin: 0 auto 80px; padding: 0 24px; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 900px) { .oc-pjourney__phase { grid-template-columns: 1fr 1fr; gap: 64px; } .oc-pjourney__phase--reverse .oc-pjourney__text { order: 2; } .oc-pjourney__phase--reverse .oc-pjourney__media { order: 1; } } .oc-pjourney__text { max-width: 480px; } .oc-pjourney__label { display: inline-block; padding: 4px 10px; background: var(--oc-pj-accent); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; margin-bottom: 14px; } .oc-pjourney__label--inprogress { background: #d18b1f; } .oc-pjourney__date { display: block; font-size: 0.85rem; color: var(--oc-pj-muted); margin-bottom: 10px; letter-spacing: 0.02em; } .oc-pjourney__title { font-size: 1.5rem; line-height: 1.25; margin: 0 0 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--oc-pj-text); } .oc-pjourney__body { font-size: 1rem; line-height: 1.65; color: var(--oc-pj-muted); margin: 0 0 16px; } .oc-pjourney__body p { margin: 0 0 12px; } .oc-pjourney__body p:last-child { margin-bottom: 0; } .oc-pjourney__quote { font-size: 1.05rem; line-height: 1.5; font-style: italic; color: var(--oc-pj-text); padding-left: 14px; border-left: 2px solid var(--oc-pj-accent); margin: 0; } .oc-pjourney__media { display: grid; gap: 8px; } .oc-pjourney__media--1 { grid-template-columns: 1fr; } .oc-pjourney__media--2 { grid-template-columns: 1fr 1fr; } .oc-pjourney__media--3 { grid-template-columns: repeat(3, 1fr); gap: 6px; } .oc-pjourney__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; border-radius: 8px; display: block; } .oc-pjourney__video-tile { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 5; background: #000; transition: transform 0.2s ease; } .oc-pjourney__video-tile:hover { transform: scale(0.99); } .oc-pjourney__video-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: filter 0.2s ease, transform 0.3s ease; } .oc-pjourney__video-tile:hover img { filter: brightness(0.7); transform: scale(1.04); } .oc-pjourney__video-poster { position: absolute; inset: 0; background: linear-gradient(135deg, #2a2a2a, #0d0d0d); } .oc-pjourney__video-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45)); pointer-events: none; } .oc-pjourney__video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #1a1a1a; display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform 0.2s ease, background 0.2s ease; } .oc-pjourney__video-tile:hover .oc-pjourney__video-play { transform: translate(-50%, -50%) scale(1.1); background: #fff; } .oc-pjourney__video-play svg { width: 22px; height: 22px; margin-left: 2px; } .oc-pjourney__video-tag { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); padding: 5px 9px; border-radius: 999px; } .oc-pjourney__modal { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.2s ease; } .oc-pjourney__modal.is-open { opacity: 1; } .oc-pjourney__modal[hidden] { display: none; } .oc-pjourney__modal-video { max-width: min(560px, 92vw); max-height: 86vh; width: auto; border-radius: 12px; background: #000; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); } .oc-pjourney__modal-close { position: absolute; top: 18px; right: 22px; background: rgba(255,255,255,0.12); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; transition: background 0.18s ease; } .oc-pjourney__modal-close:hover { background: rgba(255,255,255,0.22); } /* === Section: patient-story-status === */ .oc-pstatus { background: var(--oc-ps-bg); color: var(--oc-ps-text); padding: 56px 0; } .oc-pstatus__inner { max-width: 920px; margin: 0 auto; padding: 0 24px; } .oc-pstatus__card { background: var(--oc-ps-card); border: 1px solid var(--oc-ps-line); border-left: 4px solid var(--oc-ps-accent); border-radius: 14px; padding: 48px; box-shadow: 0 10px 30px -15px rgba(0,0,0,0.08); } @media (min-width: 700px) { .oc-pstatus__card { padding: 56px 64px; } } .oc-pstatus__label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ps-accent); margin-bottom: 14px; font-weight: 600; } .oc-pstatus__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--oc-ps-accent); } .oc-pstatus__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 20px; } .oc-pstatus__body { font-size: 1.02rem; line-height: 1.7; } .oc-pstatus__body p { margin: 0 0 20px; } .oc-pstatus__body p:last-child { margin-bottom: 0; } .oc-pstatus__timeline { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--oc-ps-line); } @media (min-width: 600px) { .oc-pstatus__timeline { grid-template-columns: repeat(3, 1fr); } } .oc-pstatus__step { display: flex; flex-direction: column; gap: 4px; } .oc-pstatus__step-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ps-muted); font-weight: 600; } .oc-pstatus__step-value { font-size: 0.98rem; font-weight: 500; color: var(--oc-ps-text); } .oc-pstatus__step--current .oc-pstatus__step-value { color: var(--oc-ps-accent); } /* === Section: patient-story-pullquote === */ .oc-ppull { background: var(--oc-pp-bg); color: var(--oc-pp-text); padding: 96px 24px; } @media (max-width: 768px) { .oc-ppull { padding: 64px 24px; } } .oc-ppull__inner { max-width: 920px; margin: 0 auto; text-align: center; } .oc-ppull__mark { font-size: 4rem; line-height: 1; color: var(--oc-pp-accent); margin-bottom: 16px; font-family: Georgia, serif !important; } .oc-ppull__text { font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.35; letter-spacing: -0.01em; font-weight: 500; color: var(--oc-pp-text); margin: 0 0 24px; } .oc-ppull__source { display: inline-block; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--oc-pp-muted); } /* === Section: patient-story-video === */ .oc-pvideo { position: relative; background: var(--oc-pv-bg); color: var(--oc-pv-text); padding: 96px 24px; overflow: hidden; } @media (min-width: 768px) { .oc-pvideo { padding: 120px 40px; } } .oc-pvideo__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(40px) brightness(0.35); transform: scale(1.1); opacity: 0.8; } .oc-pvideo__inner { position: relative; max-width: 1200px; margin: 0 auto; text-align: center; } .oc-pvideo__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-pv-accent); font-weight: 600; margin-bottom: 20px; } .oc-pvideo__headline { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 auto 48px; font-weight: 600; max-width: 800px; color: var(--oc-pv-text); } .oc-pvideo__frame { position: relative; aspect-ratio: 16 / 9; max-width: 1100px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; box-shadow: 0 40px 100px -20px rgba(28,131,148,0.35), 0 20px 60px rgba(0,0,0,0.6); transition: transform 0.3s; } .oc-pvideo__frame:hover { transform: translateY(-4px); } .oc-pvideo__poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s, filter 0.3s; } .oc-pvideo__frame:hover .oc-pvideo__poster { transform: scale(1.03); filter: brightness(0.75); } .oc-pvideo__play { position: absolute; inset: 0; margin: auto; width: 108px; height: 108px; border-radius: 50%; background: rgba(255,255,255,0.96); color: var(--oc-pv-accent); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 40px rgba(0,0,0,0.4); transition: transform 0.2s, background 0.2s; } .oc-pvideo__frame:hover .oc-pvideo__play { transform: scale(1.08); background: #fff; } .oc-pvideo__play svg { width: 44px; height: 44px; margin-left: 6px; } @media (max-width: 767px) { .oc-pvideo__play { width: 68px; height: 68px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); } .oc-pvideo__play svg { width: 28px; height: 28px; margin-left: 4px; } } .oc-pvideo__frame.is-playing .oc-pvideo__poster, .oc-pvideo__frame.is-playing .oc-pvideo__play, .oc-pvideo__frame.is-playing .oc-pvideo__badge { display: none; } .oc-pvideo__badge { position: absolute; top: 20px; left: 20px; padding: 8px 14px; background: rgba(0,0,0,0.7); color: #fff; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; backdrop-filter: blur(8px); display: inline-flex; align-items: center; gap: 8px; } .oc-pvideo__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--oc-pv-accent); } .oc-pvideo__caption { margin-top: 28px; font-size: 0.95rem; color: var(--oc-pv-muted); letter-spacing: 0.02em; } .oc-pvideo__highlight { max-width: 720px; margin: 56px auto 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; font-style: italic; color: var(--oc-pv-text); opacity: 0.88; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.18); } /* Modal */ .oc-pvideo__modal { position: fixed; inset: 0; z-index: 999; background: rgba(10,10,10,0.94); display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(10px); } .oc-pvideo__modal.is-open { display: flex; } .oc-pvideo__modal-stage { position: relative; width: 100%; max-width: 1200px; } .oc-pvideo__modal-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .oc-pvideo__modal-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } .oc-pvideo__modal-close { position: absolute; top: -60px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .oc-pvideo__modal-close:hover { background: rgba(255,255,255,0.2); } .oc-pvideo__modal-close svg { width: 20px; height: 20px; } /* === Section: preise-hero === */ .oc-prh { background: var(--oc-prh-bg); color: var(--oc-prh-text); padding: 96px 20px 72px; position: relative; overflow: hidden; } @media (min-width: 768px) { .oc-prh { padding: 128px 40px 96px; } } .oc-prh__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } @media (min-width: 1024px) { .oc-prh__inner { grid-template-columns: 1.25fr 1fr; gap: 80px; } } .oc-prh__content { max-width: 620px; } .oc-prh__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-prh-accent); margin-bottom: 16px; font-weight: 600; } .oc-prh__headline { font-size: clamp(2.1rem, 4.8vw, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 600; } .oc-prh__subline { font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6; color: var(--oc-prh-muted); margin: 0 0 32px; max-width: 560px; } .oc-prh__meta { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 40px; } .oc-prh__meta-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--oc-prh-soft); border: 1px solid var(--oc-prh-border); border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--oc-prh-text); letter-spacing: 0.01em; } .oc-prh__meta-item svg { width: 15px; height: 15px; color: var(--oc-prh-accent); flex-shrink: 0; } .oc-prh__scroll { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--oc-prh-accent); color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-prh__scroll:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-prh__scroll svg { width: 16px; height: 16px; } .oc-prh__anchor-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; } .oc-prh__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; min-height: 48px; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; border-radius: 4px; transition: filter 0.15s, transform 0.15s, background 0.15s; border: 1.5px solid transparent; } .oc-prh__cta--primary { background: var(--oc-prh-accent); color: #fff; box-shadow: 0 4px 16px rgba(28,131,148,0.18); } .oc-prh__cta--primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .oc-prh__cta--ghost { background: #fff; color: var(--oc-prh-accent); border-color: var(--oc-prh-accent); } .oc-prh__cta--ghost:hover { background: var(--oc-prh-soft); } /* ---------- Preis-Anchor-Card ---------- */ .oc-prh__anchor { position: relative; width: 100%; max-width: 460px; margin: 0 auto; } @media (min-width: 1024px) { .oc-prh__anchor { margin: 0 0 0 auto; max-width: 420px; } } .oc-prh__anchor-inner { background: var(--oc-prh-soft); border: 1px solid var(--oc-prh-border); border-radius: 16px; padding: 36px 32px; box-shadow: 0 16px 48px -24px rgba(0,0,0,0.12); position: relative; } .oc-prh__anchor-inner::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--oc-prh-accent); border-radius: 16px 0 3px 0; } .oc-prh__anchor-label { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--oc-prh-muted); margin-bottom: 14px; } .oc-prh__anchor-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .oc-prh__anchor-prefix { font-size: 1rem; color: var(--oc-prh-muted); font-weight: 500; } .oc-prh__anchor-value { font-size: clamp(2.6rem, 4vw, 3rem); line-height: 1; font-weight: 700; letter-spacing: -0.025em; color: var(--oc-prh-accent); } .oc-prh__anchor-monthly { margin: 0 0 22px; font-size: 0.95rem; line-height: 1.5; color: var(--oc-prh-text); font-weight: 500; } .oc-prh__anchor-monthly strong { color: var(--oc-prh-accent); font-weight: 700; } .oc-prh__anchor-divider { border: 0; border-top: 1px solid var(--oc-prh-border); margin: 0 0 22px; } .oc-prh__anchor-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .oc-prh__anchor-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.5; color: var(--oc-prh-text); } .oc-prh__anchor-list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--oc-prh-accent); } .oc-prh__anchor-monthly p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } /* === Section: preise-inklusive === */ .oc-prin { background: var(--oc-prin-bg); color: var(--oc-prin-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-prin { padding: 120px 40px; } } .oc-prin__inner { max-width: 1280px; margin: 0 auto; } .oc-prin__header { max-width: 720px; margin: 0 auto 56px; text-align: center; } .oc-prin__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-prin-accent); margin-bottom: 12px; font-weight: 600; } .oc-prin__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 16px; font-weight: 600; } .oc-prin__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-prin-muted); margin: 0; } /* ---------- Compare Grid ---------- */ .oc-prin__compare { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 860px) { .oc-prin__compare { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } } .oc-prin__card { border-radius: 16px; padding: 36px 32px; display: flex; flex-direction: column; gap: 24px; border: 1px solid var(--oc-prin-border); position: relative; } .oc-prin__card--oc { background: var(--oc-prin-card-a); border-color: color-mix(in srgb, var(--oc-prin-accent) 25%, var(--oc-prin-border)); } .oc-prin__card--oc::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 100%; background: var(--oc-prin-accent); border-radius: 16px 16px 0 0; } .oc-prin__card--other { background: var(--oc-prin-card-b); } .oc-prin__card-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--oc-prin-border); } .oc-prin__card-label { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--oc-prin-muted); } .oc-prin__card--oc .oc-prin__card-label { color: var(--oc-prin-accent); } .oc-prin__card-title { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.005em; margin: 0; font-weight: 600; color: var(--oc-prin-text); } .oc-prin__card-intro { font-size: 0.92rem; line-height: 1.55; margin: 4px 0 0; color: var(--oc-prin-muted); } /* ---------- Listen ---------- */ .oc-prin__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .oc-prin__list li { display: flex; align-items: flex-start; gap: 12px; } .oc-prin__icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .oc-prin__icon svg { width: 14px; height: 14px; } .oc-prin__icon--check { background: color-mix(in srgb, var(--oc-prin-accent) 12%, transparent); color: var(--oc-prin-accent); } .oc-prin__icon--minus { background: color-mix(in srgb, #1a1a1a 5%, transparent); border: 1px solid var(--oc-prin-border); color: var(--oc-prin-muted); } .oc-prin__item-title { display: block; font-size: 0.95rem; font-weight: 600; color: var(--oc-prin-text); line-height: 1.4; letter-spacing: -0.005em; } .oc-prin__item-detail { display: block; font-size: 0.88rem; color: var(--oc-prin-muted); line-height: 1.5; margin-top: 2px; } /* ---------- Editorial Note darunter ---------- */ .oc-prin__note { margin: 48px auto 0; max-width: 720px; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; border-left: 2px solid var(--oc-prin-accent); background: transparent; } .oc-prin__note-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--oc-prin-accent); } .oc-prin__note p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--oc-prin-muted); font-style: italic; } /* === Section: preise-quality === */ .oc-prq { background: var(--oc-prq-bg); color: var(--oc-prq-text); padding: 88px 20px; position: relative; } @media (min-width: 768px) { .oc-prq { padding: 128px 40px; } } .oc-prq__inner { max-width: 1280px; margin: 0 auto; } .oc-prq__header { max-width: 680px; margin: 0 auto 64px; text-align: center; } .oc-prq__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-prq-accent); margin-bottom: 14px; font-weight: 600; } .oc-prq__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; color: var(--oc-prq-text); } .oc-prq__sub { font-size: 1rem; line-height: 1.65; color: var(--oc-prq-muted); margin: 0; } .oc-prq__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 900px) { .oc-prq__grid--2 { grid-template-columns: repeat(2, 1fr); gap: 24px; } .oc-prq__grid--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .oc-prq__card { position: relative; background: var(--oc-prq-card); border: 1px solid var(--oc-prq-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.25s ease, transform 0.25s ease; } .oc-prq__card:hover { border-color: color-mix(in srgb, var(--oc-prq-accent) 50%, var(--oc-prq-border)); transform: translateY(-3px); } /* ---------- Hero-Photo oben ---------- */ .oc-prq__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #1f1f1f; } .oc-prq__photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.6s ease; } .oc-prq__card:hover .oc-prq__photo-img { transform: scale(1.03); } .oc-prq__photo-img--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1f1f1f, #0a0a0a); color: var(--oc-prq-accent); font-size: 4.5rem; font-weight: 600; } .oc-prq__photo-gradient { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to bottom, transparent 0%, rgba(15,15,15,0.35) 60%, var(--oc-prq-card) 100%); pointer-events: none; } /* ---------- Text-Body unter Photo ---------- */ .oc-prq__body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 18px; flex: 1; } .oc-prq__quote-mark { display: inline-block; color: var(--oc-prq-accent); width: 28px; height: 22px; } .oc-prq__quote-mark svg { width: 100%; height: 100%; display: block; } .oc-prq__quote { font-size: clamp(1.02rem, 1.3vw, 1.12rem); line-height: 1.55; letter-spacing: -0.005em; margin: 0; color: var(--oc-prq-text); font-weight: 400; flex: 1; } .oc-prq__attrib { display: flex; flex-direction: column; gap: 3px; padding-top: 18px; border-top: 1px solid var(--oc-prq-border); } .oc-prq__name { font-size: 0.95rem; font-weight: 600; color: var(--oc-prq-text); letter-spacing: -0.005em; } .oc-prq__detail { font-size: 0.82rem; color: var(--oc-prq-muted); line-height: 1.4; } /* === Section: preise-tabelle === */ .oc-prt { background: var(--oc-prt-bg); color: var(--oc-prt-text); padding: 80px 20px; scroll-margin-top: 80px; } @media (min-width: 768px) { .oc-prt { padding: 120px 40px; } } .oc-prt__inner { max-width: 1280px; margin: 0 auto; } .oc-prt__header { max-width: 720px; margin: 0 auto 56px; text-align: center; } .oc-prt__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-prt-accent); margin-bottom: 12px; font-weight: 600; } .oc-prt__headline { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 16px; font-weight: 600; } .oc-prt__sub { font-size: 1.02rem; line-height: 1.6; color: var(--oc-prt-muted); margin: 0; } .oc-prt__grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 768px) { .oc-prt__grid { gap: 24px; align-items: stretch; grid-template-columns: repeat(2, 1fr); } .oc-prt__grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .oc-prt__grid--4 { grid-template-columns: repeat(4, 1fr); } .oc-prt__grid--5 { grid-template-columns: repeat(5, 1fr); } .oc-prt__grid--6 { grid-template-columns: repeat(3, 1fr); } } .oc-prt__tile { position: relative; background: var(--oc-prt-card); border: 1px solid var(--oc-prt-border); border-radius: 16px; padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .oc-prt__tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--oc-prt-accent) 35%, var(--oc-prt-border)); box-shadow: 0 16px 48px -20px rgba(0, 0, 0, 0.1); } .oc-prt__tile--popular { border-color: var(--oc-prt-accent); border-width: 2px; padding: 35px 31px; background: #fff; } .oc-prt__badge { position: absolute; top: -13px; left: 28px; padding: 6px 14px; background: var(--oc-prt-accent); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; } .oc-prt__tile-header { display: flex; flex-direction: column; gap: 6px; } .oc-prt__name { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.005em; margin: 0; font-weight: 600; color: var(--oc-prt-text); } .oc-prt__grafts { font-size: 0.85rem; color: var(--oc-prt-muted); letter-spacing: 0.01em; } .oc-prt__price { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--oc-prt-border); border-bottom: 1px solid var(--oc-prt-border); } .oc-prt__monthly { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .oc-prt__monthly-prefix { font-size: 0.9rem; color: var(--oc-prt-muted); font-weight: 500; } .oc-prt__monthly-value { font-size: clamp(1.6rem, 2.5vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; color: var(--oc-prt-accent); line-height: 1; } .oc-prt__monthly-suffix { font-size: 0.95rem; color: var(--oc-prt-text); font-weight: 500; } .oc-prt__amount { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; } .oc-prt__prefix { font-size: 0.82rem; color: var(--oc-prt-muted); } .oc-prt__value { font-size: 1rem; font-weight: 600; color: var(--oc-prt-muted); letter-spacing: -0.01em; } .oc-prt__desc { font-size: 0.95rem; line-height: 1.55; color: var(--oc-prt-muted); margin: 0; } .oc-prt__indicators { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; } .oc-prt__indicators-title { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--oc-prt-text); } .oc-prt__indicators ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .oc-prt__indicators li { font-size: 0.9rem; line-height: 1.5; color: var(--oc-prt-muted); position: relative; padding-left: 16px; } .oc-prt__indicators li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 1.5px; background: var(--oc-prt-accent); } .oc-prt__tile-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 14px 20px; font-size: 0.92rem; font-weight: 600; text-decoration: none; border-radius: 4px; border: 1px solid var(--oc-prt-border); color: var(--oc-prt-text); background: transparent; transition: all 0.15s ease; } .oc-prt__tile-cta:hover { border-color: var(--oc-prt-accent); color: var(--oc-prt-accent); gap: 12px; } .oc-prt__tile-cta--filled { background: var(--oc-prt-accent); border-color: var(--oc-prt-accent); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .oc-prt__tile-cta--filled:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); } .oc-prt__tile-cta svg { width: 16px; height: 16px; } /* ---------- Fact-Strip (unter Tabelle) ---------- */ .oc-prt__facts { margin-top: 56px; padding: 28px 24px; background: var(--oc-prt-card); border-radius: 12px; display: grid; grid-template-columns: 1fr; gap: 20px; text-align: center; } @media (min-width: 700px) { .oc-prt__facts { grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 32px 40px; } .oc-prt__fact:not(:last-child) { border-right: 1px solid var(--oc-prt-border); padding-right: 32px; } } .oc-prt__fact { display: flex; flex-direction: column; gap: 4px; align-items: center; } .oc-prt__fact-value { font-size: 1.05rem; font-weight: 600; color: var(--oc-prt-text); letter-spacing: -0.005em; } .oc-prt__fact-label { font-size: 0.85rem; color: var(--oc-prt-muted); line-height: 1.4; max-width: 240px; } .oc-prt__footnote { margin: 28px auto 0; text-align: center; font-size: 0.88rem; line-height: 1.55; color: var(--oc-prt-muted); max-width: 640px; } /* === Section: price-teaser === */ .oc-price { background: var(--oc-pr-bg); color: var(--oc-pr-text); padding: 72px 20px; } @media (min-width: 768px) { .oc-price { padding: 112px 40px; } } .oc-price__inner { max-width: 1280px; margin: 0 auto; } .oc-price__header { max-width: 720px; margin: 0 auto 56px; text-align: center; } .oc-price__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-pr-accent); margin-bottom: 12px; font-weight: 600; } .oc-price__headline { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 16px; font-weight: 600; } .oc-price__sub { font-size: 1rem; line-height: 1.55; color: var(--oc-pr-muted); margin: 0; } .oc-price__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 700px) { .oc-price__grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .oc-price__tile { position: relative; background: var(--oc-pr-card-bg); border: 1px solid #ececec; border-radius: 14px; padding: 32px 28px; display: flex; flex-direction: column; gap: 6px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .oc-price__tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--oc-pr-accent) 35%, #ececec); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.1); } .oc-price__tile--popular { border-color: var(--oc-pr-accent); border-width: 2px; padding: 31px 27px; } .oc-price__badge { position: absolute; top: -12px; left: 24px; padding: 5px 12px; background: var(--oc-pr-accent); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; } .oc-price__name { font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.005em; margin: 0; font-weight: 600; color: var(--oc-pr-text); } .oc-price__grafts { font-size: 0.82rem; color: var(--oc-pr-muted); letter-spacing: 0.02em; margin-bottom: 20px; } .oc-price__monthly { font-size: 1.1rem; line-height: 1.3; color: var(--oc-pr-text); font-weight: 500; margin-bottom: 2px; } .oc-price__monthly strong { color: var(--oc-pr-accent); font-weight: 700; font-size: 1.35rem; } .oc-price__amount { display: flex; align-items: baseline; gap: 6px; margin-top: 0; margin-bottom: 18px; } .oc-price__prefix { font-size: 0.82rem; color: var(--oc-pr-muted); font-weight: 500; } .oc-price__value { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1; font-weight: 600; letter-spacing: -0.01em; color: var(--oc-pr-muted); } .oc-price__desc { font-size: 0.92rem; line-height: 1.55; color: var(--oc-pr-muted); margin: 0; } .oc-price__footer { margin-top: 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; } .oc-price__footnote { font-size: 0.88rem; color: var(--oc-pr-muted); line-height: 1.5; margin: 0; max-width: 640px; } .oc-price__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--oc-pr-accent); color: #fff; font-weight: 600; text-decoration: none; font-size: 0.95rem; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); transition: transform 0.15s, filter 0.15s, gap 0.15s; } .oc-price__cta:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-price__cta svg { width: 18px; height: 18px; } /* === Section: process-timeline === */ .oc-proc { background: var(--oc-proc-bg); color: var(--oc-proc-text); padding: 72px 20px; } @media (min-width: 768px) { .oc-proc { padding: 112px 40px; } } .oc-proc__inner { max-width: 1280px; margin: 0 auto; } .oc-proc__header { max-width: 640px; margin: 0 auto 64px; text-align: center; } .oc-proc__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-proc-accent); margin-bottom: 12px; font-weight: 600; } .oc-proc__headline { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 16px; font-weight: 600; } .oc-proc__sub { font-size: 1rem; line-height: 1.55; color: var(--oc-proc-muted); margin: 0; } .oc-proc__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 48px; position: relative; } @media (min-width: 900px) { .oc-proc__steps--3 { grid-template-columns: repeat(3, 1fr); } .oc-proc__steps--4 { grid-template-columns: repeat(4, 1fr); } .oc-proc__steps--5 { grid-template-columns: repeat(5, 1fr); } .oc-proc__steps--6 { grid-template-columns: repeat(6, 1fr); } .oc-proc__steps { gap: 24px; } } .oc-proc__step { position: relative; text-align: center; padding: 0 8px; } /* Connecting line — vertical on mobile, horizontal on desktop */ .oc-proc__step:not(:last-child)::after { content: ""; position: absolute; background: var(--oc-proc-line); z-index: 0; } /* Mobile: vertical line below marker */ @media (max-width: 899px) { .oc-proc__step:not(:last-child)::after { top: 76px; bottom: -48px; left: 50%; width: 2px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--oc-proc-line) 0 4px, transparent 4px 8px); } } /* Desktop: horizontal line right of marker */ @media (min-width: 900px) { .oc-proc__step:not(:last-child)::after { top: 38px; left: calc(50% + 46px); right: calc(-50% + 46px); height: 2px; background: repeating-linear-gradient(to right, var(--oc-proc-line) 0 4px, transparent 4px 8px); } } .oc-proc__marker { position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 50%; background: var(--oc-proc-bg); border: 2px solid var(--oc-proc-accent); color: var(--oc-proc-accent); margin: 0 auto 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 0 0 6px var(--oc-proc-bg); } .oc-proc__icon { display: flex; align-items: center; justify-content: center; opacity: 0.72; } .oc-proc__icon svg { width: 16px; height: 16px; } .oc-proc__number { font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: inherit; } .oc-proc__text { position: relative; } @media (max-width: 899px) { .oc-proc__text { z-index: 2; background: var(--oc-proc-bg); padding: 4px 0 6px; } } .oc-proc__title { font-size: 1.05rem; line-height: 1.3; margin: 0 0 8px; font-weight: 600; letter-spacing: -0.005em; color: var(--oc-proc-text); } .oc-proc__body { font-size: 0.9rem; line-height: 1.55; color: var(--oc-proc-muted); margin: 0 0 10px; } .oc-proc__duration { display: inline-block; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--oc-proc-accent); font-weight: 600; padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; margin-top: 4px; } .oc-proc__cta-wrap { text-align: center; margin-top: 64px; } .oc-proc__cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: var(--oc-proc-accent); color: #fff; font-weight: 600; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.01em; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); transition: transform 0.15s, filter 0.15s, gap 0.15s; } .oc-proc__cta:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-proc__cta svg { width: 18px; height: 18px; } /* === Section: proof-stats === */ .oc-proof { background: var(--oc-pf-bg); color: var(--oc-pf-text); padding: 64px 20px; } @media (min-width: 768px) { .oc-proof { padding: 96px 40px; } } .oc-proof__inner { max-width: 1280px; margin: 0 auto; } .oc-proof__header { max-width: 640px; margin: 0 auto 48px; text-align: center; } .oc-proof__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-pf-accent); margin-bottom: 10px; font-weight: 600; } .oc-proof__headline { font-size: clamp(1.4rem, 2.6vw, 1.8rem); line-height: 1.3; letter-spacing: -0.01em; margin: 0; font-weight: 500; color: var(--oc-pf-text); } .oc-proof__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 20px; } @media (min-width: 768px) { .oc-proof__grid--3 { grid-template-columns: repeat(3, 1fr); } .oc-proof__grid--4 { grid-template-columns: repeat(4, 1fr); } .oc-proof__grid--5 { grid-template-columns: repeat(5, 1fr); } .oc-proof__grid--6 { grid-template-columns: repeat(6, 1fr); } } .oc-proof__stat { text-align: center; position: relative; padding: 0 12px; display: flex; flex-direction: column; gap: 6px; align-items: center; } /* Subtle dividers on desktop */ @media (min-width: 768px) { .oc-proof__grid--dividers .oc-proof__stat:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 15%; height: 70%; width: 1px; background: var(--oc-pf-divider); } } .oc-proof__value { font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--oc-pf-accent); } .oc-proof__label { font-size: 0.88rem; line-height: 1.35; color: var(--oc-pf-text); font-weight: 600; letter-spacing: 0.01em; max-width: 220px; } .oc-proof__sub { font-size: 0.78rem; color: var(--oc-pf-muted); letter-spacing: 0.02em; max-width: 220px; } /* === Section: tb-arzt-anker === */ .oc-tba { --c-bg: #fafaf7; --c-text: #1a1a1a; --c-muted: #5c5c5c; --c-accent: #1c8394; --c-border: #ececec; background: var(--c-bg); color: var(--c-text); padding: 80px 20px 96px; border-top: 1px solid var(--c-border); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; } @media (min-width: 768px) { .oc-tba { padding: 112px 40px 128px; } } .oc-tba__inner { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; text-align: center; } @media (min-width: 768px) { .oc-tba__inner { grid-template-columns: auto 1fr; gap: 40px; text-align: left; } } .oc-tba__portrait { width: 120px; height: 120px; border-radius: 999px; overflow: hidden; background: #eee; box-shadow: 0 12px 32px -16px rgba(0,0,0,0.24); margin: 0 auto; flex-shrink: 0; } @media (min-width: 768px) { .oc-tba__portrait { width: 140px; height: 140px; margin: 0; } } .oc-tba__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .oc-tba__quote { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.42; letter-spacing: -0.01em; color: var(--c-text); font-weight: 500; margin: 0 0 18px; } .oc-tba__quote em { font-style: normal; color: var(--c-accent); font-weight: 600; } .oc-tba__attr { font-size: 0.86rem; color: var(--c-muted); } .oc-tba__attr strong { color: var(--c-text); font-weight: 600; } .oc-tba__quote p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } .oc-tba__attr p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } /* === Section: tb-bildupload === */ .oc-tbu { --c-soft: #fafaf7; --c-text: #1a1a1a; --c-muted: #5c5c5c; --c-accent: #1c8394; --c-border: #ececec; background: var(--c-soft); padding: 64px 16px; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; } @media (min-width: 768px) { .oc-tbu { padding: 88px 40px 96px; } } .oc-tbu__head { max-width: 760px; margin: 0 auto 32px; text-align: center; } .oc-tbu__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; font-weight: 600; } .oc-tbu__h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 600; } .oc-tbu__sub { font-size: clamp(0.98rem, 1.4vw, 1.08rem); line-height: 1.6; color: var(--c-muted); max-width: 600px; margin: 0 auto; } .oc-tbu__frame { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; box-shadow: 0 24px 64px -32px rgba(0,0,0,0.18); padding: 32px 24px; } @media (min-width: 768px) { .oc-tbu__frame { padding: 40px 48px; } } .oc-tbu__hints { max-width: 760px; margin: 24px auto 0; display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 640px) { .oc-tbu__hints { grid-template-columns: repeat(3, 1fr); } } .oc-tbu__hint { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--c-border); border-radius: 10px; font-size: 0.86rem; color: var(--c-text); line-height: 1.4; } .oc-tbu__hint svg { width: 16px; height: 16px; color: var(--c-accent); flex-shrink: 0; margin-top: 2px; } .oc-tbu__hint strong { font-weight: 600; } .oc-tbu__hint span { display: block; color: var(--c-muted); font-size: 0.8rem; margin-top: 2px; } /* === Section: tb-flow === */ .oc-tbf { --c-bg: #ffffff; --c-text: #1a1a1a; --c-muted: #5c5c5c; --c-accent: #1c8394; --c-border: #ececec; background: var(--c-bg); color: var(--c-text); padding: 80px 20px; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; } @media (min-width: 768px) { .oc-tbf { padding: 112px 40px; } } .oc-tbf__inner { max-width: 1080px; margin: 0 auto; } .oc-tbf__head { text-align: center; max-width: 640px; margin: 0 auto 48px; } .oc-tbf__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; font-weight: 600; } .oc-tbf__h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 600; } .oc-tbf__sub { font-size: clamp(0.98rem, 1.4vw, 1.08rem); line-height: 1.6; color: var(--c-muted); } .oc-tbf__steps { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 768px) { .oc-tbf__steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .oc-tbf__step { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 28px 24px; position: relative; } .oc-tbf__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: rgba(28, 131, 148, 0.10); color: var(--c-accent); font-size: 0.95rem; font-weight: 700; margin-bottom: 16px; } .oc-tbf__step h3 { font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; } .oc-tbf__step p { font-size: 0.92rem; line-height: 1.55; color: var(--c-muted); margin: 0; } /* === Section: tb-hero === */ .oc-tbh { --c-bg: #ffffff; --c-soft: #fafaf7; --c-text: #1a1a1a; --c-muted: #5c5c5c; --c-accent: #1c8394; --c-success: #2a8f5f; --c-border: #ececec; background: var(--c-bg); color: var(--c-text); padding: 96px 20px 48px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; } @media (min-width: 768px) { .oc-tbh { padding: 128px 40px 64px; } } .oc-tbh__inner { max-width: 760px; margin: 0 auto; } .oc-tbh__check { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: rgba(42, 143, 95, 0.10); color: var(--c-success); margin: 0 auto 24px; } .oc-tbh__check svg { width: 30px; height: 30px; } .oc-tbh__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 18px; font-weight: 600; } .oc-tbh--success .oc-tbh__eyebrow { color: var(--c-success); margin-bottom: 16px; } .oc-tbh__h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 600; } .oc-tbh__sub { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; color: var(--c-muted); max-width: 600px; margin: 0 auto 28px; } .oc-tbh__meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-bottom: 28px; } .oc-tbh__meta-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--c-soft); border: 1px solid var(--c-border); border-radius: 999px; font-size: 0.82rem; font-weight: 500; color: var(--c-text); } .oc-tbh__meta-item svg { width: 14px; height: 14px; color: var(--c-accent); flex-shrink: 0; } .oc-tbh__tp-wrap { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 100%; } .oc-tbh__tp-wrap .trustpilot-widget { min-width: 240px; } .oc-tbh__tp-extra { font-size: 0.84rem; color: var(--c-muted); } .oc-tbh__cue { display: block; margin: 32px auto 0; width: 1px; height: 32px; background: linear-gradient(to bottom, var(--c-border), transparent); } /* === Section: tb-whatsapp === */ .oc-tbw { --c-text: #1a1a1a; --c-muted: #5c5c5c; --c-wa: #25D366; --c-border: #ececec; background: #fff; padding: 0 20px 80px; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif !important; } @media (min-width: 768px) { .oc-tbw { padding: 0 40px 96px; } } .oc-tbw__card { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; text-align: center; padding: 32px 28px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; box-shadow: 0 12px 40px -24px rgba(0,0,0,0.16); } @media (min-width: 768px) { .oc-tbw__card { grid-template-columns: auto 1fr auto; gap: 28px; text-align: left; padding: 28px 32px; } } .oc-tbw__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: rgba(37, 211, 102, 0.12); color: var(--c-wa); margin: 0 auto; flex-shrink: 0; } @media (min-width: 768px) { .oc-tbw__icon { margin: 0; } } .oc-tbw__icon svg { width: 28px; height: 28px; } .oc-tbw__body h3 { font-size: 1.08rem; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; } .oc-tbw__body p { font-size: 0.92rem; line-height: 1.5; color: var(--c-muted); margin: 0; } .oc-tbw__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--c-wa); color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: 999px; transition: filter 0.15s, transform 0.15s; flex-shrink: 0; } .oc-tbw__btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .oc-tbw__btn svg { width: 16px; height: 16px; } /* === Section: trustpilot-carousel === */ .oc-tp { background: var(--oc-tp-bg); color: var(--oc-tp-text); padding: 64px 20px; } @media (min-width: 768px) { .oc-tp { padding: 88px 40px; } } .oc-tp__inner { max-width: 1280px; margin: 0 auto; } .oc-tp__header { max-width: 640px; margin: 0 auto 36px; text-align: center; } .oc-tp__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-tp-muted); margin-bottom: 10px; font-weight: 600; } .oc-tp__headline { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; font-weight: 600; color: var(--oc-tp-text); } .oc-tp__sub { font-size: 0.98rem; line-height: 1.5; color: var(--oc-tp-muted); margin: 0; } .oc-tp__widget-wrap { min-height: 140px; } /* === Section: uber-hero === */ .oc-uh { background: var(--oc-uh-bg); color: var(--oc-uh-text); padding: 64px 20px 56px; } @media (min-width: 768px) { .oc-uh { padding: 96px 40px 80px; } } .oc-uh__inner { max-width: 1280px; margin: 0 auto; } .oc-uh__split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .oc-uh__split { grid-template-columns: 1fr 1fr; gap: 72px; } } .oc-uh__body { max-width: 580px; } .oc-uh__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-uh-accent); font-weight: 600; margin-bottom: 16px; } .oc-uh__headline { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 600; } .oc-uh__sub { font-size: 1.05rem; line-height: 1.6; color: var(--oc-uh-muted); margin: 0 0 28px; } .oc-uh__pills { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; } .oc-uh__pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 500; background: var(--oc-uh-soft); color: var(--oc-uh-text); border: 1px solid var(--oc-uh-border); } .oc-uh__pill--hl { background: color-mix(in srgb, var(--oc-uh-accent) 12%, var(--oc-uh-soft)); color: var(--oc-uh-accent); border-color: color-mix(in srgb, var(--oc-uh-accent) 28%, transparent); font-weight: 600; } .oc-uh__ctas { display: flex; flex-wrap: wrap; gap: 14px; } .oc-uh__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: 4px; transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-uh__cta svg { width: 18px; height: 18px; } .oc-uh__cta--primary { background: var(--oc-uh-accent); color: #fff; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--oc-uh-accent) 70%, transparent); } .oc-uh__cta--primary:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-uh__cta--ghost { background: transparent; color: var(--oc-uh-text); border: 1px solid var(--oc-uh-border); } .oc-uh__cta--ghost:hover { background: var(--oc-uh-soft); } /* Ausnahme vom projektweiten 4:5/5:6 Hero-Pattern: das Founder-Gruppenfoto ist landscape, daher hier breiteres Aspect-Ratio um die seitlichen Personen nicht wegzuschneiden. User-Approval 2026-05-01. */ .oc-uh__media-frame { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--oc-uh-soft); box-shadow: 0 28px 64px -36px rgba(0,0,0,0.28); } @media (min-width: 1024px) { .oc-uh__media-frame { aspect-ratio: 4 / 3; } } .oc-uh__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-uh__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-uh-accent)); } .oc-uh__caption { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(15,15,15,0.72); color: #fff; border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: calc(100% - 36px); } .oc-uh__caption-icon { width: 16px; height: 16px; color: var(--oc-uh-accent); flex-shrink: 0; } .oc-uh__caption-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .oc-uh__caption-text strong { font-size: 0.88rem; font-weight: 600; } .oc-uh__caption-text span { font-size: 0.72rem; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; } .oc-uh__stats { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--oc-uh-border); display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (min-width: 768px) { .oc-uh__stats { grid-template-columns: repeat(4, 1fr); gap: 32px; } } .oc-uh__stat { display: flex; flex-direction: column; gap: 4px; } .oc-uh__stat-value { font-size: clamp(1.4rem, 2.4vw, 1.7rem); font-weight: 600; color: var(--oc-uh-text); letter-spacing: -0.01em; line-height: 1.15; } .oc-uh__stat-label { font-size: 0.84rem; line-height: 1.45; color: var(--oc-uh-muted); } /* === Section: uber-klinik-zoom === */ .oc-uk { background: var(--oc-uk-bg); color: var(--oc-uk-text); padding: 80px 20px; scroll-margin-top: 24px; } @media (min-width: 768px) { .oc-uk { padding: 112px 40px; } } .oc-uk__inner { max-width: 1280px; margin: 0 auto; } .oc-uk__split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .oc-uk__split { grid-template-columns: 1fr 1fr; gap: 64px; } } .oc-uk__media-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--oc-uk-soft); box-shadow: 0 28px 64px -36px rgba(0,0,0,0.28); } @media (min-width: 1024px) { .oc-uk__media-frame { aspect-ratio: 5 / 6; } } .oc-uk__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-uk__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-uk-accent)); } .oc-uk__caption { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(15,15,15,0.72); color: #fff; border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: calc(100% - 36px); } .oc-uk__caption-icon { width: 16px; height: 16px; color: var(--oc-uk-accent); flex-shrink: 0; } .oc-uk__caption-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .oc-uk__caption-text strong { font-size: 0.88rem; font-weight: 600; } .oc-uk__caption-text span { font-size: 0.72rem; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; } .oc-uk__body { max-width: 540px; } .oc-uk__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-uk-accent); font-weight: 600; margin-bottom: 16px; } .oc-uk__headline { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-uk__sub { font-size: 1.02rem; line-height: 1.65; color: var(--oc-uk-muted); margin: 0 0 28px; } .oc-uk__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 22px 24px; background: var(--oc-uk-card); border: 1px solid var(--oc-uk-border); border-radius: 14px; margin-bottom: 28px; } @media (min-width: 480px) { .oc-uk__stats { grid-template-columns: repeat(4, 1fr); } } .oc-uk__stat { display: flex; flex-direction: column; gap: 2px; } .oc-uk__stat-value { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 600; color: var(--oc-uk-text); letter-spacing: -0.005em; line-height: 1.15; } .oc-uk__stat-label { font-size: 0.74rem; line-height: 1.4; color: var(--oc-uk-muted); } .oc-uk__ctas { display: flex; flex-wrap: wrap; gap: 14px; } .oc-uk__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: 4px; transition: transform 0.15s ease, filter 0.15s ease, gap 0.15s ease; } .oc-uk__cta svg { width: 18px; height: 18px; } .oc-uk__cta--primary { background: var(--oc-uk-accent); color: #fff; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--oc-uk-accent) 70%, transparent); } .oc-uk__cta--primary:hover { gap: 14px; filter: brightness(1.08); transform: translateY(-1px); } .oc-uk__cta--ghost { background: transparent; color: var(--oc-uk-text); border: 1px solid var(--oc-uk-border); } .oc-uk__cta--ghost:hover { background: var(--oc-uk-soft); } /* === Section: uber-loesungen === */ .oc-ul { background: var(--oc-ul-bg); color: var(--oc-ul-text); padding: 80px 20px; scroll-margin-top: 24px; } @media (min-width: 768px) { .oc-ul { padding: 112px 40px; } } .oc-ul__inner { max-width: 1280px; margin: 0 auto; } .oc-ul__head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .oc-ul__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ul-accent); font-weight: 600; margin-bottom: 16px; } .oc-ul__headline { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-ul__sub { font-size: 1.05rem; line-height: 1.65; color: var(--oc-ul-muted); margin: 0; } .oc-ul__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .oc-ul__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .oc-ul__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } } .oc-ul__card { display: flex; flex-direction: column; background: var(--oc-ul-card); border: 1px solid var(--oc-ul-border); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--oc-ul-text); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; } .oc-ul__card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(0,0,0,0.18); border-color: color-mix(in srgb, var(--oc-ul-accent) 40%, var(--oc-ul-border)); } .oc-ul__card--clinic { border-color: color-mix(in srgb, var(--oc-ul-accent) 40%, var(--oc-ul-border)); } .oc-ul__card--clinic::before { content: ''; position: absolute; top: 0; left: 24px; width: 64px; height: 4px; background: var(--oc-ul-accent); border-radius: 0 0 4px 4px; z-index: 2; } .oc-ul__card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--oc-ul-soft); } .oc-ul__card-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.4s ease; } .oc-ul__card:hover .oc-ul__card-img { transform: scale(1.04); } .oc-ul__card-img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-ul-accent)); } .oc-ul__badge { position: absolute; top: 12px; right: 12px; display: inline-flex; padding: 5px 10px; background: var(--oc-ul-accent); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; } .oc-ul__card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .oc-ul__kicker { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ul-accent); font-weight: 600; } .oc-ul__card-title { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.005em; margin: 0; font-weight: 600; } .oc-ul__card-text { font-size: 0.92rem; line-height: 1.55; color: var(--oc-ul-muted); margin: 4px 0 12px; flex: 1; } .oc-ul__link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--oc-ul-accent); margin-top: auto; transition: gap 0.2s ease; } .oc-ul__card:hover .oc-ul__link { gap: 12px; } .oc-ul__link svg { width: 14px; height: 14px; } .oc-ul__note { max-width: 720px; margin: 36px auto 0; text-align: center; font-size: 0.92rem; line-height: 1.6; color: var(--oc-ul-muted); padding: 16px 24px; border-left: 3px solid var(--oc-ul-accent); background: var(--oc-ul-soft); border-radius: 4px; text-align: left; } /* === Section: uber-mission === */ .oc-um { background: var(--oc-um-bg); color: var(--oc-um-text); padding: 80px 20px; } @media (min-width: 768px) { .oc-um { padding: 112px 40px; } } .oc-um__inner { max-width: 1200px; margin: 0 auto; } .oc-um__head { max-width: 760px; margin: 0 auto 56px; text-align: center; } .oc-um__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-um-accent); font-weight: 600; margin-bottom: 16px; } .oc-um__headline { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 600; } .oc-um__sub { font-size: 1.05rem; line-height: 1.65; color: var(--oc-um-muted); margin: 0; } .oc-um__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; } @media (min-width: 768px) { .oc-um__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (min-width: 1100px) { .oc-um__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } } .oc-um__card { background: var(--oc-um-card); border: 1px solid var(--oc-um-border); border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; } .oc-um__counter { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-um-accent); font-weight: 600; } .oc-um__card-title { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.005em; margin: 0; font-weight: 600; color: var(--oc-um-text); } .oc-um__card-body { font-size: 0.95rem; line-height: 1.6; color: var(--oc-um-muted); margin: 0; } .oc-um__tagline { text-align: center; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--oc-um-text); font-weight: 500; letter-spacing: -0.005em; max-width: 720px; margin: 0 auto; padding-top: 36px; border-top: 1px solid var(--oc-um-border); } /* === Section: uber-standorte === */ .oc-ust { background: var(--oc-ust-bg); color: var(--oc-ust-text); padding: 80px 0; scroll-margin-top: 24px; } @media (min-width: 768px) { .oc-ust { padding: 112px 0; } } .oc-ust__inner { max-width: 1280px; margin: 0 auto; } .oc-ust__head { max-width: 720px; margin: 0 auto 40px; padding: 0 20px; text-align: center; } @media (min-width: 768px) { .oc-ust__head { padding: 0 40px; margin-bottom: 48px; } } .oc-ust__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ust-accent); font-weight: 600; margin-bottom: 14px; } .oc-ust__headline { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 16px; font-weight: 600; } .oc-ust__sub { font-size: 1.02rem; line-height: 1.65; color: var(--oc-ust-muted); margin: 0; } /* ---------- Rail ---------- */ .oc-ust__rail-wrapper { position: relative; } .oc-ust__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 20px; padding: 4px 20px 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .oc-ust__rail::-webkit-scrollbar { display: none; } @media (min-width: 640px) { .oc-ust__rail { grid-auto-columns: 42%; gap: 16px; padding: 4px 40px 20px; } } @media (min-width: 1024px) { .oc-ust__rail { grid-auto-columns: 24%; gap: 20px; } } .oc-ust__card { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--oc-ust-card); border: 1px solid var(--oc-ust-border); border-radius: 14px; overflow: hidden; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .oc-ust__card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -22px rgba(0,0,0,0.18); border-color: color-mix(in srgb, var(--oc-ust-accent) 35%, var(--oc-ust-border)); } .oc-ust__card--clinic { border-color: color-mix(in srgb, var(--oc-ust-accent) 40%, var(--oc-ust-border)); } .oc-ust__card--clinic::before { content: ''; position: absolute; top: 0; left: 20px; width: 56px; height: 4px; background: var(--oc-ust-accent); border-radius: 0 0 4px 4px; z-index: 2; } .oc-ust__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--oc-ust-soft); } .oc-ust__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .oc-ust__card:hover .oc-ust__img { transform: scale(1.04); } .oc-ust__img--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-ust-accent)); } .oc-ust__badge { position: absolute; top: 10px; right: 10px; display: inline-flex; padding: 4px 9px; background: var(--oc-ust-accent); color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; } .oc-ust__badge--consult { background: rgba(255,255,255,0.92); color: var(--oc-ust-accent); border: 1px solid color-mix(in srgb, var(--oc-ust-accent) 35%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .oc-ust__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 2px; } .oc-ust__city { font-size: 1.02rem; line-height: 1.3; margin: 0; font-weight: 600; letter-spacing: -0.005em; } .oc-ust__role { font-size: 0.82rem; line-height: 1.45; color: var(--oc-ust-muted); } /* ---------- Nav Buttons ---------- */ .oc-ust__nav { position: absolute; top: calc(50% - 22px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: #fff; border: 1px solid var(--oc-ust-border); color: var(--oc-ust-text); cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.1); transition: transform 0.15s, filter 0.15s; z-index: 3; } .oc-ust__nav svg { width: 18px; height: 18px; } .oc-ust__nav:hover { transform: translateY(-50%) scale(1.06); } .oc-ust__nav--prev { left: 12px; } .oc-ust__nav--next { right: 12px; } @media (min-width: 1024px) { .oc-ust__nav { display: inline-flex; } } .oc-ust__note { max-width: 720px; margin: 32px auto 0; padding: 0 20px; text-align: center; font-size: 0.92rem; line-height: 1.6; color: var(--oc-ust-muted); } @media (min-width: 768px) { .oc-ust__note { padding: 0 40px; } } /* === Section: uber-story === */ .oc-us { background: var(--oc-us-bg); color: var(--oc-us-text); padding: 80px 20px; scroll-margin-top: 24px; } @media (min-width: 768px) { .oc-us { padding: 112px 40px; } } .oc-us__inner { max-width: 1280px; margin: 0 auto; } .oc-us__split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .oc-us__split { grid-template-columns: 1.1fr 1fr; gap: 64px; } } .oc-us__video { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border: none; padding: 0; background: var(--oc-us-soft); border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 28px 64px -36px rgba(0,0,0,0.28); transition: transform 0.25s ease; } @media (min-width: 1024px) { .oc-us__video { aspect-ratio: 5 / 6; } } .oc-us__video:hover { transform: translateY(-2px); } .oc-us__video--static { cursor: default; } .oc-us__video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .oc-us__video-poster--placeholder { background: linear-gradient(135deg, #d8d5cc, var(--oc-us-accent)); } .oc-us__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 999px; background: rgba(255,255,255,0.96); color: var(--oc-us-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.4); transition: transform 0.2s ease, background 0.2s ease; } .oc-us__video:hover .oc-us__play { transform: translate(-50%, -50%) scale(1.06); } .oc-us__play svg { width: 28px; height: 28px; margin-left: 3px; } .oc-us__quote-overlay { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: rgba(15,15,15,0.78); color: #fff; border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: left; } .oc-us__quote-mark { width: 18px; height: 18px; color: var(--oc-us-accent); flex-shrink: 0; margin-top: 2px; } .oc-us__quote-overlay span { font-size: 0.92rem; line-height: 1.45; font-weight: 500; letter-spacing: -0.005em; } .oc-us__body { max-width: 540px; } .oc-us__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-us-accent); font-weight: 600; margin-bottom: 16px; } .oc-us__headline { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 22px; font-weight: 600; } .oc-us__text { font-size: 1.02rem; line-height: 1.65; color: var(--oc-us-muted); } .oc-us__text p { margin: 0 0 16px; } .oc-us__text p:last-child { margin-bottom: 0; } .oc-us__modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .oc-us__modal[hidden] { display: none; } .oc-us__modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(6px); } .oc-us__modal-frame { position: relative; width: 100%; max-width: 480px; aspect-ratio: 9 / 16; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 32px 64px -16px rgba(0,0,0,0.6); } .oc-us__modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); } .oc-us__modal-close svg { width: 20px; height: 20px; } .oc-us__modal-video, .oc-us__modal-video video { width: 100%; height: 100%; object-fit: cover; display: block; } /* === Section: uber-team === */ .oc-ut { position: relative; color: var(--oc-ut-text); overflow: hidden; min-height: 460px; scroll-margin-top: 24px; } @media (min-width: 768px) { .oc-ut { min-height: 560px; } } @media (min-width: 1200px) { .oc-ut { min-height: 640px; } } .oc-ut__media { position: absolute; inset: 0; } .oc-ut__img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-ut__img--placeholder { background: linear-gradient(135deg, #1a1a1a, var(--oc-ut-accent)); } .oc-ut__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,15,0.35) 0%, rgba(15,15,15,0.78) 100%); } .oc-ut__inner { position: relative; max-width: 1100px; margin: 0 auto; padding: 96px 20px 80px; display: flex; align-items: flex-end; min-height: inherit; } @media (min-width: 768px) { .oc-ut__inner { padding: 140px 40px 96px; } } .oc-ut__body { max-width: 720px; } .oc-ut__eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-ut-accent); font-weight: 600; margin-bottom: 16px; } .oc-ut__headline { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; font-weight: 600; } .oc-ut__sub { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.84); margin: 0 0 32px; max-width: 600px; } .oc-ut__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.18); } @media (min-width: 700px) { .oc-ut__stats { grid-template-columns: repeat(4, 1fr); gap: 32px; } } .oc-ut__stat { display: flex; flex-direction: column; gap: 2px; } .oc-ut__stat-value { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; color: var(--oc-ut-text); letter-spacing: -0.01em; line-height: 1.15; } .oc-ut__stat-label { font-size: 0.8rem; line-height: 1.45; color: rgba(255,255,255,0.7); } /* === Section: ugc-strip === */ .oc-ugc { background: var(--oc-u-bg); color: var(--oc-u-text); padding: 72px 0 96px; } @media (min-width: 768px) { .oc-ugc { padding: 96px 0 120px; } } .oc-ugc__header-wrap { padding: 0 20px; margin-bottom: 40px; } @media (min-width: 768px) { .oc-ugc__header-wrap { padding: 0 40px; margin-bottom: 56px; } } .oc-ugc__header { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } @media (min-width: 900px) { .oc-ugc__header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; } } .oc-ugc__header-text { max-width: 640px; } .oc-ugc__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-u-accent); margin-bottom: 12px; font-weight: 600; } .oc-ugc__headline { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; font-weight: 600; } .oc-ugc__subline { font-size: 0.98rem; line-height: 1.55; color: var(--oc-u-muted); margin: 0; max-width: 560px; } .oc-ugc__handle-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; border: 1px solid var(--oc-u-border); border-radius: 999px; color: var(--oc-u-text); font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .oc-ugc__handle-btn:hover { border-color: var(--oc-u-accent); color: var(--oc-u-accent); } .oc-ugc__handle-btn svg { width: 16px; height: 16px; } /* ---------- Rail ---------- */ .oc-ugc__rail-wrap { position: relative; } .oc-ugc__rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 20px; -webkit-overflow-scrolling: touch; } .oc-ugc__rail::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .oc-ugc__rail { gap: 20px; padding: 4px 40px; } } /* ---------- Tile (IG-Feed-Post-Card) ---------- */ .oc-ugc__tile { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--oc-u-card-bg); border: 1px solid var(--oc-u-border); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: transform 0.22s ease, box-shadow 0.22s ease; } .oc-ugc__tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.12); } .oc-ugc__tile--portrait { width: 280px; } .oc-ugc__tile--square { width: 300px; } .oc-ugc__tile--landscape { width: 300px; } @media (min-width: 768px) { .oc-ugc__tile--portrait { width: 300px; } .oc-ugc__tile--square { width: 340px; } .oc-ugc__tile--landscape { width: 340px; } } /* ---------- Post Header ---------- */ .oc-ugc__post-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .oc-ugc__avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; padding: 0; background: var(--oc-u-border); display: flex; align-items: center; justify-content: center; } .oc-ugc__avatar--ring { padding: 2px; background: conic-gradient(from 45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); } .oc-ugc__avatar-inner { width: 100%; height: 100%; border-radius: 50%; background: var(--oc-u-card-bg); padding: 2px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .oc-ugc__avatar--ring .oc-ugc__avatar-inner { padding: 2px; } .oc-ugc__avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .oc-ugc__avatar-fallback { width: 100%; height: 100%; border-radius: 50%; background: var(--oc-u-accent); color: #fff; font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: 0; } .oc-ugc__handle-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .oc-ugc__post-handle { font-size: 0.86rem; font-weight: 600; color: var(--oc-u-text); letter-spacing: -0.005em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-ugc__timestamp { font-size: 0.74rem; color: var(--oc-u-muted); line-height: 1.2; } /* ---------- Media ---------- */ .oc-ugc__tile-media { position: relative; overflow: hidden; background: var(--oc-u-tile-bg); border-top: 1px solid var(--oc-u-border); border-bottom: 1px solid var(--oc-u-border); } .oc-ugc__tile--portrait .oc-ugc__tile-media { aspect-ratio: 9 / 16; } .oc-ugc__tile--square .oc-ugc__tile-media { aspect-ratio: 1 / 1; } .oc-ugc__tile--landscape .oc-ugc__tile-media { aspect-ratio: 4 / 5; } .oc-ugc__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .oc-ugc__img--placeholder { background: linear-gradient(135deg, #c9a97a, var(--oc-u-accent)); } .oc-ugc__tile:hover .oc-ugc__img { transform: scale(1.03); } /* Video / Reel Indicator */ .oc-ugc__reel-tag { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; border-radius: 999px; backdrop-filter: blur(6px); } .oc-ugc__reel-tag svg { width: 12px; height: 12px; } .oc-ugc__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .oc-ugc__play::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%); } .oc-ugc__play svg { position: relative; width: 52px; height: 52px; color: rgba(255,255,255,0.95); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); } /* Carousel Indicators */ .oc-ugc__carousel-icon { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 6px; background: rgba(0,0,0,0.35); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .oc-ugc__carousel-icon svg { width: 15px; height: 15px; } .oc-ugc__carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px 8px; background: rgba(0,0,0,0.25); border-radius: 999px; backdrop-filter: blur(4px); } .oc-ugc__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background 0.2s ease; } .oc-ugc__dot.is-active { background: #fff; } /* ---------- Action Bar ---------- */ .oc-ugc__actions { display: flex; align-items: center; gap: 14px; padding: 10px 12px 6px; } .oc-ugc__action { display: inline-flex; align-items: center; gap: 5px; color: var(--oc-u-text); font-size: 0.82rem; font-weight: 500; text-decoration: none; background: transparent; border: 0; padding: 0; cursor: default; letter-spacing: 0.01em; } .oc-ugc__action svg { width: 20px; height: 20px; } .oc-ugc__action--link { margin-left: auto; cursor: pointer; transition: color 0.18s ease; } .oc-ugc__action--link:hover { color: var(--oc-u-accent); } .oc-ugc__action-count { color: var(--oc-u-text); font-weight: 500; } /* ---------- STORY-LOOK ---------- */ .oc-ugc__tile--story { padding: 0; } .oc-ugc__tile--story .oc-ugc__story-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #1a1a1a; border-radius: 13px; } .oc-ugc__tile--story .oc-ugc__img { width: 100%; height: 100%; object-fit: cover; } .oc-ugc__story-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 22%, rgba(0,0,0,0.0) 70%, rgba(0,0,0,0.45) 100%); pointer-events: none; } .oc-ugc__story-chrome-top { position: absolute; top: 0; left: 0; right: 0; padding: 8px 10px 0; display: flex; flex-direction: column; gap: 8px; z-index: 2; } .oc-ugc__story-progress { display: flex; gap: 3px; } .oc-ugc__story-bar { flex: 1 1 0; height: 2px; border-radius: 99px; background: rgba(255,255,255,0.4); overflow: hidden; position: relative; } .oc-ugc__story-bar.is-seen { background: rgba(255,255,255,0.95); } .oc-ugc__story-bar.is-active::after { content: ""; position: absolute; inset: 0; width: 55%; background: #ffffff; border-radius: 99px; } .oc-ugc__story-head { display: flex; align-items: center; gap: 9px; padding: 4px 2px 0; } .oc-ugc__story-head .oc-ugc__avatar { width: 30px; height: 30px; } .oc-ugc__story-head .oc-ugc__handle-meta { flex: 1 1 auto; min-width: 0; } .oc-ugc__post-handle--on-image { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); font-size: 0.84rem; } .oc-ugc__story-time { color: rgba(255,255,255,0.85); font-size: 0.78rem; font-weight: 400; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .oc-ugc__story-sticker { position: absolute; left: 50%; transform: translateX(-50%); max-width: 82%; padding: 9px 14px; text-align: center; font-size: 0.95rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; white-space: pre-line; z-index: 3; } .oc-ugc__story-sticker--pos-top { top: 18%; } .oc-ugc__story-sticker--pos-middle { top: 50%; transform: translate(-50%, -50%); } .oc-ugc__story-sticker--pos-bottom { bottom: 20%; } .oc-ugc__story-sticker--classic { color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .oc-ugc__story-sticker--white-pill { color: #1a1a1a; background: #fff; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); padding: 10px 18px; font-size: 0.92rem; } .oc-ugc__story-sticker--handwritten { color: #fff; background: transparent; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 0 20px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.6); } .oc-ugc__story-mention { position: absolute; left: 50%; transform: translateX(-50%); padding: 6px 14px; background: #fff; color: #1a1a1a; font-size: 0.82rem; font-weight: 600; letter-spacing: -0.005em; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,0.25); z-index: 3; white-space: nowrap; } .oc-ugc__story-mention--pos-top { top: 72px; } .oc-ugc__story-mention--pos-bottom { bottom: 18px; } .oc-ugc__tile--story .oc-ugc__play { z-index: 4; } .oc-ugc__tile--story .oc-ugc__play::before { content: none; } .oc-ugc__tile--story .oc-ugc__play svg { width: 54px; height: 54px; opacity: 0.7; } .oc-ugc__story-link { position: absolute; inset: 0; z-index: 5; } /* ---------- Caption (nur Posts) ---------- */ .oc-ugc__caption { padding: 2px 12px 14px; font-size: 0.84rem; line-height: 1.45; color: var(--oc-u-text); word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .oc-ugc__caption-handle { font-weight: 600; color: var(--oc-u-text); margin-right: 6px; } .oc-ugc__caption-text { color: var(--oc-u-text); } /* ---------- Nav Buttons ---------- */ .oc-ugc__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: #fff; border: 1px solid var(--oc-u-border); color: var(--oc-u-text); cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .oc-ugc__nav:hover { border-color: var(--oc-u-accent); color: var(--oc-u-accent); } .oc-ugc__nav svg { width: 20px; height: 20px; } .oc-ugc__nav--prev { left: 12px; } .oc-ugc__nav--next { right: 12px; } @media (min-width: 900px) { .oc-ugc__nav { display: inline-flex; } .oc-ugc__nav--prev { left: 20px; } .oc-ugc__nav--next { right: 20px; } } .oc-ugc__disclaimer { max-width: 720px; margin: 36px auto 0; padding: 0 20px; font-size: 0.78rem; color: var(--oc-u-muted); text-align: center; line-height: 1.5; letter-spacing: 0.01em; } /* === Section: usp-strip === */ .oc-usp { background: var(--oc-usp-bg); color: var(--oc-usp-text); padding: 72px 20px; } @media (min-width: 768px) { .oc-usp { padding: 96px 40px; } } .oc-usp__inner { max-width: 1280px; margin: 0 auto; } .oc-usp__header { text-align: center; max-width: 640px; margin: 0 auto 56px; } .oc-usp__eyebrow { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-usp-accent); margin-bottom: 12px; font-weight: 600; } .oc-usp__headline { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0; font-weight: 600; color: var(--oc-usp-text); } .oc-usp__grid { display: grid; gap: 40px 32px; grid-template-columns: 1fr; } @media (min-width: 600px) { .oc-usp__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .oc-usp__grid--3 { grid-template-columns: repeat(3, 1fr); } .oc-usp__grid--4 { grid-template-columns: repeat(4, 1fr); } .oc-usp__grid--5 { grid-template-columns: repeat(5, 1fr); } .oc-usp__grid--6 { grid-template-columns: repeat(3, 1fr); } } .oc-usp__item { text-align: center; padding: 0 12px; position: relative; } @media (min-width: 1000px) { .oc-usp__item:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 20%; height: 60%; width: 1px; background: var(--oc-usp-divider); } } .oc-usp__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--oc-usp-accent) 10%, transparent); color: var(--oc-usp-accent); margin-bottom: 20px; } .oc-usp__icon svg { width: 28px; height: 28px; } .oc-usp__title { font-size: 1.05rem; line-height: 1.3; margin: 0 0 10px; font-weight: 600; color: var(--oc-usp-text); letter-spacing: -0.005em; } .oc-usp__description { font-size: 0.92rem; line-height: 1.55; margin: 0; color: var(--oc-usp-muted); }