/* V3 mobile layer — loaded last. Phones get their own layout instead of a squeezed desktop. */
/* ---------- Territory guide (all sizes): no text, a small round arrow with a soft pulse ---------- */
.concept-meta .tab-hint{display:none!important}
.concept-meta .meta-right{flex-direction:row!important;align-items:center!important;gap:18px!important}
.tab-next{
all:unset;cursor:pointer;flex:0 0 auto;position:relative;width:38px;height:38px;border-radius:50%;
display:grid;place-items:center;color:var(--c-fg);border:1px solid color-mix(in srgb,var(--c-fg) 35%,transparent);
font-size:15px;transition:background .3s,color .3s,border-color .3s;
}
.tab-next:hover{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg)}
.tab-next:focus-visible{outline:1px solid var(--c-fg);outline-offset:3px}
.tab-next span{display:inline-block;animation:tnNudge 1.9s cubic-bezier(.16,1,.3,1) infinite}
.tab-next::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--c-fg);opacity:0;animation:tnRing 2.4s ease-out infinite}
.meta-right.explored .tab-next::after,.meta-right.explored .tab-next span{animation:none}
@keyframes tnNudge{0%,100%{transform:translateX(-1px)}45%{transform:translateX(3px)}}
@keyframes tnRing{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.55);opacity:0}}
@media(prefers-reduced-motion:reduce){.tab-next span,.tab-next::after{animation:none!important}}
/* "Richtung merken" sits on the Brand Cues / Digital line, right side */
.app-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:48px 0 22px}
.app-row .application-tabs{margin:0!important}
.app-row .favorite-btn{margin:0!important;flex:0 0 auto}
/* ---------- Phones ---------- */
@media(max-width:760px){
:root{--mx:20px}
.section-inner{padding:72px 20px!important}
.eyebrow{font-size:11px!important;letter-spacing:.14em!important;margin-bottom:16px!important}
.display,.why #whyTitleDisplay,.why .why-copy .display{font-size:clamp(34px,9.6vw,46px)!important;line-height:1.02!important;letter-spacing:-.04em!important;max-width:none!important;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.lead,.hero-body{font-size:16.5px!important;line-height:1.55!important;max-width:none!important}
/* Hero: text first, image as its own card below */
.hero{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-height:0!important;padding:104px 20px 56px!important}
.hero h1{font-size:clamp(44px,12.4vw,56px)!important;line-height:.96!important}
.hero-body{margin:26px 0 22px!important}
.hero-stage,.hero-stage-image{position:relative!important;inset:auto!important;order:2;width:100%!important;height:auto!important;aspect-ratio:4/5;min-height:0!important;opacity:1!important;margin-top:40px!important;transform:none!important;border-radius:18px!important}
.hero-logo-overlay{width:96px!important;left:18px!important;bottom:16px!important}
.hero-note{display:none!important}
/* Strengths: compact two-column chips */
.strengths-intro{padding-bottom:28px!important}
.word-rail{grid-template-columns:1fr 1fr!important;gap:10px!important;padding:8px 20px 36px!important}
.word-rail span,.word-rail span:nth-child(2n){min-height:62px!important;padding:12px 14px!important;border-radius:14px!important}
.word-rail span strong{font-size:18px!important}
.pivot{padding:44px 20px 72px!important}
.pivot p{font-size:28px!important;line-height:1.08!important}
/* Why now */
.why.section-brown{padding:72px 20px 56px!important;gap:28px!important}
.why .why-copy .lead{margin:22px 0!important}
.why .rennweg-stage{min-height:400px!important;border-radius:18px!important}
.why .why-image-shell{left:8%!important;right:8%!important;bottom:44px!important}
/* Moments: full-width cards, text with room */
.moments-head{padding-bottom:36px!important}
.moments-editorial{gap:28px!important}
.moments-editorial .moment-card:nth-child(n){width:auto!important;margin:0 16px!important}
.moments-editorial .moment-media{height:auto!important;min-height:0!important;aspect-ratio:4/5;border-radius:18px!important}
.moment-caption-overlay h3{left:20px!important;right:20px!important;top:22px!important;max-width:none!important;font-size:28px!important;line-height:1.02!important}
.moment-caption-overlay p{left:20px!important;right:20px!important;bottom:20px!important;max-width:none!important;font-size:15px!important;line-height:1.45!important}
.moment-caption-overlay>span{display:none!important}
/* Opportunities: no empty space */
.opportunities .section-inner{padding:64px 20px!important}
.opportunity-grid{margin-top:24px!important}
.opportunity-card{min-height:0!important;padding:26px 20px 30px!important}
.opportunity-card h3{margin:22px 0 10px!important;font-size:28px!important;line-height:1.04!important}
.opportunity-card p{font-size:15px!important}
/* Enough said */
.transition-section{min-height:0!important;padding:72px 20px!important;gap:36px!important}
.transition-product img{width:72vw!important}
/* Explorer */
.explorer-head{padding:64px 20px 26px!important}
.explorer-title{font-size:clamp(34px,9.6vw,46px)!important}
.concept-canvas{width:calc(100% - 24px)!important;padding:28px 16px 24px!important;border-radius:20px!important}
.concept-meta{flex-direction:column!important;align-items:flex-start!important;gap:20px!important}
.concept-meta h3{font-size:40px!important}
.concept-meta .meta-right{width:100%;justify-content:space-between}
.concept-meta .concept-tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;gap:20px!important;-webkit-mask:linear-gradient(90deg,#000 80%,transparent);mask:linear-gradient(90deg,#000 80%,transparent);padding-right:24px}
.concept-meta .concept-tabs::-webkit-scrollbar{display:none}
.concept-meta .concept-tab{white-space:nowrap;font-size:14px!important}
.app-row{flex-direction:column-reverse;align-items:flex-start;margin:20px 0 16px}
.app-row .application-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}
.app-row .application-tabs::-webkit-scrollbar{display:none}
.web-shop-row{grid-template-columns:1fr 1fr!important}
/* Seasons, studio, work, contact */
.season-sticky{min-height:0!important;padding:88px 20px 40px!important}
.season-state{margin-top:48px!important}
.season-scenes{padding:32px 16px 56px!important;gap:28px!important}
.season-scene{height:auto!important;min-height:0!important;aspect-ratio:4/5}
.studio .section-inner.compact{padding-bottom:72px!important}
.capability-row{padding:24px 0!important}
.work{padding:72px 0 80px!important}
.work-head{padding-bottom:36px!important}
.case-grid{padding:0 16px!important;gap:16px!important}
.selections .section-inner{min-height:0!important}
.cta{min-height:0!important;padding:96px 20px 28px!important}
.contact-details{gap:8px!important}
}
@media(max-width:760px){.studio-intro{padding-bottom:28px!important}.studio .section-inner.compact{padding-top:0!important}}
/* Feedback 12.10: pulse ring around the options instead of the arrow; "Save direction" same size as the app tabs */
.tab-next{display:none!important}
.concept-meta .concept-tabs{position:relative;padding:8px 20px!important;border-radius:999px;border:1px solid color-mix(in srgb,var(--c-fg) 22%,transparent)}
.concept-meta .concept-tabs::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--c-fg);opacity:0;pointer-events:none;animation:tabsRing 2.6s ease-out infinite}
.concept-meta .meta-right.explored .concept-tabs::after{animation:none}
@keyframes tabsRing{0%{transform:scale(1);opacity:.5}75%,100%{transform:scale(1.08,1.45);opacity:0}}
@media(prefers-reduced-motion:reduce){.concept-meta .concept-tabs::after{animation:none}}
.app-row .favorite-btn{font-size:12px!important;line-height:1!important;padding:11px 16px!important;border-radius:999px!important;gap:7px!important;opacity:.82}
@media(max-width:760px){.concept-meta .concept-tabs{padding:8px 16px!important}.concept-meta .concept-tabs::after{animation-name:tabsRingM}@keyframes tabsRingM{0%{transform:scale(1);opacity:.5}75%,100%{transform:scale(1.03,1.3);opacity:0}}}
/* Feedback 12.10 (2): no ring around the options */
.concept-meta .concept-tabs{border:0!important;padding:0!important;border-radius:0!important}
.concept-meta .concept-tabs::after{content:none!important;animation:none!important}
@media(max-width:760px){.concept-meta .concept-tabs{padding:0 24px 0 0!important}}
/* Guide 12.10: soft pulsing highlight only around the not-selected options */
.concept-meta .concept-tab{position:relative;padding:8px 14px!important;border-radius:999px!important}
.concept-meta .concept-tab.active{border-radius:0!important}
.concept-meta .concept-tab:not(.active)::after{
content:""!important;display:block!important;position:absolute;inset:0;border-radius:999px;pointer-events:none;
border:1px solid color-mix(in srgb,var(--c-fg) 45%,transparent);box-shadow:0 0 0 0 color-mix(in srgb,var(--c-fg) 22%,transparent);
opacity:.35;transform:none!important;animation:optGlow 2.8s ease-in-out infinite}
.concept-meta .concept-tab:nth-child(2):not(.active)::after{animation-delay:.45s}
.concept-meta .concept-tab:nth-child(3):not(.active)::after{animation-delay:.9s}
.concept-meta .concept-tab:not(.active):hover::after{opacity:1;animation:none}
@keyframes optGlow{0%,100%{opacity:.25;box-shadow:0 0 0 0 color-mix(in srgb,var(--c-fg) 0%,transparent)}45%{opacity:.9;box-shadow:0 0 0 5px color-mix(in srgb,var(--c-fg) 10%,transparent)}}
@media(prefers-reduced-motion:reduce){.concept-meta .concept-tab:not(.active)::after{animation:none;opacity:.5}}
@media(max-width:760px){.concept-meta .concept-tabs{gap:8px!important;padding:6px 24px 6px 4px!important}.concept-meta .concept-tab{padding:7px 12px!important}}
/* Options aligned with the direction name, guide text + arrow in the space between */
@media(min-width:761px){
.concept-meta{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;column-gap:28px!important}
.concept-meta .meta-right{align-self:center!important;margin-top:6px}
.dir-hint{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0;margin-top:6px;color:var(--c-fg);opacity:.55}
.dh-text{font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.dh-line{position:relative;flex:0 1 110px;height:1px;background:color-mix(in srgb,var(--c-fg) 45%,transparent);overflow:visible}
.dh-line::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.dh-line i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--c-fg),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:dhRun 2.4s ease-in-out infinite}
.meta-right.explored ~ .dir-hint,.concept-meta:has(.meta-right.explored) .dir-hint{opacity:.3}
.app-row{margin-top:30px!important}
}
@keyframes dhRun{0%{background-position:-60% 0}100%{background-position:160% 0}}
@media(max-width:1180px){.dir-hint .dh-text{display:none}}
@media(max-width:760px){.dir-hint{display:none!important}}
@media(prefers-reduced-motion:reduce){.dh-line i{animation:none}}
@media(min-width:761px){.dh-line{flex:0 0 46px!important}.dir-hint{gap:12px!important}.concept-meta{column-gap:36px!important}}
@media(max-width:1300px){.dir-hint .dh-text{display:none}}
/* Feedback 12.10 (3): guide text + arrow removed */
.dir-hint{display:none!important}
/* Options back on the right, level with the title */
@media(min-width:761px){.concept-meta .meta-right{grid-column:3!important;justify-self:end!important}}
/* ---------- Top bar auto-hide ---------- */
.topbar{transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease!important}
.topbar.tb-hidden{transform:translateY(-110%)!important;opacity:0}
/* ---------- Mobile, compact pass ---------- */
@media(max-width:760px){
.section-inner{padding:52px 20px!important}
.hero{padding:88px 20px 40px!important}
.hero-stage,.hero-stage-image{aspect-ratio:4/3!important;margin-top:28px!important}
.strengths-intro{padding-bottom:20px!important}
.word-rail{padding:4px 20px 24px!important;gap:8px!important}
.word-rail span,.word-rail span:nth-child(2n){min-height:50px!important;padding:10px 12px!important}
.word-rail span strong{font-size:16px!important}
.pivot{padding:28px 20px 52px!important}
.pivot p{font-size:24px!important}
.why.section-brown{padding:52px 20px 40px!important;gap:20px!important}
.why .rennweg-stage{min-height:300px!important}
.why .why-image-shell{bottom:36px!important;left:14%!important;right:14%!important}
.moments-head{padding-bottom:24px!important}
.moments-editorial{gap:16px!important}
.moments-editorial .moment-media{aspect-ratio:1/1!important}
.moment-caption-overlay h3{font-size:24px!important}
.moment-caption-overlay p{font-size:14px!important}
.opportunities .section-inner{padding:48px 20px!important}
.opportunity-card{padding:20px 4px 22px!important}
.opportunity-card h3{margin:12px 0 8px!important;font-size:24px!important}
.transition-section{padding:52px 20px!important;gap:20px!important}
.transition-product img{width:52vw!important}
/* Explorer: tighter, heart as a single icon top-right */
.explorer-head{padding:48px 20px 20px!important}
.explorer{padding-bottom:48px!important}
.concept-canvas{position:relative!important;padding:22px 14px 18px!important}
.concept-meta{gap:14px!important}
.concept-meta h3{font-size:34px!important;padding-right:52px}
.concept-meta p:not(.concept-count){font-size:14px!important;margin-top:8px!important}
.app-row{margin:16px 0 12px!important}
.app-row .favorite-btn{position:absolute!important;top:18px;right:14px;width:40px;height:40px;padding:0!important;justify-content:center!important;border-radius:50%!important;font-size:0!important;gap:0!important;opacity:1}
.app-row .favorite-btn .heart{font-size:17px!important;line-height:1}
.app-row .favorite-btn #favoriteLabel{display:none!important}
.application-tab{padding:9px 13px!important;font-size:12px!important}
/* Brand cues */
.brand-cues-copy{padding:22px 18px!important}
.brand-cues-copy .brandworld-logo{width:72px!important;margin:16px 0 22px!important}
.brand-cues-copy h4{font-size:32px!important;margin-bottom:12px!important}
.brand-cues-copy p{font-size:14px!important}
.brand-cues-copy small{margin-top:16px!important}
.brand-cues-visual{min-height:0!important;aspect-ratio:4/3}
.brand-cues-type{padding:16px 18px!important}
.brand-cues-palette{min-height:0!important;padding:14px 18px!important}
/* Digital: compact website mock */
.web-experience{min-height:0!important}
.web-topline{height:54px!important;padding:0 14px!important}
.web-topline>img{width:58px!important}
.web-actions-v3 .web-bag{padding:6px 10px!important}
.web-hero-experience{display:grid!important;grid-template-columns:1fr!important;min-height:0!important}
.web-copy-panel{min-height:0!important;padding:22px 18px 20px!important}
.web-copy-panel h4{font-size:30px!important;margin:12px 0 10px!important}
.web-copy-panel p{font-size:14px!important}
.web-copy-panel button{margin-top:14px!important;padding:10px 14px!important}
.web-visual-panel{min-height:0!important;aspect-ratio:16/10}
.web-editorial-strip{grid-template-columns:repeat(3,1fr)!important}
.web-editorial-strip article{min-height:0!important;padding:12px 10px!important;grid-template-columns:1fr!important;border-bottom:0!important;border-right:1px solid color-mix(in srgb,var(--c-fg) 10%,transparent)!important}
.web-editorial-strip article:last-child{border-right:0!important}
.web-editorial-strip span{display:none!important}
.web-editorial-strip b{font-size:13px!important}
.web-editorial-strip small{font-size:10px!important}
.web-shop{padding:16px 14px 18px!important}
.web-shop-head{margin-bottom:12px!important}
.web-shop-row{display:flex!important;overflow-x:auto;gap:10px!important;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.web-shop-row::-webkit-scrollbar{display:none}
.web-product{flex:0 0 40%;scroll-snap-align:start;gap:6px!important}
.web-product b{font-size:12px!important}
.web-add{font-size:10px!important}
/* Social */
.social-concept{padding:12px 0 8px!important;gap:20px!important;min-height:0!important}
.phone-shell,.concept-phone{width:min(270px,78vw)!important;max-width:none!important}
.social-copy{padding:0 4px!important}
.social-copy h4{font-size:30px!important;margin:10px 0!important}
.social-copy p{font-size:14px!important}
/* Communication */
.communication-main{min-height:420px!important;padding:22px 18px!important}
.communication-word{font-size:36px!important;margin-top:40px!important}
.communication-copy h4{font-size:24px!important}
.communication-copy p{font-size:13px!important}
.palette-row{margin-top:12px!important}
/* Seasons, studio, work, selections, contact */
.season-sticky{padding:64px 20px 28px!important}
.season-copy-v4 .lead{margin-top:16px!important}
.season-state{margin-top:28px!important}
.season-scenes{padding:20px 16px 40px!important;gap:16px!important}
.season-scene{aspect-ratio:1/1!important}
.studio-intro{padding-bottom:16px!important}
.capability-row{padding:16px 0!important}
.work{padding:52px 0 56px!important}
.work-head{padding-bottom:24px!important}
.case-grid{gap:12px!important}
.case-card div{padding:14px 16px 16px!important}
.selection-box{margin-top:24px!important;padding:16px 0!important;min-height:0!important}
.cta{padding:72px 20px 24px!important}
.cta .lead{margin-top:20px!important}
.contact-details{margin-top:24px!important}
.cta footer{padding-top:36px!important}
}
/* Moments back to tall portrait cards on mobile */
@media(max-width:760px){.moments-editorial .moment-media{aspect-ratio:4/5!important}.moment-caption-overlay h3{font-size:28px!important}.moment-caption-overlay p{font-size:15px!important}}
/* Digital mock is look & feel only: nothing inside reacts to clicks or hover */
.web-experience a,.web-experience button,.web-experience article,.web-experience .web-nav,.web-experience .web-product{pointer-events:none!important;cursor:default!important}
.web-experience .web-shop-row{pointer-events:auto!important}
.web-nav a::after{transition:none!important}
/* ---------- Performance & smoothness ---------- */
.case-card video,.moment-media,.season-photo,.hero-stage{backface-visibility:hidden}
.scene-index{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(9,9,9,.38)!important}
@media(max-width:900px){
/* blend modes on fixed bars force a repaint of the whole page on every scroll frame on phones */
.topbar{mix-blend-mode:normal!important;color:#fff!important;background:linear-gradient(180deg,rgba(20,15,12,.82),rgba(20,15,12,0))!important;padding-bottom:10px}
.topbar .lang{border-color:rgba(255,255,255,.5)!important;color:#fff!important}
.topbar .lang.active{background:#fff!important;color:#111!important}
/* lighter motion on phones: no clip-path animation on big images, no layer promotion everywhere */
.unveil{clip-path:none!important;transition:none!important}
.unveil img,.unveil video{scale:1!important;transition:none!important}
.hero-copy,.hero-stage,.why-copy,.rennweg-stage,.transition-product,.season-copy,.work-head,.moment-media,.parallax-media,.season-photo,.case-card video{will-change:auto!important}
.moment-media,.moments-editorial .moment-media>img.parallax-media,.season-photo-stage .season-photo{transform:none!important}
.motion-ready .reveal{transform:translate3d(0,24px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)!important}
.motion-ready .reveal.visible{transform:none}
}
/* Why now on mobile: no extra brown band above the title */
@media(max-width:760px){
.why.section-brown{padding-top:44px!important}
.why .why-copy{padding:0!important;margin:0!important;top:auto!important}
.why.section-brown::before{display:none!important}
}
/* Softer, rounder heart (replaces the spiky text glyph) */
.favorite-btn .heart{font-size:0!important;display:inline-block;width:15px;height:15px;flex:0 0 15px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.favorite-btn.active .heart{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");transform:scale(1.12)}
.favorite-btn:hover .heart{transform:scale(1.08)}
@media(max-width:760px){.app-row .favorite-btn .heart{width:18px!important;height:18px!important;flex-basis:18px}}
/* Mobile: direction options under the intro text, box only holds Brand Cues / Digital / Social / Communication */
@media(max-width:760px){
.m-tabs{--c-fg:#241d18;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px!important;margin:18px -20px 0 -4px!important;padding:6px 32px 6px 4px!important;max-width:none!important;
overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 82%,transparent);mask:linear-gradient(90deg,#000 82%,transparent)}
.m-tabs::-webkit-scrollbar{display:none}
.m-tabs .concept-tab{position:relative;width:auto!important;display:inline-flex!important;align-items:center;gap:8px!important;flex:0 0 auto;white-space:nowrap;
padding:8px 13px!important;border:0!important;border-bottom:1px solid transparent!important;border-radius:999px!important;background:transparent!important;
font-size:14px!important;color:var(--c-fg)!important;opacity:.55;transform:none!important}
.m-tabs .concept-tab:before{font-size:10px;color:var(--c-fg)!important;opacity:.6}
.m-tabs .concept-tab.active{opacity:1;border-radius:0!important;border-bottom-color:var(--c-fg)!important}
.m-tabs .concept-tab:not(.active)::after{content:""!important;display:block!important;position:absolute;inset:0;border-radius:999px;pointer-events:none;
border:1px solid color-mix(in srgb,var(--c-fg) 40%,transparent);opacity:.35;transform:none!important;animation:optGlow 2.8s ease-in-out infinite}
.m-tabs .concept-tab:nth-child(3):not(.active)::after{animation-delay:.6s}
.m-tabs .concept-tab.active::after{display:none!important}
.concept-meta .meta-right{display:none!important}
.concept-meta h3{padding-right:52px}
}
@media(max-width:760px){.explorer-head,.explorer-head>*{min-width:0!important;max-width:100%!important}.explorer-intro-block{overflow:hidden}.m-tabs{margin:18px 0 0 -4px!important;max-width:calc(100% + 24px)!important;width:calc(100% + 24px)}}