/* One editorial world: a quiet film, photographic chapters, explanatory motion. */
.editorial-label{display:block;font-size:13px;letter-spacing:.07em;margin-bottom:25px}
.skin-film{margin-top:72px;background:#302e29;color:var(--paper)}
.film-sticky{display:grid;grid-template-columns:.9fr 1.1fr;position:relative;min-height:680px;max-width:1800px;margin:auto}
.film-copy{padding:80px var(--gutter);display:flex;flex-direction:column;justify-content:center}
.film-copy>.editorial-label{color:#ddc597}
.film-copy h2{font-size:clamp(38px,4.1vw,66px);line-height:1.13}
.film-copy>p{font-size:16px;line-height:1.7;max-width:34ch;color:#d4d0c8;margin-top:28px}
.film-chapters{list-style:none;padding:0;margin:42px 0 30px;font-size:15px;line-height:1.4}
.film-chapters li{position:relative;padding:14px 0;border-top:1px solid #686257;color:#b9b4ab;transition:color .35s}
.film-chapters li:before{content:'';position:absolute;inset:-1px 0 auto;height:1px;background:#d7b676;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.film-chapters li.active{color:white}.film-chapters li.active:before{transform:scaleX(1)}
.film-chapters li>span{font-size:11px;color:#cdb589;display:inline-block;width:35px}
.film-skip{font-size:14px;display:flex;gap:20px;align-items:center;min-height:44px;width:fit-content;border-bottom:1px solid #aaa397}
.film-skip .icon{width:18px}.film-media{position:relative;overflow:hidden;min-width:0;min-height:680px;background:#655a46}
.film-poster,.film-canvas,.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.film-canvas,.film-video{opacity:0;pointer-events:none}.film-media.is-sequence .film-canvas,.film-media.is-playing .film-video{opacity:1}
.film-bottom{position:absolute;bottom:0;inset-inline:0;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:55px 30px 28px;background:linear-gradient(transparent,rgba(24,21,16,.75));color:#fff}
.film-caption{font-size:13px}.film-toggle{color:white;background:rgba(22,21,18,.45);border:1px solid #b5afa3;backdrop-filter:blur(12px);border-radius:100px;display:flex;gap:9px;align-items:center;padding:9px 14px;min-height:44px;font-size:12px;flex-shrink:0}
.film-toggle .icon{width:15px;height:15px}.film-scroll{font-size:11px;display:flex;gap:18px;align-items:center}.film-scroll>span{font-size:20px}
.film-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:rgba(255,255,255,.15)}
.film-progress>span{display:block;width:100%;height:100%;background:#e7c994;transform:scaleX(var(--progress,0));transform-origin:left}
.skin-film.is-scroll{height:250svh}.is-scroll .film-sticky{position:sticky;top:var(--header);height:calc(100svh - var(--header));min-height:600px;max-height:1100px}.is-scroll .film-media{min-height:0}
.spectrum-layout{display:grid;grid-template-columns:.85fr 2fr;gap:7%;align-items:start}
.spectrum-intro{position:sticky;top:calc(var(--header) + 44px)}
.spectrum-intro h2{font-size:clamp(38px,3.65vw,58px);line-height:1.12}
.spectrum-intro>p{font-size:16px;color:var(--muted);margin-top:25px;line-height:1.65;max-width:34ch}
.chapter-nav{display:flex;flex-direction:column;margin-top:42px}
.chapter-nav a{display:flex;gap:16px;align-items:center;min-height:52px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);transition:color .2s}
.chapter-nav a>span{font-size:11px;color:#777967}.chapter-nav a .icon{margin-left:auto;width:16px;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .3s}
.chapter-nav a[aria-current=true],.chapter-nav a:hover{color:var(--ink)}.chapter-nav a[aria-current=true] .icon,.chapter-nav a:hover .icon{opacity:1;transform:none}
.spectrum-signature{display:block;margin-top:46px;color:var(--muted);font-size:12px}
.care-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 25px;align-items:start}
.care-card{min-width:0;scroll-margin-top:calc(var(--header) + 25px)}
.care-card summary{display:block;outline-offset:6px}.care-photo{display:block;position:relative;aspect-ratio:.92;overflow:hidden;border-radius:10px;background:var(--stone)}
.care-photo>img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s;filter:saturate(.82)}
#angebot-dermatologie .care-photo>img{object-position:53% center}#angebot-lasermedizin .care-photo>img{object-position:60% center}
.care-number{position:absolute;top:18px;left:18px;width:34px;height:34px;background:rgba(245,244,240,.9);color:var(--ink);border-radius:50%;display:grid;place-items:center;font-size:12px}
.care-expand{position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--paper);color:var(--ink);transition:background .3s,transform .4s,color .3s}
.care-expand .icon{width:20px;height:20px;transition:transform .4s var(--ease)}
@media(hover:hover){.care-card summary:hover .care-photo>img{transform:scale(1.035);filter:saturate(1)}.care-card summary:hover .care-expand{background:var(--ink);color:white}}
.care-card[open] .care-expand{background:var(--ink);color:white}.care-card[open] .care-expand .icon{transform:rotate(45deg)}
.care-caption{display:block;padding:23px 0 0}.care-name{display:block;font:450 clamp(21px,1.9vw,29px)/1.2 Manrope,sans-serif;letter-spacing:-.03em}
.care-intro{display:block;color:var(--muted);font-size:14px;line-height:1.5;margin-top:10px}.care-hint{display:block;font-size:12px;margin-top:18px;text-decoration:underline;text-decoration-color:#aaa99e;text-underline-offset:6px;min-height:24px}
.care-open{display:none}.care-card[open] .care-closed{display:none}.care-card[open] .care-open{display:inline}
.care-detail{border-top:1px solid var(--line);margin-top:18px;padding-top:24px;font-size:15px;color:var(--muted);animation:detail-in .35s var(--ease)}
.care-detail h3{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:500;letter-spacing:0;line-height:1.4;color:var(--ink);margin-bottom:12px}
.care-detail ul{padding-left:17px;margin:20px 0;line-height:1.6;font-size:14px}.care-detail li{margin-bottom:6px}.care-detail li::marker{color:#a78442}.care-detail .text-link{color:var(--ink);font-size:14px}
.care-more{grid-column:1/-1;border-top:1px solid var(--line);padding-top:30px}.care-more>h3{font-size:25px;margin-bottom:10px}.care-more .service summary{font-size:20px}.care-more .service-body{font-size:15px}
@keyframes detail-in{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}
.skin-stage{isolation:isolate}.skin-caption{font-size:12px}.skin-label{top:auto!important;bottom:24px;right:auto;left:0;max-width:calc(100% - 60px);font-size:12px}
.compare-labels{display:none;position:absolute;top:60px;left:0;right:0;justify-content:space-around;color:#d8d9cf;font-size:12px;z-index:2}.skin-stage[data-step='1'] .compare-labels{display:flex}
.skin-detail-labels{display:none;position:absolute;inset:25% 0 28%;pointer-events:none;z-index:2;color:#e0cfaa;font-size:12px}.skin-detail-labels span:first-child{position:absolute;left:2%;top:0}.skin-detail-labels span:last-child{position:absolute;right:0;bottom:0}
.skin-detail-labels span:after{content:'';display:block;height:1px;width:60px;background:#a5977b;margin-top:9px}.skin-stage[data-step='2'] .skin-detail-labels{display:block}
.mapping-fallback{position:absolute;inset:55px 0 70px;z-index:-1;display:none}.skin-stage:not(.is-ready)[data-step='1'] .mapping-fallback,.skin-stage:not(.is-ready)[data-step='2'] .mapping-fallback{display:block;z-index:0}
.skin-stage:not(.is-ready):not([data-step='0']) .skin-poster{opacity:0}.fallback-compare{display:none;width:100%;height:100%}.fallback-compare img{width:50%;height:100%;object-fit:contain}.skin-stage[data-step='1'] .fallback-compare{display:flex}
.fallback-detail{display:none;width:70%;aspect-ratio:1.35;position:absolute;left:15%;top:24%;background:radial-gradient(ellipse at 48% 45%,#967650 4%,#c2a781 8%,#bba990 12%,#d7c0a1 55%);transform:perspective(600px) rotateX(35deg) rotateZ(-12deg);border-radius:10px;border-bottom:28px solid #a08062}
.fallback-detail>span{position:absolute;inset:17% 25%;border:1px solid #f1ddba;border-radius:50%}.skin-stage[data-step='2'] .fallback-detail{display:block}
@media(min-width:1100px) and (max-height:800px){.is-scroll .film-copy{padding-block:36px}.is-scroll .film-copy h2{font-size:49px}.is-scroll .film-copy>p{margin-top:20px}.is-scroll .film-chapters{margin-block:26px 20px}.is-scroll .film-sticky{min-height:570px}}
@media(max-width:1100px){.spectrum-layout{grid-template-columns:.9fr 2fr;gap:5%}.care-grid{gap:36px 19px}.spectrum-intro h2{font-size:38px}.spectrum-intro>p{font-size:15px}.chapter-nav a{font-size:12px;gap:10px}.film-copy{padding:45px 30px}.film-copy h2{font-size:44px}.film-copy>p{font-size:15px}.film-chapters{margin-block:25px 18px}.film-scroll{max-width:100px;line-height:1.5}.film-bottom{padding-inline:22px}}
@media(max-width:850px){.skin-film{margin-top:45px}.film-sticky{grid-template-columns:1fr 1fr;min-height:550px}.film-media{min-height:550px}.film-copy h2{font-size:37px}.film-copy{padding-inline:25px}.film-copy .editorial-label{font-size:12px}.film-chapters{font-size:13px}.film-bottom{padding:45px 18px 20px}.film-caption{font-size:11px}.film-toggle>span{display:none}.spectrum-layout{display:block}.spectrum-intro{position:static;margin-bottom:36px}.spectrum-intro h2{font-size:48px}.spectrum-intro>p{max-width:48ch;font-size:16px}.chapter-nav{display:none}.spectrum-signature{display:none}.care-grid{gap:38px 22px}.care-name{font-size:26px}}
@media(max-width:700px){.skin-film{margin-top:30px}.film-sticky{display:flex;flex-direction:column;min-height:0}.film-copy{padding:42px var(--gutter) 30px}.film-copy h2{font-size:39px;line-height:1.1}.film-copy h2 br:last-child{display:none}.film-copy>p{font-size:15px;max-width:39ch;margin-top:23px}.film-chapters{display:none}.film-skip{margin-top:20px;font-size:13px}.film-media{min-height:0;width:100%;aspect-ratio:1.12}.film-bottom{padding:42px var(--gutter) 20px}.film-caption{font-size:12px}.film-toggle>span{display:inline;font-size:11px}.film-toggle{padding:8px 11px}.editorial-label{margin-bottom:20px}.spectrum-intro h2{font-size:42px}.spectrum-intro>p{font-size:16px}.care-grid{grid-template-columns:1fr;gap:35px}.care-photo{aspect-ratio:1.16}.care-name{font-size:28px}.care-caption{padding-top:19px}.care-intro{font-size:15px}.care-hint{font-size:13px;margin-top:13px}.care-detail{font-size:16px}.care-detail ul{font-size:15px}.care-detail .text-link{font-size:15px}.care-more{margin-top:3px}.care-more .service summary{font-size:20px}.care-more .service-body ul{font-size:14px}.skin-label{font-size:11px;bottom:16px;padding:8px 10px}.skin-caption{font-size:11px;top:0}.compare-labels{top:36px;font-size:11px}.skin-detail-labels{font-size:11px;inset:22% 0 27%}.skin-stage{height:410px;min-height:410px}.care-number{top:15px;left:15px}.care-expand{right:15px;bottom:15px}}
@media(prefers-reduced-motion:reduce){.skin-film.is-scroll{height:auto}.is-scroll .film-sticky{position:relative;top:auto;height:auto}.film-canvas{display:none}.film-scroll{display:none!important}.care-photo>img{transform:none!important}}
