/* handmadewalls Saison — helle Papierwelt, Hintergrund nach Jahreszeit, Blüten-Übergang zwischen den Seiten */
:root{
  --papier:#FBF1DD; --salbei:#CFE0D2; --rose:#F4D9D6; --flieder:#E3DDF0; --pfirsich:#F6D2B8;
  --nuss:#8C5A4E; --tinte:#5B4A44; --linie:#E3D2C6; --weiss:#FFFDF8;
  --display:'Young Serif', Georgia, 'Times New Roman', serif;
  --text:'Nunito', 'Segoe UI', system-ui, sans-serif;
  --hand:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --sbg:#FBF1DD;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--sbg);transition:background-color 1.2s ease}
body.hws{margin:0;background:transparent;color:var(--tinte);font-family:var(--text);font-size:16px;line-height:1.6;overflow-x:hidden}
body.hws a{color:var(--nuss)}
body.hws :focus-visible{outline:3px solid var(--nuss);outline-offset:3px;border-radius:6px}
body.hws h1,body.hws h2,body.hws h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.1;color:var(--tinte)}
body.hws p{margin:0}
body.hws img{max-width:100%;display:block}
.hand{font-family:var(--hand);color:var(--nuss);font-size:26px;line-height:1.1}

/* Ebenen: Saison hinten, Seite, Übergang, Saison vorne */
#hinten,#vorne{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}
#hinten{z-index:0}
#vorne{z-index:60}
.seite-innen{position:relative;z-index:2;max-width:1040px;margin:0 auto;padding:0 clamp(16px,4vw,40px);display:flex;flex-direction:column;gap:28px}

/* Kopf */
.seite-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px}
.marke{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:17px;text-decoration:none;color:var(--tinte)!important}
.seite-kopf nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.seite-kopf nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-weight:700;text-decoration:none;border-radius:999px}
.seite-kopf nav a[aria-current="page"]{background:rgba(255,253,248,.75)}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--nuss);color:#FFFFFF!important;font-weight:700;text-decoration:none;border:0;font-family:var(--text);font-size:15px;cursor:pointer}

/* Start */
.s-hero{min-height:calc(100vh - 110px);min-height:calc(100svh - 110px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}
.s-hero h1{font-size:clamp(34px,6.4vw,76px);max-width:14ch}
.streifen{display:flex;height:16px;width:min(520px,90%);margin:12px auto}
.streifen span{flex:1;transform:translate(calc(var(--e,1)*var(--dx)),calc(var(--e,1)*var(--dy))) rotate(calc(var(--e,1)*var(--rot)))}
.s-block{display:flex;flex-direction:column;gap:20px;padding-block:20px}
.s-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
body.hws .h3{font-size:clamp(24px,3vw,32px)}
.s-link{font-weight:700;padding:10px 0}
.s-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:22px}
.s-raster-6{gap:40px 26px}
.s-karte{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--tinte)!important}
.s-karte>img{width:100%;aspect-ratio:1/1.414;object-fit:cover;border-radius:4px;box-shadow:0 10px 26px rgba(91,74,68,.16)}
.s-karte span{font-family:var(--display);font-size:19px}
.s-karte b{font-size:14px;white-space:nowrap}
.s-karte .s-zeile{flex-direction:column;align-items:flex-start;gap:2px}
.lagen{position:relative;aspect-ratio:1/1.414;max-width:100%}
.lage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px;transform:translate(calc(var(--e,1)*var(--dx)),calc(var(--e,1)*var(--dy))) rotate(calc(var(--e,1)*var(--rot)));filter:drop-shadow(0 calc(var(--e,1)*10px) calc(var(--e,1)*10px) rgba(91,74,68,.25))}
.s-zitat{padding-block:60px 70px;text-align:center}
.s-zitat p{margin:0 auto!important;max-width:22ch;font-family:var(--display);font-size:clamp(26px,4vw,42px);line-height:1.2}
.s-fuss{border-top:1px solid var(--linie);padding-block:22px 30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* Kollektion + Produkt */
.s-kopftext{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.s-kopftext h1{font-size:clamp(32px,5.5vw,60px)}
.s-kopftext>p:not(.hand){font-size:17px;max-width:46ch}
.story{position:relative;height:340vh}
.story-buehne{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:hidden}
.story-kreis{position:absolute;width:min(70%,560px);aspect-ratio:1;border-radius:50%;background:var(--flieder);opacity:.55}
.hw-stack{position:absolute;inset:0;transform:translateY(var(--dy,80px)) rotateX(var(--rx,58deg)) rotateZ(var(--rz,-32deg)) scale(var(--sc,.8));transform-style:preserve-3d}
.hw-layer{position:absolute;inset:0;opacity:var(--a,1);transform:translate3d(calc(var(--e,1)*var(--tx,0px)),calc(var(--e,1)*var(--ty,0px)),calc(var(--e,1)*var(--z) + (1 - var(--a,1))*140px)) rotate(calc(var(--e,1)*var(--r,0deg)));filter:drop-shadow(0 calc(var(--e,1)*12px) calc(var(--e,1)*10px) rgba(91,74,68,.28))}
.hw-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#platte{position:absolute;inset:0;background:#EAD3C8;border:1px solid rgba(140,90,78,.15);border-radius:2px;transition:inset .5s ease,background .5s ease}
.hw-row{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,72px);width:100%;height:70%}
.hw-frame{position:relative;height:min(88%,520px);aspect-ratio:1/1.414;max-width:42%;perspective:1600px}
.hw-notes{position:relative;width:min(320px,38%);display:flex;flex-direction:column;gap:10px}
.hw-note{display:flex;gap:10px;align-items:flex-start;opacity:var(--n,0);transform:translateX(calc((1 - var(--n,0))*28px))}
.n-titel{font-family:var(--hand);font-size:clamp(21px,2.2vw,26px);line-height:1.05}
.n-text{font-family:var(--hand);font-size:clamp(16px,1.7vw,20px);line-height:1.15;color:var(--nuss)}
.story-cap{position:relative;width:min(520px,100%);height:84px;text-align:center}
.hw-cap{position:absolute;inset:0;display:flex;flex-direction:column;gap:2px;opacity:var(--c,0)}
.cap-z{font-family:var(--display);font-size:22px}
.raeume{position:relative;aspect-ratio:1200/756;max-width:100%;border-radius:22px;overflow:hidden;background:var(--salbei)}
.raeume img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity 1.4s ease,transform 7s linear}
.raeume img.an{opacity:1;transform:scale(1.06)}
.rund{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--nuss);background:transparent;color:var(--nuss);font:700 20px var(--text);cursor:pointer}
.punkte{display:flex;gap:2px}
.punkte button{width:32px;height:32px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.punkte span{width:8px;height:8px;border-radius:999px;background:var(--nuss);opacity:.3;transition:width .3s ease,opacity .3s ease}
.punkte [aria-current="true"] span{width:24px;opacity:1}
.kaufleiste{position:sticky;bottom:12px;z-index:3;align-self:center;width:min(600px,100%);display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:8px 8px 8px 14px;margin-bottom:12px;border-radius:28px;background:rgba(255,253,248,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 34px rgba(91,74,68,.18)}
.material{display:flex;gap:4px}
.material button{min-height:44px;padding:0 14px;border:0;border-radius:999px;color:var(--tinte);font:700 14px var(--text);cursor:pointer}
@media (max-width:760px){
  .hw-row{flex-direction:column;gap:8px;height:76%}.hw-frame{height:66%;max-width:62%}
  .hw-notes{width:min(420px,92%);height:66px}.hw-note{position:absolute;inset:0;justify-content:center;opacity:calc(var(--n,0)*(1 - var(--old,0)))}
  .seite-kopf .marke span{display:none}.kaufleiste{justify-content:center}
}

/* Übergang */
.uebergang{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}
.uebergang.aktiv{pointer-events:auto}
#bluete{position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;transform:scale(0);will-change:transform}
#bluete svg{width:100%;height:100%;display:block}
#meldung{position:relative;font-family:var(--hand);font-size:34px;color:var(--tinte);opacity:0;z-index:7}
/* Ankunft: abgedeckt ab dem ersten Bild */
html.hw-ankunft #bluete{transform:scale(3.6)}
html.hw-ankunft #meldung{opacity:1}
html.hw-ankunft .uebergang{pointer-events:auto}

@media (prefers-reduced-motion: reduce){ html{transition:none} }