/* ============================================================ FITMITSUSE – INTERAKTIVES ERLEBNIS 3D-Faszien-Netz (Hero) · Gewebe-Löser · Schmerz-Check · Ablauf-Faden Alle Animationen respektieren prefers-reduced-motion und den A11y-Schalter „Animationen stoppen" (.a11y-no-anim). ============================================================ */ /* Sticky-Fix: `overflow-x: hidden` (Inline-CSS) macht zum Scroll-Container und bricht position:sticky. `clip` klippt genauso, erzeugt aber KEINEN Scroll-Container. Höhere Spezifität als Inline. */ :root { overflow-x: clip } html > body { overflow-x: clip } /* ── HERO: heller Split-Hero mit Porträt ── Inhalt zentriert auf feste Maximalbreite (kein Auseinanderdriften auf Ultrawide), helle Farbwelt statt Dunkel-Overlay. */ #hero .hero-wrap { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 440px); justify-content: center; align-items: center; column-gap: clamp(44px, 6vw, 92px); min-height: 0; padding: clamp(48px, 6vw, 84px) clamp(20px, 5vw, 60px) clamp(56px, 7vw, 96px); background: radial-gradient(52% 72% at 84% 22%, rgba(97, 119, 1, .10), transparent 62%), radial-gradient(46% 60% at 4% 92%, rgba(97, 119, 1, .07), transparent 60%), linear-gradient(180deg, #FEFFFB 0%, #F2F5E8 100%) } #hero .hero-body { position: relative; z-index: 2; width: auto; padding: 0 } #hero .hero-inner { max-width: 600px; margin-left: 0 } /* Textfarben: dunkel auf hellem Grund (überschreibt Inline-CSS) */ #hero .h1 { font-size: clamp(2.3rem, 3.7vw, 3.9rem) } #hero .hero-tag { border-color: var(--bdr-s); color: var(--green-mid); background: rgba(255, 255, 255, .65) } #hero .hero-title { color: var(--tx) } #hero .hero-eyeline { color: var(--green-mid) } #hero .hero-title .serif { color: var(--tx2) } #hero .hero-sub { color: var(--tx2) } #hero .btn-hw { border-color: var(--bdr-s); color: var(--tx2) } #hero .btn-hw:hover { border-color: var(--green); color: var(--green) } #hero .hero-stats { border-top-color: var(--bdr) } #hero .hs-num { color: var(--tx) } #hero .hs-lbl { color: var(--tx3) } #hero .hs-sep { background: var(--bdr) } #hero .hero-scroll { color: var(--tx3) } #hero .hero-scroll-line { background: linear-gradient(to bottom, rgba(20, 20, 8, .35), transparent) } /* Foto rechts – Rahmensprache wie die übrigen Fotos der Seite */ .hero-photo { position: relative; z-index: 2; width: 100%; max-width: 440px; aspect-ratio: 3 / 4 } /* versetzter Deko-Rahmen (wie .photo-deco der Seite) */ .hero-photo::before { content: ''; position: absolute; top: 18px; left: -18px; right: 18px; bottom: -18px; border: 2px solid var(--green-soft); border-radius: var(--r-xl); z-index: -1 } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; border-radius: var(--r-xl); box-shadow: var(--sh-l) } .hero-photo-badge { position: absolute; left: 16px; bottom: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid var(--bdr); border-radius: var(--r); padding: 11px 17px; box-shadow: var(--sh-s); z-index: 3 } .hero-photo-badge .n { font-family: var(--font-h); font-weight: 700; font-size: .9rem; color: var(--tx) } .hero-photo-badge .r { font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--green-mid); margin-top: 2px } @media (max-width: 860px) { #hero .hero-wrap { grid-template-columns: 1fr; gap: clamp(34px, 8vw, 48px); padding-top: clamp(36px, 8vw, 60px); align-items: start } #hero .hero-inner { max-width: 100% } .hero-photo { justify-self: center; max-width: 340px } } /* ── LÖSUNG: Sticky-Kartei-Galerie (7 Bilder) ── */ .sol-track, .sol-sticky { position: relative } /* Fallback: horizontale Swipe-Karten (Mobile / Reduced-Motion / kein JS) */ .sol-gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--r-lg) } .sol-gallery::-webkit-scrollbar { display: none } .sol-card { flex: 0 0 88%; scroll-snap-align: center; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-m); aspect-ratio: 3 / 2; background: var(--bg2) } .sol-card img { width: 100%; height: 100%; object-fit: cover; display: block } .sol-hint { margin-top: 14px; text-align: center; font-family: var(--font-h); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3) } .sol-dots { display: none } /* Stack-Modus (nur Desktop + Motion, per JS-Klasse .is-stack) */ #solution.is-stack .sol-track { height: calc(100vh + 6 * 38vh) } #solution.is-stack .sol-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center } #solution.is-stack .sol-visual { position: relative } #solution.is-stack .sol-visual::before { content: ''; position: absolute; top: 16px; left: 16px; right: -16px; bottom: -16px; border: 2px solid var(--green-soft); border-radius: var(--r-lg); z-index: 0 } #solution.is-stack .sol-gallery { display: block; position: relative; z-index: 1; overflow: visible; aspect-ratio: 3 / 2; scroll-snap-type: none } #solution.is-stack .sol-card { position: absolute; inset: 0; width: 100%; flex: none; box-shadow: var(--sh-l); will-change: transform, opacity; backface-visibility: hidden } #solution.is-stack .sol-hint { display: none } #solution.is-stack .sol-dots { display: flex; gap: 8px; justify-content: center; position: absolute; left: 0; right: 0; bottom: -32px; z-index: 2 } #solution.is-stack .sol-dots span { width: 7px; height: 7px; border-radius: 100px; background: var(--bdr-s); transition: width .35s ease, background .35s ease } #solution.is-stack .sol-dots span.on { width: 22px; background: var(--green) } /* ── VORTEILE: Editorial-Grid statt 4 gleicher Karten ── */ .bento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: clamp(14px, 1.8vw, 22px) } .bento-main { grid-row: 1 / 3; background: var(--green); color: #fff; border-radius: var(--r-xl); padding: clamp(26px, 3.2vw, 44px); position: relative; overflow: hidden; display: flex; flex-direction: column } .bento-kicker { font-family: var(--font-h); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .75); margin-bottom: 16px } .bento-main h3 { font-family: var(--font-h); font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 700; line-height: 1.22; letter-spacing: -.02em; margin-bottom: 14px; max-width: 380px } .bento-main p { font-size: .92rem; line-height: 1.75; color: rgba(255, 255, 255, .92); max-width: 360px } .bento-lines { margin-top: auto; padding-top: 28px; width: 100%; height: 90px } .bento-lines path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; stroke-linecap: round } .bento-cell { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r-xl); padding: clamp(22px, 2.6vw, 34px); transition: border-color var(--ease), box-shadow var(--ease) } .bento-cell:hover { border-color: var(--bdr-s); box-shadow: var(--sh-s) } .bento-cell h3, .bento-wide h3 { font-family: var(--font-h); font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px } .bento-cell p, .bento-wide p { font-size: .87rem; color: var(--tx2); line-height: 1.7 } .bento-wide { grid-column: 2 / 4; background: var(--green-pale); border: 1px solid var(--bdr); border-radius: var(--r-xl); padding: clamp(22px, 2.6vw, 34px); display: flex; align-items: center; gap: clamp(20px, 3vw, 40px) } .bento-stat { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; padding-right: clamp(20px, 3vw, 40px); border-right: 1px solid var(--bdr-s) } .bento-num { font-family: var(--font-h); font-size: clamp(2.2rem, 3.5vw, 3rem); font-weight: 800; letter-spacing: -.04em; color: var(--green-mid); line-height: 1 } .bento-stat-l { font-family: var(--font-h); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); line-height: 1.45 } /* ── CHECKLISTEN: editorial statt Kästchen-Widget ── */ .sec .ck { background: transparent; border: 0; border-left: 2px solid var(--bdr); border-radius: 0; padding: 8px 0 8px 18px; transition: border-color var(--ease) } .sec .ck:hover { border-left-color: var(--green) } .sec .ck-i { background: transparent; border: 1.5px solid var(--bdr-s); width: 20px; height: 20px } .sec .ck:hover .ck-i { border-color: var(--green) } /* ── EINZUGSGEBIET: Radar-Karte ── */ .radar-wrap { max-width: 760px; margin: 0 auto } .radar-map { display: block; width: 100%; height: auto; overflow: visible } .radar-ring { fill: none; stroke: var(--bdr-s); stroke-width: 1; stroke-dasharray: 3 6; opacity: .8 } .radar-ring-lbl { font-family: var(--font-h); font-size: 11px; font-weight: 600; letter-spacing: .08em; fill: var(--tx3); text-anchor: middle } .radar-core { fill: var(--green) } .radar-pulse { fill: none; stroke: var(--green); stroke-width: 2; transform-origin: 380px 290px; animation: radar-pulse 2.8s ease-out infinite } @keyframes radar-pulse { 0% { transform: scale(1); opacity: .9 } 70%, 100% { transform: scale(3.4); opacity: 0 } } .radar-center-lbl { font-family: var(--font-h); font-size: 15px; font-weight: 800; letter-spacing: -.01em; fill: var(--tx); text-anchor: middle } .radar-center-sub { font-family: var(--font-h); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: var(--green-mid); text-anchor: middle } .radar-town circle { fill: var(--surf); stroke: var(--green); stroke-width: 2 } /* Achtung: text-anchor NICHT per CSS setzen – würde die Präsentationsattribute (start/middle/end) im SVG überschreiben. */ .radar-town text { font-family: var(--font-h); font-size: 12.5px; font-weight: 600; fill: var(--tx2) } /* gestaffeltes Einblenden, sobald die Karte sichtbar wird */ .radar-town { opacity: 0; transition: opacity .5s ease; transition-delay: calc(var(--i) * 70ms) } .radar-map.live .radar-town { opacity: 1 } .radar-note { text-align: center; font-size: .74rem; color: var(--tx3); margin-top: 10px } /* Kompakte Orts-Liste: nur auf schmalen Screens statt Radar */ .areas-list { display: none } @media (max-width: 640px) { .radar-wrap { display: none } .areas-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; max-width: 420px; margin: 0 auto } .areas-list li { display: flex; align-items: center; gap: 10px; font-family: var(--font-h); font-size: .84rem; font-weight: 500; color: var(--tx2); padding: 7px 0; border-bottom: 1px solid var(--bdr) } .areas-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0 } .areas-list li.main { color: var(--green-mid); font-weight: 700 } } /* ── FAQ: Accordion statt statischer Karten ── */ .faq-acc-wrap { max-width: 760px; margin: clamp(28px, 4vw, 44px) auto 0; border-top: 1px solid var(--bdr) } .faq-acc { border-bottom: 1px solid var(--bdr) } .faq-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(18px, 2.4vw, 26px) 4px; font-family: var(--font-h); font-size: clamp(.95rem, 1.3vw, 1.08rem); font-weight: 650; letter-spacing: -.01em; color: var(--tx); transition: color var(--ease) } .faq-acc summary::-webkit-details-marker { display: none } .faq-acc summary:hover { color: var(--green) } .faq-acc summary:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px } /* Plus-/Minus-Zeichen */ .faq-x { position: relative; width: 30px; height: 30px; border: 1.5px solid var(--bdr-s); border-radius: 50%; flex-shrink: 0; transition: var(--ease) } .faq-x::before, .faq-x::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--ease) } .faq-x::after { transform: translate(-50%, -50%) rotate(90deg) } .faq-acc[open] .faq-x { border-color: var(--green); background: var(--green-pale) } .faq-acc[open] .faq-x::after { transform: translate(-50%, -50%) rotate(0deg) } .faq-acc[open] summary { color: var(--green-mid) } .faq-body { padding: 0 44px clamp(18px, 2.4vw, 26px) 4px } .faq-body p { font-size: .9rem; color: var(--tx2); line-height: 1.75; max-width: 640px } .faq-acc[open] .faq-body { animation: faq-in .35s ease } @keyframes faq-in { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } } /* ── STUDIO-GALERIE: versetzte Collage statt 3 gleicher Kacheln ── */ @media (min-width: 901px) { #studio .gal { grid-template-columns: 1.15fr 1fr .85fr; align-items: start; gap: clamp(14px, 2vw, 24px) } #studio .gal-p:nth-child(1) img { aspect-ratio: 3 / 4 } #studio .gal-p:nth-child(2) { margin-top: 52px } #studio .gal-p:nth-child(2) img { aspect-ratio: 4 / 5 } #studio .gal-p:nth-child(3) { margin-top: 104px } #studio .gal-p:nth-child(3) img { aspect-ratio: 1 / 1 } } #studio .gal-p { box-shadow: var(--sh-m) } /* ── CTA-BAND: Faszienlinien statt Deko-Kreis ── */ section .cta-band::before { content: ''; position: absolute; inset: 0; top: 0; right: 0; width: auto; height: auto; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.5'%3E%3Cpath d='M0,320 C150,260 300,360 450,300 C600,240 750,330 900,270'/%3E%3Cpath d='M0,275 C150,215 300,315 450,255 C600,195 750,285 900,225'/%3E%3Cpath d='M0,365 C150,305 300,405 450,345 C600,285 750,375 900,315'/%3E%3Cpath d='M0,230 C150,170 300,270 450,210 C600,150 750,240 900,180'/%3E%3Cpath d='M0,185 C150,125 300,225 450,165 C600,105 750,195 900,135'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat; pointer-events: none } /* ── GEWEBE-LÖSER (dunkle Interaktions-Sektion) ── */ #gewebe { background: #12140b; position: relative; overflow: hidden; padding: var(--pad) 0 } #gewebe .eyebrow { color: #C9DB6A } #gewebe .eyebrow::before { background: #C9DB6A } #gewebe .h2 { color: #fff } #gewebe .lead { color: rgba(255, 255, 255, .62) } .tissue-head { text-align: center; max-width: 620px; margin: 0 auto clamp(28px, 4vw, 44px) } .tissue-hint { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 8px 18px; border: 1px solid rgba(201, 219, 106, .35); border-radius: 100px; font-family: var(--font-h); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #C9DB6A } .tissue-hint svg { width: 14px; height: 14px; flex-shrink: 0 } .tissue-stage { position: relative; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(201, 219, 106, .05), transparent 70%) } #tissueCanvas { display: block; width: 100%; height: clamp(280px, 38vw, 400px); touch-action: pan-y; cursor: pointer } /* Fortschritt + Steuerung */ .tissue-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 20px } .tissue-progress { display: flex; align-items: center; gap: 12px; font-family: var(--font-h); font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .75) } .tissue-track { display: block; width: clamp(120px, 22vw, 220px); height: 5px; border-radius: 100px; background: rgba(255, 255, 255, .12); overflow: hidden } .tissue-fill { display: block; height: 100%; width: 0%; border-radius: 100px; background: linear-gradient(90deg, #C96F4A, #C9DB6A); transition: width .3s ease } .tissue-val { min-width: 82px; color: #C9DB6A; font-variant-numeric: tabular-nums } .tissue-actions { display: flex; gap: 10px; flex-wrap: wrap } .btn-tissue { border: 1.5px solid rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .85); border-radius: 100px; padding: 11px 22px; font-family: var(--font-h); font-weight: 600; font-size: .8rem; transition: var(--ease); display: inline-flex; align-items: center; gap: 8px } .btn-tissue:hover, .btn-tissue:focus-visible { border-color: #C9DB6A; color: #C9DB6A } .btn-tissue svg { width: 14px; height: 14px; flex-shrink: 0 } /* Belohnungs-Botschaft nach vollständigem Lösen */ .tissue-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; background: rgba(18, 20, 11, .58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s } .tissue-done.vis { opacity: 1; visibility: visible } .tissue-done h3 { font-family: var(--font-h); font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 700; color: #fff; max-width: 480px; line-height: 1.3 } .tissue-done p { color: rgba(255, 255, 255, .7); font-size: .9rem; max-width: 420px; line-height: 1.7 } .tissue-done .btn-p { background: #C9DB6A; color: #12140B; box-shadow: 0 4px 24px rgba(201, 219, 106, .35) } .tissue-done .btn-p:hover { background: #DCE98F; transform: translateY(-1px) } /* ── SCHMERZ-CHECK (interaktive Körperkarte) ── */ #schmerzcheck { background: var(--bg2); border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr) } .bodymap-grid { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(32px, 4vw, 52px) } .bodymap-figure { position: relative; margin: 0 auto; width: 100%; max-width: 340px } .bodymap-figure svg { display: block; width: 100%; height: auto } .body-shape { fill: #E4EACB; stroke: #8A9A3D; stroke-width: 1.6; stroke-linejoin: round } /* Hotspot-Buttons (absolut über der Silhouette) */ .hotspot { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(97, 119, 1, .16); display: flex; align-items: center; justify-content: center; transition: var(--ease); z-index: 2 } .hotspot::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #fff, 0 1px 6px rgba(0, 0, 0, .25); transition: var(--ease) } .hotspot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(97, 119, 1, .55); animation: hs-pulse 2.6s ease-out infinite } .hotspot:nth-of-type(2)::after { animation-delay: .4s } .hotspot:nth-of-type(3)::after { animation-delay: .8s } .hotspot:nth-of-type(4)::after { animation-delay: 1.2s } .hotspot:nth-of-type(5)::after { animation-delay: 1.6s } .hotspot:nth-of-type(6)::after { animation-delay: 2s } @keyframes hs-pulse { 0% { transform: scale(.6); opacity: .9 } 70%, 100% { transform: scale(1.5); opacity: 0 } } .hotspot:hover, .hotspot:focus-visible { background: rgba(97, 119, 1, .3) } .hotspot[aria-pressed="true"] { background: var(--green) } .hotspot[aria-pressed="true"]::before { background: #fff; box-shadow: none } .hotspot[aria-pressed="true"]::after { animation: none; opacity: 0 } .hotspot:focus-visible { outline: 3px solid var(--green); outline-offset: 3px } /* Detail-Panels */ .bodymap-panel { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r-xl); padding: clamp(24px, 3.5vw, 44px); box-shadow: var(--sh-m); min-height: 380px } .bm-zone[hidden] { display: none } .bm-tag { display: inline-block; padding: 5px 14px; background: var(--green-pale); border-radius: 100px; font-family: var(--font-h); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-mid); margin-bottom: 14px } .bm-zone h3 { font-family: var(--font-h); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px } .bm-block { margin-bottom: 18px } .bm-block:last-of-type { margin-bottom: 24px } .bm-block h4 { font-family: var(--font-h); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; display: flex; align-items: center; gap: 8px } .bm-block h4::before { content: ''; width: 14px; height: 2px; background: var(--green); flex-shrink: 0 } .bm-block p, .bm-block li { font-size: .88rem; color: var(--tx2); line-height: 1.7 } .bm-block ul { display: flex; flex-direction: column; gap: 5px } .bm-block li { display: flex; align-items: flex-start; gap: 9px } .bm-block li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: 9px } .bodymap-legend { margin-top: 16px; text-align: center; font-size: .76rem; color: var(--tx3); transition: color .25s ease } /* Ergebnis-Hinweis (nur auf Mobile, wenn das Panel unter die Figur rutscht): die Legende wird zum deutlichen Feedback "dein Ergebnis erscheint unten" */ .bodymap-legend.is-result { color: var(--green-mid, #4d6001); font-weight: 600; font-size: .82rem } .bodymap-legend .bm-arrow { display: inline-block; margin-left: 6px; font-weight: 700; transform: translateY(0) } @media (prefers-reduced-motion: no-preference) { .bodymap-legend.is-result .bm-arrow { animation: bmArrowBounce .9s ease-in-out 3 } } /* Projekt-Schalter "Animationen stoppen" respektieren */ html.a11y-no-anim .bodymap-legend .bm-arrow { animation: none !important } @keyframes bmArrowBounce { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(5px) } } /* ── Ursache-Zitat (Walter Packi) ── */ .cause-quote { max-width: 600px; margin: clamp(22px, 3vw, 34px) auto 0 } .cause-quote::before { content: ''; display: block; width: 34px; height: 2px; background: var(--green); opacity: .8; margin: 0 auto 20px } .cause-quote blockquote { font-family: var(--font-s); font-style: italic; font-weight: 350; font-size: clamp(1.35rem, 3vw, 2.05rem); line-height: 1.3; letter-spacing: -.015em; color: var(--tx) } .cause-quote figcaption { margin-top: 15px; font-family: var(--font-h); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3) } /* ── ABLAUF: Faszienfaden ── */ .proc-thread { display: block; width: 100%; height: auto; margin: 0 auto clamp(20px, 3vw, 34px); max-width: 860px; overflow: visible } .proc-thread path { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55 } .proc-thread circle { fill: var(--green); opacity: 0; transition: opacity .5s ease } .proc-thread.drawn path { transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1); stroke-dashoffset: 0 } .proc-thread.drawn circle { opacity: 1 } .proc-thread.drawn circle:nth-of-type(1) { transition-delay: .35s } .proc-thread.drawn circle:nth-of-type(2) { transition-delay: .9s } .proc-thread.drawn circle:nth-of-type(3) { transition-delay: 1.5s } .proc-ico-svg { width: 42px; height: 42px; border-radius: 12px; background: var(--green-pale); display: flex; align-items: center; justify-content: center; margin-bottom: 14px } .proc-ico-svg svg { width: 20px; height: 20px; color: var(--green) } /* ── REDUZIERTE BEWEGUNG ── */ @media (prefers-reduced-motion: reduce) { .hotspot::after { animation: none; opacity: 0 } .proc-thread path { transition: none !important; stroke-dashoffset: 0 } .proc-thread circle { transition: none !important; opacity: 1 } .tissue-fill, .tissue-done { transition: none } .radar-pulse { animation: none; opacity: 0 } .radar-town { transition: none !important; opacity: 1 } .faq-acc[open] .faq-body { animation: none } } /* A11y-Schalter „Animationen stoppen" */ .a11y-no-anim .hotspot::after { animation: none; opacity: 0 } .a11y-no-anim .proc-thread path { transition: none !important; stroke-dashoffset: 0 } .a11y-no-anim .proc-thread circle { transition: none !important; opacity: 1 } .a11y-no-anim .radar-pulse { animation: none; opacity: 0 } .a11y-no-anim .radar-town { transition: none !important; opacity: 1 } .a11y-no-anim .faq-acc[open] .faq-body { animation: none } /* Navigation: durch den zusätzlichen Menüpunkt „Schmerz-Check" greift das Burger-Menü bereits unter 1000px (statt 768px). (#nav-Präfix nötig: der Inline-Style-Block der Seite lädt später und würde Regeln gleicher Spezifität überschreiben.) */ #nav .nav-links a { white-space: nowrap } @media (max-width: 1000px) { #nav .nav-links { display: none } #nav .ham { display: flex } } /* Lange CTA-Buttons dürfen auf schmalen Screens umbrechen – sonst erzwingt ihr nowrap-Text (z. B. „Kostenloses Beratungsgespräch sichern") in einer 1fr-Grid-Spalte horizontalen Overflow. */ @media (max-width: 480px) { .btn.btn-lg, .btn.btn-xl { white-space: normal; text-align: center } } /* ── MOBIL ── */ @media (max-width: 1100px) { .bento { grid-template-columns: 1fr 1fr } .bento-main { grid-row: auto; grid-column: 1 / 3 } .bento-wide { grid-column: 1 / 3 } } @media (max-width: 640px) { .bento { grid-template-columns: 1fr } .bento-main, .bento-wide { grid-column: auto } .bento-wide { flex-direction: column; align-items: flex-start; gap: 16px } .bento-stat { flex-direction: row; align-items: baseline; gap: 12px; border-right: 0; border-bottom: 1px solid var(--bdr-s); padding: 0 0 12px; width: 100% } } @media (max-width: 900px) { /* Problem-Sektion: gestapelt Text zuerst, Bild danach – sonst stünde das Bild direkt unter dem Hero-Foto */ #problem .split>div:first-child { order: 2 } .bodymap-grid { grid-template-columns: 1fr } .bodymap-figure { max-width: 270px } .bodymap-panel { min-height: 0 } .tissue-bar { flex-direction: column; align-items: stretch } .tissue-progress { justify-content: space-between } .tissue-actions { justify-content: center } }