:root{
  --creme:#F6EFE4; --sand:#E9DCC8; --ton:#C4552B; --ton-dunkel:#A4431F;
  --braun:#6B5A4E; --tief:#352A23; --weiss:#FDFBF8;
  --serif:"Cormorant Garamond","EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --rand:clamp(1.25rem,5vw,4.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--creme);color:var(--tief);font-family:var(--sans);font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ton);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(3rem,8vw,6.4rem)}
h2{font-size:clamp(2.2rem,4.8vw,3.8rem);margin-bottom:1.25rem}
h3{font-size:1.75rem;font-weight:600}
p{max-width:34em}
.wrap{padding-inline:var(--rand);max-width:88rem;margin-inline:auto}
section{padding-block:clamp(4.5rem,11vw,9rem)}

/* Buttons */
.btn{display:inline-block;padding:.95rem 2rem;border-radius:999px;background:var(--ton);color:var(--weiss);text-decoration:none;font-weight:500;border:1.5px solid var(--ton);cursor:pointer;font:inherit;font-weight:500;transition:background .3s,color .3s,transform .3s}
.btn:hover{background:var(--ton-dunkel);border-color:var(--ton-dunkel);transform:translateY(-2px)}
.btn.leise{background:transparent;color:var(--tief);border-color:var(--braun)}
.btn.leise:hover{background:var(--tief);color:var(--creme);border-color:var(--tief)}

/* Header */
header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,box-shadow .4s}
header.scrolled{background:rgba(246,239,228,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(107,90,78,.15)}
.bar{display:flex;align-items:center;justify-content:space-between;height:5rem}
.logo img{height:3.4rem;width:auto}
nav ul{display:flex;gap:2.25rem;list-style:none}
nav a{text-decoration:none;font-size:.98rem;position:relative;padding-block:.3rem}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--ton);transform:scaleX(0);transform-origin:left;transition:transform .35s}
nav a:hover::after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;width:2.75rem;height:2.75rem;cursor:pointer;position:relative;z-index:60}
.burger span{position:absolute;left:.7rem;right:.7rem;height:1.5px;background:var(--tief);transition:transform .3s,top .3s,opacity .3s}
.burger span:nth-child(1){top:1.1rem}.burger span:nth-child(2){top:1.65rem}
.burger[aria-expanded=true] span:nth-child(1){top:1.38rem;transform:rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){top:1.38rem;transform:rotate(-45deg)}

/* Hero */
.hero{min-height:100svh;display:grid;align-items:center;padding-block:7rem 4rem;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,6rem);align-items:center;width:100%}
.hero h1{margin-bottom:1.5rem}
.hero h1 em{font-style:italic;color:var(--ton)}
.hero p{font-size:1.2rem;color:var(--braun);margin-bottom:2.25rem}
.knoepfe{display:flex;gap:1rem;flex-wrap:wrap}
.hero-bild{position:relative;z-index:1}
.hero-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 1.2rem 1.2rem;box-shadow:0 30px 60px -30px rgba(53,42,35,.45)}
.spirale{position:absolute;z-index:0;width:min(78vw,56rem);right:-14vw;top:50%;translate:0 -50%;opacity:.55;pointer-events:none}
.spirale path{fill:none;stroke:var(--ton);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:6000;stroke-dashoffset:6000;animation:zeichnen 4.5s cubic-bezier(.5,.1,.2,1) .3s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.hero .text>*,.hero-bild{opacity:0;animation:ein 1.1s ease forwards}
.hero .text>*:nth-child(2){animation-delay:.2s}.hero .text>*:nth-child(3){animation-delay:.4s}
.hero-bild{animation-delay:.5s}
@keyframes ein{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Über uns */
.ueber .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,7vw,7rem);align-items:center}
.ueber img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:1.2rem}
.ueber p+p{margin-top:1.1rem}
.ueber .werte{margin-top:2.25rem;display:grid;gap:1.25rem;padding-top:2rem;border-top:1px solid rgba(107,90,78,.3)}
.werte h3{font-size:1.4rem;margin-bottom:.15rem;color:var(--ton-dunkel)}
.werte p{font-size:1rem;color:var(--braun)}

/* Kollektionen */
.kollektionen{background:var(--sand)}
.kopf{margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.kopf p{color:var(--braun)}
.raster{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.5vw,2rem)}
.karte{position:relative;overflow:hidden;border-radius:1rem;background:var(--creme)}
.karte:nth-child(1){grid-column:1/6}
.karte:nth-child(2){grid-column:6/13;align-self:end}
.karte:nth-child(3){grid-column:1/8}
.karte:nth-child(4){grid-column:8/13;align-self:start}
.karte img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.karte:nth-child(1) img,.karte:nth-child(4) img{aspect-ratio:3/4}
.karte:nth-child(2) img,.karte:nth-child(3) img{aspect-ratio:4/3}
.karte:hover img{transform:scale(1.05)}
.karte div{position:absolute;inset:auto 0 0 0;padding:4rem 1.5rem 1.4rem;background:linear-gradient(transparent,rgba(53,42,35,.82));color:var(--weiss)}
.karte h3{margin-bottom:.2rem}
.karte p{font-size:.95rem;opacity:.9;max-height:0;overflow:hidden;transition:max-height .5s,opacity .5s;opacity:0}
.karte:hover p,.karte:focus-within p{max-height:6em;opacity:.95}
@media (hover:none){.karte p{max-height:6em;opacity:.95}}

/* Werkstatt */
.werkstatt .wrap>.bilder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2rem);margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.bilder figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:1rem}
.bilder figure:nth-child(2){margin-top:3.5rem}
figcaption{font-size:.92rem;color:var(--braun);margin-top:.7rem;font-style:italic}
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);list-style:none;counter-reset:s}
.schritte li{counter-increment:s;padding-top:1.25rem;border-top:1.5px solid var(--ton)}
.schritte h3::before{content:counter(s) ". ";color:var(--ton)}
.schritte p{font-size:1rem;color:var(--braun);margin-top:.4rem}

/* Galerie */
.galerie{background:var(--weiss)}
.mauer{columns:3;column-gap:clamp(.8rem,2vw,1.5rem)}
.mauer button{display:block;width:100%;margin-bottom:clamp(.8rem,2vw,1.5rem);padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;border-radius:.8rem;break-inside:avoid}
.mauer img{width:100%;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.mauer button:hover img{transform:scale(1.05);filter:saturate(1.08)}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(53,42,35,.94);display:none;align-items:center;justify-content:center;padding:1.5rem}
.lightbox.offen{display:flex;animation:ein .35s ease}
.lightbox img{max-height:88vh;max-width:min(92vw,60rem);border-radius:.6rem}
.lightbox button{position:absolute;background:none;border:0;color:var(--weiss);font-size:2.4rem;cursor:pointer;width:3.5rem;height:3.5rem;font-family:var(--serif)}
.lb-zu{top:1rem;right:1rem}.lb-zurueck{left:.5rem}.lb-vor{right:.5rem}

/* Kontakt */
.kontakt .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,7vw,7rem)}
.daten{margin-top:2rem;display:grid;gap:1rem;font-style:normal;color:var(--braun)}
.daten strong{display:block;color:var(--tief);font-weight:600}
form{display:grid;gap:1.4rem}
.feld label{display:block;font-size:.92rem;margin-bottom:.3rem;color:var(--braun)}
.feld input,.feld textarea{width:100%;padding:.8rem 0;font:inherit;background:transparent;border:0;border-bottom:1.5px solid rgba(107,90,78,.5);color:var(--tief);border-radius:0;transition:border-color .3s}
.feld input:focus,.feld textarea:focus{outline:0;border-color:var(--ton)}
.feld textarea{min-height:8rem;resize:vertical}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.status{min-height:1.5em;color:var(--ton-dunkel)}
form .btn{justify-self:start}

/* Footer */
footer{background:var(--tief);color:var(--sand);padding-block:4rem 2rem}
footer .oben{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start;padding-bottom:2.5rem;border-bottom:1px solid rgba(233,220,200,.2)}
footer .logo-f{background:var(--creme);padding:.6rem 1.2rem;border-radius:.6rem}
footer .logo-f img{height:3.2rem}
.social{display:flex;gap:.8rem;list-style:none}
.social a{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(233,220,200,.4);transition:background .3s,color .3s,transform .3s}
.social a:hover{background:var(--ton);border-color:var(--ton);color:var(--weiss);transform:translateY(-3px)}
.social svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.6}
footer .unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.75rem;font-size:.9rem;opacity:.8}
footer .unten a{margin-left:1.25rem;text-decoration:none}footer .unten a:hover{text-decoration:underline}

/* Mobil */
@media (max-width:60rem){
  .hero .wrap,.ueber .wrap,.kontakt .wrap{grid-template-columns:1fr}
  .hero-bild{max-width:26rem}
  .hero{padding-top:6.5rem}
  .spirale{right:-30vw;width:110vw;opacity:.35}
  .ueber img{max-width:30rem}
  .schritte{grid-template-columns:1fr}
  .mauer{columns:2}
  .burger{display:block}
  nav{position:fixed;inset:0;background:var(--creme);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  nav.offen{opacity:1;visibility:visible}
  nav ul{flex-direction:column;align-items:center;gap:1.6rem}
  nav a{font-family:var(--serif);font-size:2.2rem}
}
@media (max-width:40rem){
  .raster{display:flex;flex-direction:column}
  .karte img{aspect-ratio:4/5!important}
  .zwei{grid-template-columns:1fr}
  .mauer{columns:1}
  .bilder figure:nth-child(2){margin-top:2rem}
  footer .unten a{margin:0 1rem 0 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .spirale path{stroke-dashoffset:0}
}