@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed.woff2') format('woff2');font-weight:900;font-display:swap;font-style:normal}
@font-face{font-family:'InterV';src:url('/assets/fonts/inter.woff2') format('woff2-variations');font-weight:100 900;font-display:swap;font-style:normal}
:root{
  --papier:#F8F4EB; --sand:#EBE1D5; --anthrazit:#272B2A;
  --akzent:#E85D1B;          /* fuer die Salbei-Fassung auf #687C69 aendern */
  --linie:#E2D9C9;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--papier);color:var(--anthrazit);
  font-family:'InterV',Inter,system-ui,sans-serif;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;}
.kopf{padding:28px 20px 18px;text-align:center;background:var(--sand);}
.kopf .logo{display:block;margin:0 auto;width:min(230px,62vw);aspect-ratio:867/322;background:currentColor;color:var(--anthrazit);
  -webkit-mask:url('/assets/img/mask-wordmark.png') no-repeat center/contain;mask:url('/assets/img/mask-wordmark.png') no-repeat center/contain;}
.zurueck{position:absolute;left:16px;top:14px;font-size:13px;font-weight:500;color:var(--anthrazit);text-decoration:none;}
.zurueck:hover{color:var(--akzent);}
.kopf{position:relative;}
.kopf h1{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,9vw,44px);margin:16px 0 0;letter-spacing:.01em;}
.kopf .stand{margin-top:8px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--akzent);font-weight:500;}

nav{position:sticky;top:0;z-index:10;background:var(--papier);border-bottom:1px solid var(--linie);
  display:flex;gap:8px;overflow-x:auto;padding:10px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
nav::-webkit-scrollbar{display:none;}
nav a{flex:none;font-size:13px;font-weight:500;text-decoration:none;color:var(--anthrazit);
  border:1px solid var(--linie);border-radius:999px;padding:7px 13px;white-space:nowrap;}
nav a:active{background:var(--sand);}

main{max-width:720px;margin:0 auto;padding:8px 20px 60px;}
.rubrik{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:26px;margin:38px 0 0;color:var(--akzent);letter-spacing:.02em;}
.block{margin-top:30px;scroll-margin-top:64px;}
.blockkopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:2px solid var(--anthrazit);padding-bottom:8px;}
.blockkopf h3{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:23px;margin:0;letter-spacing:.01em;}
.menge,.mengen{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);font-weight:500;white-space:nowrap;}
.mengen{display:flex;gap:0;}
.mengen span{width:62px;text-align:right;}

.block ul{list-style:none;margin:0;padding:0;}
.block li{padding:15px 0;border-bottom:1px solid var(--linie);}
.block li:last-child{border-bottom:none;}
.kopfzeile{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.name{font-weight:500;font-size:17px;}
.preise{display:flex;flex:none;}
.preis{font-weight:500;font-size:17px;color:var(--akzent);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
li.zwei .preis{width:62px;text-align:right;}
.txt{margin:5px 0 0;font-weight:300;font-size:15px;line-height:1.5;color:var(--anthrazit);
  max-width:52ch;}
.varianten{margin:9px 0 0;padding:0;}
.varianten li{display:flex;justify-content:space-between;gap:14px;padding:4px 0;border:none;
  font-weight:300;font-size:15px;}
.hinweis{margin:14px 0 0;font-weight:300;font-size:15px;max-width:60ch;}

.fuss{background:var(--sand);padding:30px 20px calc(36px + env(safe-area-inset-bottom));text-align:center;font-size:14px;font-weight:300;}
.fuss b{font-weight:500;}
.fuss .hase{display:inline-block;width:44px;aspect-ratio:440/601;background:currentColor;color:var(--anthrazit);
  -webkit-mask:url('/assets/img/mask-hare-outline.png') no-repeat center/contain;mask:url('/assets/img/mask-hare-outline.png') no-repeat center/contain;margin-bottom:14px;}
.fuss .recht{margin-top:20px;font-size:12.5px;}
.fuss .recht a{color:var(--anthrazit);text-decoration:none;margin:0 8px;}
.fuss .recht a:hover{color:var(--akzent);}
.fuss a{color:var(--akzent);}
.pdf{display:inline-block;margin-top:18px;border:1px solid var(--anthrazit);border-radius:999px;
  padding:11px 20px;text-decoration:none;color:var(--anthrazit);font-size:14px;font-weight:500;}
@media (min-width:700px){
  .name,.preis{font-size:18px;}
  .txt{font-size:15.5px;}
}