@font-face{font-family:'Fredoka';src:url('schriften/fredoka-var-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fredoka';src:url('schriften/fredoka-var-latin-ext.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito Sans';src:url('schriften/nunito-sans-var-latin.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito Sans';src:url('schriften/nunito-sans-var-latin-ext.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --leinen:#faf4e8;
  --leinen-tief:#f2e9d8;
  --papier:#fffdf8;
  --holz:#d9b487;
  --holz-kante:#b98f5a;
  --holz-hell:#e8cfae;
  --nuss:#2b231c;
  --nuss-matt:#5f5347;
  --rot:#c9302c;
  --rot-tief:#a8231f;
  --gruen:#5d8f24;
  --gelb:#e9a21b;
  --blau:#3d8cb5;
  --linie:#e0d3bd;
  --schrift:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --anzeige:'Fredoka','Nunito Sans',system-ui,sans-serif;
  --breit:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--leinen);color:var(--nuss);
  font-family:var(--schrift);font-size:1.0625rem;line-height:1.65;
  font-weight:400;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot-tief);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--rot)}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--anzeige);font-weight:600;line-height:1.15;margin:0 0 .55em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,1.35rem + 2.8vw,3.1rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.2rem)}
h3{font-size:clamp(1.15rem,1.03rem + .55vw,1.4rem)}
h4{font-size:1.05rem;font-weight:500}
p{margin:0 0 1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin-bottom:.35em}
strong{font-weight:700}
small{font-size:.85rem}

.huelle{max-width:var(--breit);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.2rem)}
.springen{position:absolute;left:-9999px}
.springen:focus{position:fixed;left:1rem;top:1rem;z-index:99;background:var(--rot);color:#fff;padding:.8rem 1.2rem;border-radius:8px}

/* ---------- Kopf ---------- */
.kopf{background:var(--papier);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:40}
.kopf-innen{display:flex;align-items:center;gap:1rem;min-height:72px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;padding:.4rem 0}
.marke img.wortmarke{width:150px;height:30px}
.marke img.zwerg{width:44px;height:44px}
.hauptnav{margin-left:auto}
.hauptnav ul{display:flex;gap:.1rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.hauptnav li{margin:0}
.hauptnav a{
  display:flex;align-items:center;min-height:44px;padding:.3rem .58rem;border-radius:999px;
  text-decoration:none;color:var(--nuss);font-weight:600;font-size:.94rem;white-space:nowrap;
}
.hauptnav a:hover{background:var(--leinen-tief)}
.hauptnav a[aria-current="page"]{background:var(--leinen-tief);box-shadow:inset 0 -3px 0 var(--rot)}
.shopknopf{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.55rem .95rem;white-space:nowrap;
  background:var(--rot);color:#fff;border-radius:999px;text-decoration:none;font-weight:700;
  box-shadow:0 3px 0 var(--rot-tief);
}
.shopknopf:hover{background:var(--rot-tief);color:#fff}
.shopknopf::after{content:"↗";font-weight:400}

/* ---------- Regalbretter ---------- */
.regal{padding:2.6rem 0 0}
.regal + .regal{padding-top:2.2rem}
.regal-kopf{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.regal-kopf h2{margin-bottom:.2rem}
.regal-kopf p{color:var(--nuss-matt);margin:0}
.schildchen{
  display:inline-block;font-family:var(--anzeige);font-size:.82rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--nuss);background:var(--leinen-tief);
  padding:.2rem .7rem;border-radius:4px;border-left:6px solid var(--holz-kante);
}

/* Reihe: Waren stehen auf einem durchgehenden Brett */
.reihe{list-style:none;margin:0;padding:0;display:grid;gap:2.6rem 0;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));align-items:end}
.reihe.weit{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.ware{position:relative;padding:0 .55rem 20px;margin:0;text-align:center;display:flex;flex-direction:column;justify-content:flex-end}
.ware::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:15px;
  background:linear-gradient(180deg,var(--holz-hell) 0 3px,var(--holz) 3px 11px,var(--holz-kante) 11px 100%);
  box-shadow:0 7px 9px -6px rgba(43,35,28,.5);
}
.ware-bild{position:relative;margin-bottom:.55rem}
.ware-bild img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:6px;background:var(--papier)}
.ware-bild::before{
  content:"";position:absolute;left:12%;right:12%;bottom:-6px;height:9px;border-radius:50%;
  background:rgba(43,35,28,.22);filter:blur(4px);
}
.ware-marke{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--nuss-matt);margin:0 0 .1rem;font-weight:700}
.ware-name{font-size:.9rem;line-height:1.35;margin:0;hyphens:auto}
/* hängendes Preisschild */
.schild-preis{
  position:absolute;right:-2px;bottom:6px;transform:rotate(-4deg);
  background:var(--papier);border:1px solid var(--holz-kante);border-radius:4px 4px 4px 10px;
  font-family:var(--anzeige);font-weight:600;font-size:.86rem;color:var(--nuss);
  padding:.12rem .45rem .12rem .62rem;box-shadow:0 2px 4px rgba(43,35,28,.18);white-space:nowrap;
}
.schild-preis::before{
  content:"";position:absolute;left:4px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;background:var(--holz-kante);
}
.schild-preis::after{
  content:"";position:absolute;left:-9px;top:50%;width:10px;height:1.5px;background:var(--holz-kante);
  transform:rotate(28deg);transform-origin:right center;
}

/* Kategorien-Reihe */
.welten{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem 0;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));align-items:end}
.welt{position:relative;padding:0 .6rem 20px;margin:0}
.welt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:15px;
  background:linear-gradient(180deg,var(--holz-hell) 0 3px,var(--holz) 3px 11px,var(--holz-kante) 11px 100%);
  box-shadow:0 7px 9px -6px rgba(43,35,28,.5)}
.welt a{display:block;text-decoration:none;color:var(--nuss);background:var(--papier);
  border:1px solid var(--linie);border-radius:14px 14px 4px 4px;padding:1rem 1rem .9rem;min-height:112px}
.welt a:hover{border-color:var(--holz-kante);background:#fff}
.welt .welt-name{font-family:var(--anzeige);font-weight:600;font-size:1.12rem;display:block;margin-bottom:.2rem}
.welt .welt-zahl{font-size:.82rem;color:var(--nuss-matt)}
.welt-farbe{display:block;height:6px;border-radius:3px;margin-bottom:.6rem;width:44px}

/* ---------- Textblöcke ---------- */
.text-brett{background:var(--papier);border:1px solid var(--linie);border-radius:16px;padding:clamp(1.2rem,3vw,2rem)}
.text-brett h2:first-child,.text-brett h3:first-child{margin-top:0}
.zwei{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:820px){.zwei{grid-template-columns:1fr 1fr}.zwei.schmal-links{grid-template-columns:5fr 7fr}}
.lese{max-width:68ch}
.lese h2{margin-top:1.8em}
.lese h3{margin-top:1.5em}

.hinweisstreifen{background:var(--gelb);color:var(--nuss);border-radius:12px;padding:.85rem 1.1rem;font-weight:600}
.hinweisstreifen a{color:var(--nuss)}
.hinweisstreifen a:hover{color:#000}
.dienste{list-style:none;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));padding:0;margin:1.4rem 0 0}
.dienste li{background:var(--papier);border:1px solid var(--linie);border-radius:10px;padding:.7rem .9rem;font-size:.95rem;margin:0}

/* Bühne */
.buehne{padding:clamp(2rem,5vw,3.4rem) 0 .5rem}
.buehne-innen{display:grid;gap:1.8rem;align-items:center}
@media(min-width:900px){.buehne-innen{grid-template-columns:7fr 5fr}}
.buehne p.vorspann{font-size:clamp(1.05rem,.98rem + .4vw,1.25rem);color:var(--nuss-matt);max-width:52ch}
.knopfreihe{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.knopf{display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.2rem;border-radius:999px;
  text-decoration:none;font-weight:700;background:var(--nuss);color:var(--papier);box-shadow:0 3px 0 #0f0c09}
.knopf:hover{background:#1c1712;color:#fff}
.knopf.hell{background:var(--papier);color:var(--nuss);border:1px solid var(--holz-kante);box-shadow:0 3px 0 var(--holz-kante)}
.knopf.hell:hover{background:#fff;color:var(--nuss)}
.buehne-bild{position:relative}
.buehne-bild img{border-radius:18px;border:1px solid var(--linie)}
.buehne-bild img.zwerg-ecke{position:absolute;right:-10px;bottom:-18px;width:104px;height:104px;border-radius:50%;
  border:4px solid var(--leinen);box-shadow:0 4px 10px rgba(43,35,28,.25);background:#fff}

.service{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.service li{margin:0;background:var(--papier);border:1px solid var(--linie);border-radius:10px;
  padding:.65rem .85rem;font-size:.93rem;font-weight:600;display:flex;gap:.5rem;align-items:flex-start}
.service li::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:.45rem;background:var(--gruen)}

/* Öffnungsstatus */
.status{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem;
  background:var(--papier);border:1px solid var(--linie);border-radius:999px;padding:.35rem .85rem}
.status .punkt{width:10px;height:10px;border-radius:50%;background:var(--nuss-matt)}
.status.auf .punkt{background:var(--gruen)}
.status.zu .punkt{background:var(--rot)}

/* Zeiten-Tabelle */
table.zeiten{border-collapse:collapse;width:100%;max-width:420px}
table.zeiten th,table.zeiten td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--linie);font-size:.98rem}
table.zeiten th{font-weight:700}

/* Galerie */
.galerie{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.galerie li{margin:0}
.galerie img{border-radius:14px;border:1px solid var(--linie);aspect-ratio:3/2;object-fit:cover}

/* Team */
.team{list-style:none;margin:0;padding:0;display:grid;gap:1.8rem 1.2rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.team li{margin:0;background:var(--papier);border:1px solid var(--linie);border-radius:16px;padding:1rem}
.team img{border-radius:12px;aspect-ratio:1/1;object-fit:cover;margin-bottom:.7rem}
.team h3{margin-bottom:.3rem}
.team ul{padding-left:1.1em;font-size:.95rem}

/* Ratgeber */
.beitraege{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:1fr}
.beitraege li{margin:0;border-bottom:1px solid var(--linie)}
.beitraege a{display:flex;gap:.8rem;align-items:baseline;padding:.85rem .2rem;text-decoration:none;color:var(--nuss);min-height:44px}
.beitraege a:hover{background:var(--papier)}
.beitraege .titel{font-weight:600}
.beitraege .pfeil{margin-left:auto;color:var(--rot-tief);font-weight:700}

/* Filterleiste */
.altersleiste{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;padding:0;list-style:none}
.altersleiste button{
  font:inherit;font-weight:700;font-size:.95rem;min-height:44px;padding:.5rem 1.05rem;cursor:pointer;
  border-radius:999px;border:1px solid var(--holz-kante);background:var(--papier);color:var(--nuss);
}
.altersleiste button[aria-pressed="true"]{background:var(--nuss);color:var(--papier);border-color:var(--nuss)}

/* Formular */
form.kontakt{display:grid;gap:1rem;max-width:640px}
form.kontakt label{font-weight:700;display:block;margin-bottom:.25rem}
form.kontakt input,form.kontakt textarea{
  width:100%;font:inherit;padding:.65rem .8rem;border:1px solid var(--holz-kante);border-radius:10px;
  background:var(--papier);color:var(--nuss);min-height:44px;
}
form.kontakt textarea{min-height:150px}
.einwilligung{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem}
.einwilligung input{width:22px;height:22px;min-height:22px;flex:0 0 auto;margin-top:.2rem}
.pflichthinweis{font-size:.9rem;color:var(--nuss-matt)}

/* Karte (Zwei-Klick) */
.karte{border:1px solid var(--linie);border-radius:16px;background:var(--papier);padding:1.1rem;max-width:640px}
.karte .lageplan{background:
  repeating-linear-gradient(90deg,transparent 0 38px,rgba(185,143,90,.25) 38px 39px),
  repeating-linear-gradient(0deg,transparent 0 38px,rgba(185,143,90,.25) 38px 39px),
  var(--leinen-tief);
  border-radius:10px;padding:1rem;font-size:.95rem;line-height:1.5}
.karte button{font:inherit;font-weight:700;min-height:44px;padding:.6rem 1.2rem;border-radius:999px;
  border:1px solid var(--holz-kante);background:var(--nuss);color:var(--papier);cursor:pointer;margin-top:.8rem}

/* Fuß */
.fuss{background:var(--nuss);color:#f4ece0;margin-top:3.5rem;padding:2.6rem 0 1.6rem;
  border-top:14px solid var(--holz)}
.fuss a{color:#f4ece0}
.fuss h2,.fuss h3{color:#fff;font-size:1.05rem;margin-bottom:.6rem}
.fuss-gitter{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.35rem}
.fuss .klein{font-size:.88rem;color:#cfc2b0;margin-top:2rem;border-top:1px solid #4a3f34;padding-top:1rem}

@media print{
  .kopf,.shopknopf,.altersleiste{display:none}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}