@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/work-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/work-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/work-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#261d17; --bg-glow:#3d2e23; --bar:#35312d; --bar-line:#47423c;
  --text:#d9d0c3; --muted:#a79d8f; --head:#ece4d6;
  --gold:#d4b65f; --green:#8fd12f; --green-deep:#6fa81f; --green-ink:#14200a;
  --earth:#6b5442; --card:#30261e; --card-line:#4a3b2f;
  --bar-h:52px; --foot-h:38px;
  --serif:"Fraunces",Georgia,serif; --sans:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:1rem;line-height:1.55;color:var(--text);
  background:var(--bg) radial-gradient(ellipse 80% 70% at 50% 40%,var(--bg-glow) 0%,var(--bg) 70%) fixed;
  min-height:100dvh;display:flex;flex-direction:column}
img{display:block;max-width:100%}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:#ecd58b}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--green-ink);padding:.5rem 1rem;z-index:50}
.skip:focus{left:0}

/* Leisten */
.bar,.foot{background:var(--bar);border-color:var(--bar-line);flex:none}
.bar{border-bottom:1px solid var(--bar-line);min-height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem clamp(.8rem,3vw,2rem)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--head)}
.brand img{height:34px;width:auto}
.brand span{font-family:var(--serif);font-size:1.05rem;font-weight:500;letter-spacing:.01em}
.nav{display:flex;gap:.25rem}
.nav a{color:var(--text);text-decoration:none;font-weight:500;font-size:.95rem;padding:.4rem .9rem;border-radius:999px;border:1px solid transparent}
.nav a:hover{background:#413b35;color:var(--head)}
.nav a[aria-current="page"]{background:#4a4238;color:var(--head);border-color:#5b5146}
.foot{border-top:1px solid var(--bar-line);min-height:var(--foot-h);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2rem 1.6rem;padding:.4rem 1rem;font-size:.85rem;color:var(--muted)}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--head);text-decoration:underline}

main{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:1280px;margin:0 auto;padding:clamp(.6rem,1.6vh,1.2rem) clamp(.8rem,3vw,2rem)}
h1,h2{font-family:var(--serif);color:var(--head);font-weight:500;line-height:1.15}

/* Seite 1 */
.hero{text-align:center}
.hero h1{font-size:clamp(1.5rem,2.2vw + .9rem,2.6rem);letter-spacing:-.005em}
.hero p{color:var(--muted);font-size:clamp(.95rem,.4vw + .8rem,1.15rem);margin-top:.15rem}
.label{display:flex;justify-content:center;margin:clamp(.5rem,1.6vh,1rem) 0 clamp(.4rem,1.4vh,.9rem)}
.label span{display:inline-block;background:var(--green);color:var(--green-ink);font-weight:600;font-size:clamp(.95rem,.3vw + .85rem,1.1rem);letter-spacing:.02em;padding:.45rem 1.3rem;border-radius:999px;box-shadow:0 0 0 4px rgba(143,209,47,.18),0 0 26px rgba(143,209,47,.35)}
/* Schaufensterreihe: feste Holzrahmen, nur die Glasflaeche ist austauschbar */
.show{--h:min(calc(100dvh - 330px),calc(min(100vw - 64px,1216px)/1.92));--fw:calc(var(--h)*.095);display:flex;justify-content:center;align-items:flex-start;gap:0}
.show figure{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.win{position:relative;height:var(--h);padding:var(--fw);box-sizing:border-box;background:#3c554e}
.fr{position:absolute;pointer-events:none;z-index:2;background-repeat:no-repeat}
.fr-t{left:0;right:0;top:0;height:var(--fw);background-image:url("../img/rahmen-oben.jpg");background-size:auto 100%;background-position:left center;clip-path:polygon(0 0,100% 0,calc(100% - var(--fw)) 100%,var(--fw) 100%)}
.fr-b{left:0;right:0;bottom:0;height:var(--fw);background-image:url("../img/rahmen-unten.jpg");background-size:auto 100%;background-position:left center;clip-path:polygon(var(--fw) 0,calc(100% - var(--fw)) 0,100% 100%,0 100%)}
.fr-l{left:0;top:0;bottom:0;width:var(--fw);background-image:url("../img/rahmen-links.jpg");background-size:100% auto;background-position:center top;clip-path:polygon(0 0,100% var(--fw),100% calc(100% - var(--fw)),0 100%)}
.fr-r{right:0;top:0;bottom:0;width:var(--fw);background-image:url("../img/rahmen-rechts.jpg");background-size:100% auto;background-position:center top;clip-path:polygon(0 var(--fw),100% 0,100% 100%,0 calc(100% - var(--fw)))}
.glass{height:100%;aspect-ratio:.54;overflow:hidden;position:relative;z-index:1;background:#1b140f;box-shadow:0 0 0 2px var(--green),inset 0 0 12px rgba(0,0,0,.4)}
.glass img{width:100%;height:100%;object-fit:cover}
.glass .zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.door{height:var(--h);aspect-ratio:.68;overflow:hidden;background:#1b140f}
.door img{width:100%;height:100%;object-fit:cover}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.95rem;padding:.6rem 1.25rem;border-radius:999px;border:2px solid var(--green);color:var(--green);background:rgba(143,209,47,.07);cursor:pointer;font-family:inherit;line-height:1.2;text-align:center}
.btn:hover{background:var(--green);color:var(--green-ink)}
.btn.solid{background:var(--green);color:var(--green-ink)}
.btn.solid:hover{background:#a6e04c}
.hours-mini{height:2.6rem;text-align:center;font-size:.92rem;color:var(--muted);line-height:1.35;display:flex;flex-direction:column;justify-content:center}
.hours-mini strong{color:var(--text);font-weight:500}

/* Seite 2 */
.about{max-width:62rem;margin:0 auto;text-align:center}
.about h1{font-size:clamp(1.5rem,1.6vw + 1rem,2.2rem);margin-bottom:.6rem}
.about .size{white-space:nowrap;font-size:1.25em;font-weight:700;color:var(--head);letter-spacing:.01em}
.about p{font-size:clamp(1rem,.35vw + .9rem,1.15rem);line-height:1.6}
.gal{--t:min(calc((100dvh - 400px)/2),12.6vw,190px);display:grid;grid-template-columns:repeat(6,var(--t));justify-content:center;gap:clamp(.5rem,1.4vw,1.1rem);margin-top:clamp(.9rem,2.5vh,1.8rem);list-style:none}
.gal button{display:block;width:var(--t);height:var(--t);border-radius:50%;overflow:hidden;border:2px solid var(--earth);padding:0;background:var(--card);cursor:zoom-in;box-shadow:0 6px 16px rgba(0,0,0,.4);transition:transform .2s,border-color .2s}
.gal button:hover{transform:scale(1.07);border-color:var(--gold)}
.gal img{width:100%;height:100%;object-fit:cover}
.hint{text-align:center;color:var(--muted);font-size:.85rem;margin-top:.9rem}

dialog.lb{border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;color:var(--head)}
dialog.lb::backdrop{background:rgba(14,10,7,.92)}
.lb-in{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:3.2rem 4rem 3.6rem}
.lb-in img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 10px 50px rgba(0,0,0,.6)}
.lb-cap{position:fixed;bottom:.9rem;left:0;right:0;text-align:center;font-size:.9rem;color:var(--muted);padding:0 1rem}
.lb button{position:fixed;background:rgba(53,49,45,.92);color:var(--head);border:1px solid #5b5146;border-radius:50%;width:48px;height:48px;font-size:1.5rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.lb button:hover{background:#4a4238;border-color:var(--gold)}
.lb .x{top:.8rem;right:.8rem}.lb .p{left:.8rem;top:50%;margin-top:-24px}.lb .n{right:.8rem;top:50%;margin-top:-24px}

/* Seite 3 */
.contact{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr) minmax(0,1.5fr);gap:clamp(1rem,2.2vw,2rem);align-items:start}
.contact h2{font-size:1.35rem;margin-bottom:.5rem;color:var(--gold)}
.contact section+section{margin-top:1.1rem}
.contact p,.contact li,.contact dd,.contact dt{font-size:1.02rem;line-height:1.5}
.hours{display:grid;grid-template-columns:auto 1fr;gap:.1rem 1rem}
.hours dt{color:var(--muted)}.hours dd{color:var(--head);font-weight:500;white-space:nowrap}
.note{color:var(--muted);font-size:.85rem;margin-top:.25rem}
address{font-style:normal}
.field{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.55rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
label{font-size:.85rem;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],textarea{font:inherit;font-size:.95rem;color:var(--head);background:#1f1812;border:1px solid var(--card-line);border-radius:8px;padding:.5rem .7rem;width:100%}
textarea{resize:vertical;min-height:4.2rem}
input:focus,textarea:focus{outline:3px solid var(--green);outline-offset:1px}
.check{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;color:var(--muted);margin:.2rem 0 .7rem}
.check input{margin-top:.2rem;accent-color:var(--green-deep);width:1.05rem;height:1.05rem;flex:none}
.msg{margin-top:.6rem;font-size:.9rem;color:var(--gold)}
.map{border-radius:12px;overflow:hidden;border:1px solid var(--card-line);background:var(--card)}
.map img{width:100%;height:auto}
.map-actions{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.55rem 0 .7rem}
.map-actions small{color:var(--muted);font-size:.8rem;flex:1 1 12rem}
.way p{font-size:1rem;line-height:1.5}
.way p+p{margin-top:.5rem}
.stay{margin-top:.8rem;border:2px solid var(--green);border-radius:14px;padding:.8rem 1.1rem;background:rgba(143,209,47,.06);display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.stay p{color:var(--green);font-weight:500;flex:1 1 16rem}
.stay .btn{flex:none}

/* Rechtstexte */
.legal{max-width:46rem;margin:0 auto}
.legal h1{font-size:1.8rem;margin-bottom:.4rem}
.legal h2{font-size:1.2rem;color:var(--gold);margin:1.2rem 0 .3rem}
.legal p,.legal li{font-size:.97rem}
.legal ul{padding-left:1.2rem}
.draft{background:#3a2d22;border:1px solid var(--gold);border-radius:10px;padding:.6rem .9rem;margin:.6rem 0 1rem;font-size:.9rem;color:var(--head)}

/* Kleinere Hoehen: Seite 1 und 2 bleiben ohne Scrollen */
@media (max-height:800px) and (min-width:901px){
  .show{--h:min(calc(100dvh - 318px),calc(min(100vw - 64px,1216px)/1.92))}
  .hours-mini{height:3.4rem;font-size:.85rem}
  .btn{padding:.5rem 1.1rem;font-size:.9rem}
  .gal{--t:min(calc((100dvh - 370px)/2),12.6vw,190px)}
}
@media (max-width:900px){
  .brand span{display:none}
  .hours-mini{height:auto}
  .gal{grid-template-columns:repeat(3,1fr);--t:100%;max-width:26rem;margin-left:auto;margin-right:auto}
  .gal button{width:100%;height:auto;aspect-ratio:1}
  .contact{grid-template-columns:1fr}
  .lb-in{padding:3.4rem .6rem 3.6rem}
  .lb .p{top:auto;bottom:.7rem;left:.8rem;margin:0}.lb .n{top:auto;bottom:.7rem;right:.8rem;margin:0}
}
@media (max-width:520px){
  .nav a{padding:.35rem .6rem;font-size:.85rem}
  .brand img{height:30px}
  .row2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .show{flex-direction:column;align-items:center;--h:auto;gap:1.6rem}
  .show .win{--W:min(84vw,360px);--fw:calc(var(--W)*.14);width:var(--W);height:auto}
  .show .glass{height:auto;width:100%}
  .show .door{height:auto;width:min(84vw,360px);aspect-ratio:.75}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* Variante Leder: Hintergrund wie ein Stueck Leder, auf dem die Bilder liegen */
body{
  background:
    radial-gradient(ellipse 85% 75% at 50% 42%,rgba(90,62,40,.22) 0%,rgba(0,0,0,0) 60%),
    radial-gradient(ellipse 120% 100% at 50% 50%,rgba(0,0,0,0) 55%,rgba(10,6,3,.55) 100%),
    url("../img/leder.jpg") center top/1024px 1024px repeat;
  background-color:#2a2018;
  background-attachment:fixed,fixed,scroll;
}
@media (min-width:1000px){
  .legal.long{max-width:78rem;columns:2;column-gap:3.5rem}
  .legal.long h1,.legal.long .draft{column-span:all}
  .legal.long h2{margin-top:.8rem;break-after:avoid}
  .legal.long p,.legal.long li{font-size:.9rem;line-height:1.45}
  .legal.long p+p{margin-top:.4rem}
}
@media (min-width:1000px){ .legal.imp{max-width:52rem;column-gap:3rem} .legal.imp h2{margin-top:1rem} }
.legal.imp p{break-inside:avoid}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg.ok{color:var(--green);font-weight:500}
.msg.err{color:#f0b27a}
.hours-mini .closed{font-style:normal;font-size:.82em;opacity:.85}