/* FORMWELTEN · Weltseiten v2. Jede Welt trägt ihre Farben, Form und Schrift. */
html.w-m{--bg:#E4E7D5;--ink:#3A382F;--soft:#5F5C4F;--line:rgba(58,56,47,.22);--acc:#8A4F40;--tone:#DDE0C8}
html.w-v{--bg:#FFF3BC;--ink:#233D85;--soft:#364C97;--line:rgba(35,61,133,.24);--acc:#E78368;--tone:#F3D46A}
html.w-a{--bg:#121A15;--ink:#F2E6CC;--soft:#BDB095;--line:rgba(242,230,204,.24);--acc:#D2AC70;--tone:#1C281F}
.w-a .btn,.w-a .shop-link{background:var(--acc);color:#121A15}
.w-a .enter{color:var(--acc)}

/* Hero (Menschen, Vierbeiner) */
.w-hero{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;min-height:min(86svh,820px);padding:clamp(24px,5vw,64px) var(--pad) clamp(64px,8vw,104px)}
.w-hero .copy{grid-column:1/7;max-width:560px}
.w-hero .visual{grid-column:8/13;position:relative;isolation:isolate;--e:min(14px,2.4vw)}
.tagline{margin:0 0 20px;color:var(--soft)}
.w-hero h1{margin:0 0 clamp(18px,2.4vw,28px)}
.w-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.w-hero h1 .ln>span{display:block}
.w-hero .lead{margin:0;max-width:44ch;font-size:clamp(17px,1.5vw,20px);color:var(--soft)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}

.w-m h1{font:400 clamp(48px,7vw,108px)/.98 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em}
.w-v h1{font:600 clamp(44px,6.4vw,96px)/1 'Fraunces',Georgia,serif;letter-spacing:-.025em}
.w-a h1{font:400 clamp(36px,6vw,92px)/1.08 'Cinzel Decorative',Georgia,serif;color:var(--acc)}

.m-arch{position:relative;aspect-ratio:4/5.3;border-radius:999px 999px 0 0;overflow:hidden;background:var(--tone)}
.m-arch img,.v-blob img{width:100%;height:100%;object-fit:cover}
.echo{position:absolute;left:calc(var(--e) * -1);right:calc(var(--e) * -1);top:calc(var(--e) * -1);bottom:0;border:1.5px solid var(--line);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}
.echo.e2{--e:calc(min(14px,2.4vw) * 2)}
.v-blob{aspect-ratio:1/1.12;border-radius:46% 54% 44% 56%/40% 44% 56% 60%;overflow:hidden;background:#F0A883}
.sh{position:absolute;z-index:-1}
.sh1{width:46%;aspect-ratio:1;background:#E78368;border-radius:50%;left:-6%;bottom:-6%}
.sh2{width:34%;aspect-ratio:1;background:#C0DCE8;border-radius:40% 60% 50% 50%;right:-4%;top:-5%}
.sh3{width:16%;aspect-ratio:1;background:#E7C4D3;border-radius:50%;right:6%;bottom:-4%}

/* Hero Abenteuer: Bild über die ganze Breite */
.w-a .w-hero{display:flex;flex-direction:column;justify-content:flex-end;position:relative;isolation:isolate;min-height:min(calc(100svh - 112px),840px);padding:0}
.a-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.a-bg img{width:100%;height:100%;object-fit:cover;object-position:78% 40%}
.a-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,26,21,.72),rgba(18,26,21,0) 62%),linear-gradient(180deg,rgba(18,26,21,.35),rgba(18,26,21,0) 30%,rgba(18,26,21,.5) 68%,var(--bg))}
.w-a .copy{grid-column:auto;max-width:760px;padding:clamp(120px,22vh,240px) var(--pad) clamp(40px,7vw,88px)}
.w-a .lead,.w-a .tagline{color:#EFE4CB}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor}

/* Idee */
.w-idea{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding:clamp(48px,7vw,100px) var(--pad)}
.w-idea .frame{grid-column:1/7;position:relative;overflow:hidden;margin:0}
.w-idea .frame img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.w-idea .text{grid-column:8/13;max-width:500px}
.w-idea h2,.w-need h2,.w-steps h2{margin:0 0 clamp(16px,2vw,26px)}
.w-idea p{margin:0;font-size:clamp(17px,1.4vw,19px);color:var(--soft);max-width:42ch}
.w-m .w-idea .frame{aspect-ratio:4/5;border-radius:999px 999px 28px 28px}
.w-m .w-idea .frame img{object-position:41% 50%}
.w-v .w-idea .frame{aspect-ratio:1/1.06;border-radius:46% 54% 44% 56%/40% 44% 56% 60%;background:#F0A883}
.w-a .w-idea .frame{aspect-ratio:5/4;clip-path:polygon(7% 0,100% 0,100% 90%,93% 100%,0 100%,0 10%);background:#1C281F}
.w-a .w-idea .frame img{object-position:34% 50%}
.w-m .w-idea h2,.w-m .w-need h2,.w-m .w-steps h2{font:400 clamp(38px,5vw,72px)/1.02 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em}
.w-v .w-idea h2,.w-v .w-need h2,.w-v .w-steps h2{font:600 clamp(34px,4.6vw,66px)/1.04 'Fraunces',Georgia,serif;letter-spacing:-.02em}
.w-a .w-idea h2,.w-a .w-need h2,.w-a .w-steps h2{font:400 clamp(28px,3.6vw,52px)/1.18 'Cinzel Decorative',Georgia,serif;color:var(--acc)}

/* Was wir brauchen / worauf wir achten */
.w-need{padding:clamp(48px,7vw,100px) var(--pad)}
.w-need .intro{max-width:46ch;color:var(--soft);margin:0}
.occ{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,5vw,72px)}
.occ li{padding:18px 0 20px;border-top:1px solid var(--line);font:italic 400 clamp(26px,3vw,42px)/1.1 'Cormorant Garamond',Georgia,serif;transition:padding-left .5s var(--ease),color .4s}
.traits,.sources{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.traits h3{margin:0 0 8px;font:600 clamp(24px,2.4vw,32px)/1.1 'Fraunces',Georgia,serif}
.traits h3::before{content:'';display:block;width:30px;height:30px;margin-bottom:16px;border-radius:50%;background:#E78368}
.traits li:nth-child(2) h3::before{background:#C0DCE8;border-radius:40% 60% 50% 50%}
.traits li:nth-child(3) h3::before{background:#E7C4D3;border-radius:50% 40% 60% 50%}
.traits p,.sources p{margin:0;color:var(--soft);max-width:34ch}
.sources li{padding-top:22px;border-top:1.5px solid var(--acc)}
.sources h3{margin:0 0 10px;font:400 clamp(20px,2vw,26px)/1.2 'Cinzel Decorative',Georgia,serif;color:var(--acc)}
.oath{margin:clamp(28px,4vw,48px) 0 0;max-width:62ch;padding-left:20px;border-left:3px solid var(--acc);color:var(--soft);font-size:16px}
@media(hover:hover){.occ li:hover{padding-left:14px;color:var(--acc)}}

/* Ablauf: wirklich eine Reihenfolge, daher nummeriert */
.w-steps{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:36px;padding:clamp(56px,8vw,120px) var(--pad);border-top:1px solid var(--line)}
.w-steps .head{grid-column:1/6;align-self:start;position:sticky;top:110px}
.w-steps .head p{margin:0;color:var(--soft);max-width:34ch}
.steps{grid-column:7/13;list-style:none;margin:0;padding:0;position:relative;counter-reset:s}
.steps::before,.steps::after{content:'';position:absolute;left:23px;top:24px;bottom:56px;width:2px}
.steps::before{background:var(--line)}
.steps::after{background:var(--acc);transform-origin:top}
.w-m .steps::after{background:var(--ink)}
.steps li{position:relative;padding:0 0 clamp(36px,5vw,64px) 80px}
.steps li:last-child{padding-bottom:0}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;z-index:1;width:48px;height:48px;display:grid;place-items:center;font:600 18px/1 var(--sans);background:var(--bg);border:2px solid var(--ink);border-radius:50%}
.w-v .steps li::before{background:var(--ink);color:#FFF3BC;border-color:var(--ink);border-radius:46% 54% 50% 50%/50% 46% 54% 50%}
.w-a .steps li::before{background:var(--acc);color:#121A15;border:0;font-family:'Cinzel Decorative',Georgia,serif;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.steps h3{margin:6px 0 8px;font:500 clamp(22px,2.2vw,30px)/1.2 var(--display);letter-spacing:-.01em}
.w-m .steps h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(26px,2.6vw,36px)}
.w-v .steps h3{font-family:'Fraunces',Georgia,serif;font-weight:600}
.w-a .steps h3{font-family:'Cinzel Decorative',Georgia,serif;font-weight:400;font-size:clamp(18px,1.8vw,24px);color:var(--acc)}
.steps p{margin:0;color:var(--soft);max-width:44ch}

/* Weitere Welten */
.w-more{padding:clamp(56px,8vw,100px) var(--pad);border-top:1px solid var(--line)}
.w-more h2{margin:0 0 clamp(28px,4vw,44px);font:600 clamp(28px,3.4vw,46px)/1.05 var(--display);letter-spacing:-.03em}
.more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px)}
.more a{display:flex;align-items:flex-end;gap:clamp(16px,2.4vw,28px);text-decoration:none}
.more .mini{flex:0 0 clamp(96px,14vw,170px);aspect-ratio:1/1.25;border-radius:999px 999px 0 0;overflow:hidden;background:var(--t)}
.more .mini img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.more b{display:block;font-size:clamp(21px,2.3vw,32px);line-height:1.15;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--ease);width:fit-content}
.more small{display:block;margin-top:6px;color:var(--soft);font-size:15px}
@media(hover:hover){.more a:hover img{transform:scale(1.07)}.more a:hover b,.more a:focus-visible b{background-size:100% 1.5px}}

/* Handy */
@media(max-width:860px){
  .w-hero{display:block;min-height:0;padding-top:20px}
  .w-hero .copy{max-width:none}
  .w-hero .visual{margin-top:44px}
  .w-m h1{font-size:clamp(42px,12vw,70px)}
  .w-v h1{font-size:clamp(42px,12.6vw,66px)}
  .w-a h1{font-size:clamp(32px,9.4vw,52px)}
  .w-a .w-hero{min-height:min(calc(100svh - 120px),720px)}
  .w-a .copy{padding-top:200px}
  .a-bg::after{background:linear-gradient(180deg,rgba(18,26,21,.3),rgba(18,26,21,0) 24%,rgba(18,26,21,.78) 50%,var(--bg))}
  .w-idea{display:block;padding-block:56px}
  .w-idea .frame{width:100%;margin-bottom:32px}
  .w-idea .text{max-width:none}
  .occ,.traits,.sources{grid-template-columns:1fr}
  .occ{gap:0}
  .traits,.sources{gap:32px}
  .w-steps{display:block}
  .w-steps .head{position:static;margin-bottom:40px}
  .steps li{padding-left:68px}
  .more{grid-template-columns:1fr;gap:28px}
}

/* Bewegung: nur transform/opacity/clip-path */
@keyframes rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.2)}to{transform:scale(1.001)}}
@keyframes line{from{transform:translateY(105%)}to{transform:none}}
@keyframes drift{from{transform:translateY(-5%)}to{transform:translateY(5%)}}
@keyframes grow{from{transform:scale(.86);opacity:.2}to{transform:none;opacity:1}}
@keyframes fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes float{from{transform:translateY(8%) rotate(-6deg)}to{transform:translateY(-8%) rotate(6deg)}}
@media(prefers-reduced-motion:no-preference){
  .w-hero h1 .ln>span{animation:line 1.1s var(--ease) both;animation-delay:calc(var(--i) * 110ms + 100ms)}
  .w-hero .tagline,.w-hero .lead,.w-hero .actions{animation:grow 1s var(--ease) both;animation-delay:520ms}
  .w-hero .visual .m-arch,.w-hero .visual .v-blob{animation:rise 1.25s var(--ease) both;animation-delay:300ms}
  .w-hero .visual img{animation:settle 1.9s var(--ease) both;animation-delay:300ms}
  .echo{animation:grow 1.4s var(--ease) both;animation-delay:900ms}
  .a-bg img{animation:settle 2.4s var(--ease) both}
  @supports (animation-timeline:view()){
    .w-idea .frame{animation:grow linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    .w-idea .frame img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .steps::after{animation:fill linear both;animation-timeline:view();animation-range:cover 18% cover 62%}
    .sh{animation:float linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .a-bg img{animation:settle 2.4s var(--ease) both,drift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100svh}
  }
}
@media(forced-colors:active){.m-arch,.v-blob,.frame{border:1px solid CanvasText}}