/* FORMWELTEN · Startseite v2 — ein Haus mit drei Räumen. */
/* Die Seite nimmt die Farben des Raumes an, in dem man gerade steht. */
html[data-room=menschen]{--bg:#E4E7D5;--ink:#3A382F;--soft:#5F5C4F;--line:rgba(58,56,47,.2)}
html[data-room=vierbeiner]{--bg:#FFF3BC;--ink:#233D85;--soft:#364C97;--line:rgba(35,61,133,.22)}
html[data-room=abenteuer]{--bg:#121A15;--ink:#F2E6CC;--soft:#BDB095;--line:rgba(242,230,204,.22)}

/* Ohne JavaScript trägt jeder Raum seine Farben selbst; mit JavaScript übernimmt die Seite den Wechsel. */
.r-m{--bg:#E4E7D5;--ink:#3A382F;--soft:#5F5C4F;--line:rgba(58,56,47,.2)}
.r-v{--bg:#FFF3BC;--ink:#233D85;--soft:#364C97;--line:rgba(35,61,133,.22)}
.r-a{--bg:#121A15;--ink:#F2E6CC;--soft:#BDB095;--line:rgba(242,230,204,.22)}
.room{background:var(--bg);color:var(--ink)}
html.morph .room{--bg:unset;--ink:unset;--soft:unset;--line:unset;background:transparent;color:inherit}

/* Hero */
.hero{padding:clamp(20px,3.6vw,56px) var(--pad) clamp(56px,8vw,120px)}
.hero-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:clamp(32px,4.4vw,64px)}
.hero h1{grid-column:1/9;margin:0;font:600 clamp(46px,5.9vw,98px)/.95 var(--display);letter-spacing:-.045em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .ln>span{display:block}
.hero-head p{grid-column:9/13;margin:0;max-width:34ch;color:var(--soft);font-size:clamp(17px,1.5vw,20px)}

.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,48px);align-items:end;max-width:1320px;margin-inline:auto;
  padding-bottom:22px;border-bottom:1.5px solid var(--line)}
.door{display:flex;flex-direction:column;text-decoration:none;--tone:#ddd}
.arch{position:relative;overflow:hidden;background:var(--tone);border-radius:999px 999px 0 0;aspect-ratio:1/var(--h,1.3);transition:transform .7s var(--ease)}
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.3s var(--ease)}
.door:nth-child(1){--h:1.2;--tone:#DDE0C8}
.door:nth-child(2){--h:1.42;--tone:#F3D46A}
.door:nth-child(3){--h:1.3;--tone:#1C281F}
.door-name{display:block;margin:20px 0 2px;font-size:clamp(21px,2.1vw,30px);line-height:1.15}
.d-m .door-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(25px,2.5vw,36px)}
.d-v .door-name{font-family:'Fraunces',Georgia,serif;font-weight:600}
.d-a .door-name{font-family:'Cinzel Decorative',Georgia,serif;font-size:clamp(17px,1.75vw,24px);line-height:1.3}
.door-sub{display:block;color:var(--soft);font-size:15px}

@media(hover:hover){
  .door:hover .arch,.door:focus-visible .arch{transform:translateY(-12px)}
  .door:hover .arch img,.door:focus-visible .arch img{transform:scale(1.06)}
}

/* Räume */
.room{--gap:clamp(28px,6vw,100px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;
  min-height:min(92svh,820px);padding:clamp(56px,8vw,104px) var(--pad)}
.room-media{grid-column:1/7;position:relative;overflow:hidden;margin:0}
.room-media img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.room-copy{grid-column:8/13;max-width:520px}
.room.flip .room-media{grid-column:7/13;grid-row:1}
.room.flip .room-copy{grid-column:1/6;grid-row:1;justify-self:end}
.room h2{margin:0 0 clamp(18px,2.4vw,30px)}
.room p{margin:0 0 30px;font-size:clamp(17px,1.4vw,19px);max-width:42ch;color:var(--soft)}

/* Menschen: warmes Erinnerungsalbum, weiche Bogenform */
.r-m h2{font:400 clamp(44px,6.4vw,98px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em}
.r-m .room-media{aspect-ratio:4/5;border-radius:999px 999px 28px 28px;background:#d9c8b0}
.r-m .room-media img{object-position:41% 50%}
/* Vierbeiner: freundliches Poster, organische Form */
.r-v h2{font:600 clamp(42px,5.8vw,88px)/1 'Fraunces',Georgia,serif;letter-spacing:-.025em}
.r-v .room-media{aspect-ratio:1/1.06;border-radius:46% 54% 44% 56%/40% 44% 56% 60%;background:#F0A883}
.r-v .enter{padding:14px 26px;background:var(--ink);color:#FFF3BC;border-radius:99px;text-decoration:none;transition:transform .4s var(--ease)}
.r-v .enter:hover,.r-v .enter:focus-visible{transform:translateY(-3px) rotate(-1.5deg);letter-spacing:0}
/* Abenteuer: dunkle Saga, kantige Form */
.r-a h2{font:400 clamp(32px,4.5vw,68px)/1.14 'Cinzel Decorative',Georgia,serif;letter-spacing:.01em;color:#D2AC70}
.r-a .room-media{aspect-ratio:5/4;clip-path:polygon(7% 0,100% 0,100% 90%,93% 100%,0 100%,0 10%);background:#1C281F}
.r-a .room-media img{object-position:34% 50%}
.r-a .enter{color:#D2AC70}

/* Handy: Türen als wischbare Reihe, Räume untereinander */
@media(max-width:860px){
  .hero-head{display:block}
  .hero h1{font-size:clamp(44px,13.4vw,72px)}
  .hero-head p{margin-top:22px}
  .doors{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 22px;scroll-padding-inline:var(--pad);
    scrollbar-width:auto;border-bottom:0;overscroll-behavior-x:contain}

  .door{flex:0 0 min(76vw,340px);scroll-snap-align:start}
  .room{display:block;min-height:0;padding-block:64px}
  .room-media,.room.flip .room-media{width:100%;margin-bottom:34px}
  .room.flip .room-copy{justify-self:auto}
  .room-copy{max-width:none}
}

/* Bewegung: nur transform/opacity/clip-path, nur wenn gewünscht */
@keyframes rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.22)}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}}
@media(prefers-reduced-motion:no-preference){
  .hero h1 .ln>span{animation:line 1.1s var(--ease) both;animation-delay:calc(var(--i) * 110ms + 100ms)}
  .hero-head p{animation:grow 1s var(--ease) both;animation-delay:500ms}
  .door .arch{animation:rise 1.25s var(--ease) both;animation-delay:calc(var(--i) * 150ms + 450ms)}
  .door .arch img{animation:settle 1.9s var(--ease) both;animation-delay:calc(var(--i) * 150ms + 450ms)}
  @supports (animation-timeline:view()){
    .room-media{animation:grow linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    .room-media img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,.draft,.top{transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(forced-colors:active){.arch,.room-media{border:1px solid CanvasText}}