@font-face{font-family:"Bodoni Moda";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/bodoni-moda-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/montserrat-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/montserrat-latin-500-normal.woff2) format("woff2")}

:root{
  --umber:#352c24;
  --umber-soft:#4a3f35;
  --stone:#ebe7e1;
  --linen:#f3efe9;
  --ink:#3b322a;
  --muted:#6f655b;
  --on-dark:#f3efe9;
  --on-dark-soft:#d6d2cb;
  --serif:"Bodoni Moda","Bodoni 72","Didot","Times New Roman",serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(1.5rem,5vw,5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.7}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--linen);color:var(--ink);padding:.75rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* Wortmarke – Logo, bewusst gesperrte Versalien */
.wordmark{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.32em;line-height:1.8;text-decoration:none;display:inline-block}
.rule{display:block;width:3.25rem;height:1px;background:currentColor;border:0;margin:0}

/* ---------- Hero ---------- */
.hero{background:var(--umber);color:var(--on-dark);position:relative;display:grid;grid-template-columns:1fr;overflow:hidden}
.hero__text{position:relative;z-index:2;padding:2.75rem var(--pad) 0}
.hero .wordmark{color:var(--on-dark-soft)}
.claim{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,9.5vw,5.6rem);line-height:1.04;letter-spacing:-.01em;margin:2.5rem 0 2rem}
.claim span{display:block;white-space:nowrap}
.hero .rule{background:var(--on-dark-soft);opacity:.8}
.hero__lead{max-width:30ch;margin:2rem 0 0;color:var(--on-dark-soft);font-size:1rem}
.hero__link{display:inline-block;margin-top:1.75rem;color:var(--on-dark);font-weight:400;font-size:.95rem;text-underline-offset:.35em;text-decoration-thickness:1px}
.hero__media{position:relative;margin-top:.5rem}
.hero__media img{width:100%;height:auto}
.hero__media::before{content:"";position:absolute;inset:0 0 auto 0;height:55%;background:linear-gradient(to bottom,var(--umber) 0%,rgba(53,44,36,.82) 22%,rgba(53,44,36,.45) 52%,rgba(53,44,36,0) 100%);z-index:1}

@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:min(100svh,62rem)}
  .hero__text{padding:4rem var(--pad) 4rem;display:flex;flex-direction:column}
  .hero__text .claim{margin-top:auto;font-size:clamp(3rem,4.3vw,4.75rem)}
  .hero__foot{margin-bottom:auto}
  .hero__media{margin:0;position:relative}
  .hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 60%}
  .hero__media::before{inset:0 auto 0 0;width:45%;height:auto;background:linear-gradient(to right,var(--umber) 0%,rgba(53,44,36,.7) 30%,rgba(53,44,36,0) 100%)}
}

@media (prefers-reduced-motion:no-preference){
  .hero__text>*{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
  .hero__text .claim{animation-delay:.12s}
  .hero__foot{animation-delay:.3s}
  .hero__media img{animation:settle 2.2s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes settle{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
}

/* ---------- Sortiment ---------- */
.range{padding:clamp(4rem,10vw,8rem) var(--pad)}
.range__frame{max-width:46rem;margin:0 auto;border:1px solid var(--ink);padding:clamp(2.5rem,7vw,5rem) clamp(1.5rem,6vw,4.5rem);text-align:center}
.range__frame .rule{margin:1.1rem auto 0;width:2.25rem}
.range h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,4.4vw,2.6rem);line-height:1.22;margin:2.5rem auto 0;max-width:20ch}
.range ul{list-style:none;padding:0;margin:2.75rem 0 0;font-size:1.125rem;line-height:2.15;letter-spacing:.02em}
.range p{max-width:34ch;margin:2.5rem auto 0;color:var(--muted)}

/* ---------- Besuch ---------- */
.visit{background:var(--linen);padding:clamp(4rem,10vw,8rem) var(--pad)}
.visit__grid{max-width:72rem;margin:0 auto;display:grid;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.visit__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.visit h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;margin:0 0 2.5rem}
.facts{display:grid;gap:1.9rem;margin:0}
.facts dt{font-weight:500;font-size:.9rem;letter-spacing:.03em;margin-bottom:.25rem}
.facts dd{margin:0}
.hours{display:grid;grid-template-columns:4.5rem auto;column-gap:1rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.75rem}
.btn{display:inline-block;padding:.9rem 1.4rem;border:1px solid var(--ink);text-decoration:none;font-weight:400;font-size:.95rem;line-height:1.2;transition:background-color .2s,color .2s}
.btn--solid{background:var(--ink);color:var(--linen)}
.btn:hover{background:var(--umber);border-color:var(--umber);color:var(--linen)}
@media (min-width:860px){.visit__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}

/* ---------- Footer ---------- */
.footer{background:var(--umber);color:var(--on-dark-soft);padding:3.5rem var(--pad);font-size:.9rem}
.footer__inner{max-width:72rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:baseline;justify-content:space-between}
.footer nav{display:flex;gap:1.75rem}
.footer a{text-underline-offset:.3em;text-decoration-thickness:1px}

/* ---------- Rechtstexte ---------- */
.legal-head{background:var(--umber);color:var(--on-dark-soft);padding:2rem var(--pad)}
.legal{max-width:44rem;margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--pad)}
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,3rem);line-height:1.1;margin:0 0 2.5rem}
.legal h2{font-weight:500;font-size:1rem;margin:2.5rem 0 .5rem}
.legal p{margin:0 0 1rem}
.todo{background:#f6e3a1;color:#3b322a;padding:0 .3em}