@font-face{font-family:"Shantell";src:url(../fonts/shantell-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#F6F3E8;   /* Grund, warmes Naturweiß */
  --sheet:#FFFDF6;   /* Zettelpapier */
  --ink:#1F2A22;     /* Text */
  --pine:#1F3A28;    /* Tannengrün, Hauptfarbe */
  --leaf:#5E9C4E;    /* Blattgrün */
  --gold:#D9A21F;    /* Ähre */
  --rule:#DCD7C4;    /* Linien auf dem Zettel */
  --line:#DCD7C4;
  --err:#A3322A;
  --display:"Shantell",system-ui,sans-serif;
  --sans:"Atkinson",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.55 var(--sans)}
a{color:var(--pine);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--pine);color:#fff;padding:.6rem 1rem;z-index:9}
.skip:focus{top:1rem}

/* Kopf */
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;max-width:62rem;margin:0 auto}
.mark{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--pine)}
.mark em{font-style:normal;color:var(--leaf)}
.leaf{width:1.7rem;height:1.7rem;color:var(--leaf)}
.call{font-weight:700;text-decoration:none;color:var(--pine);border:1.5px solid var(--pine);border-radius:99px;padding:.4rem .9rem;white-space:nowrap}
.call:hover{background:var(--pine);color:var(--paper)}

main{max-width:62rem;margin:0 auto;padding:0 1.25rem}

/* Einstieg */
.intro{padding:1.5rem 0 1.75rem;max-width:38rem}
.greet{margin:0 0 .5rem;color:var(--leaf);font-weight:700}
h1,h2{overflow-wrap:break-word;hyphens:auto}
h1{font:700 clamp(1.9rem,6.8vw,3.1rem)/1.15 var(--display);color:var(--pine);margin:0 0 1rem;letter-spacing:-.01em}
.lead{margin:0;font-size:1.15rem;max-width:34rem}
.lead strong{background:linear-gradient(transparent 58%,rgba(217,162,31,.42) 58%)}

/* Einkaufszettel */
.note{margin:0 -.25rem 3rem}
.paper{
  position:relative;background:var(--sheet);
  padding:1.5rem 1.25rem 1.5rem 2.6rem;
  border-radius:3px;
  box-shadow:0 1px 0 var(--line),0 14px 30px -18px rgba(36,64,43,.45);
}
.paper::before{ /* Randlinie wie auf dem Block */
  content:"";position:absolute;top:0;bottom:0;left:1.7rem;width:2px;background:var(--gold)}
.paper h2{font:700 1.45rem/1.25 var(--display);color:var(--pine);margin:0 0 .75rem}
#items{
  display:block;width:100%;border:0;resize:vertical;background:transparent;
  font:1.2rem/2rem var(--sans);color:var(--ink);padding:0;min-height:16rem;
  background-image:repeating-linear-gradient(transparent 0 calc(2rem - 1px),var(--rule) calc(2rem - 1px) 2rem);
  background-attachment:local;
}
#items:focus-visible{outline-offset:6px}
#items::placeholder{color:#8B9A90}

.fields{display:grid;grid-template-columns:1fr 2fr;gap:.9rem 1rem;margin-top:1.5rem}
.fl{margin:0;grid-column:1/-1}
.fl.half{grid-column:1}
.fl.half2{grid-column:2}
.fl label,.fl legend{display:block;font-weight:700;font-size:.95rem;margin-bottom:.25rem}
.opt{font-weight:400;color:#56645A}
input:not([type=radio]){
  width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1.5px solid var(--rule);padding:.45rem 0;border-radius:0}
input:not([type=radio]):focus{border-bottom-color:var(--leaf);outline:none;box-shadow:0 1.5px 0 var(--leaf)}
input[aria-invalid=true],#items[aria-invalid=true]{border-bottom-color:var(--err)}
fieldset.when{border:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .9rem}
fieldset.when legend{width:100%;margin-bottom:.35rem}
fieldset.when label{display:inline-flex;align-items:center;gap:.4rem;font-weight:400;margin:0;min-height:2.25rem}
input[type=radio]{accent-color:var(--leaf);width:1.15rem;height:1.15rem}

.err{color:var(--err);font-weight:700;margin:.6rem 0 0}
.send{
  display:block;width:100%;margin-top:1.5rem;padding:1rem 1.25rem;
  font:700 1.15rem/1.2 var(--sans);color:#fff;background:var(--pine);
  border:0;border-radius:6px;cursor:pointer}
.send:hover{background:#1A3020}
.how{font-size:.95rem;margin:.8rem 0 0;color:#3A473E}
.alt{font-size:.95rem;margin:.5rem 0 0;color:#3A473E}
.linkbtn{font:inherit;color:var(--pine);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.copied{font-size:.95rem;font-weight:700;color:var(--leaf);margin:.4rem 0 0}

/* Ablauf */
.steps,.range,.free,.shop{padding:2rem 0;border-top:1.5px solid var(--line)}
.steps h2,.range h2,.free h2,.shop h2{font:700 1.5rem/1.25 var(--display);color:var(--pine);margin:0 0 1rem}
.steps ol{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:1.1rem}
.steps li{counter-increment:s;position:relative;padding-left:3rem;max-width:36rem}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-.1rem;width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:var(--pine);font:700 1.05rem/1 var(--display)}
.range p,.free p{max-width:36rem;margin:0;font-size:1.1rem}

.shopgrid{display:grid;gap:1.25rem}
address{font-style:normal;line-height:1.6}
.hours{display:grid;align-content:start;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:0}
.hours dt{font-weight:700}.hours dd{margin:0}
.hours dt{white-space:nowrap}
.actions{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.actions a{display:inline-block;padding:.55rem 1rem;border:1.5px solid var(--pine);border-radius:99px;text-decoration:none;font-weight:700;font-size:.95rem}
.actions a:hover{background:var(--pine);color:var(--paper)}

.foot{max-width:62rem;margin:1rem auto 0;padding:1.5rem 1.25rem 2.5rem;border-top:1.5px solid var(--line);font-size:.92rem;color:#3A473E}
.foot p{margin:0 0 .6rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}

/* Rechtsseiten */
.legal{max-width:40rem;padding-bottom:3rem}
.legal h1{font-size:clamp(2rem,6vw,2.6rem)}
.legal h2{font:700 1.25rem/1.35 var(--display);color:var(--pine);margin:2rem 0 .5rem}
.legal p,.legal li{max-width:38rem}

@media (min-width:52rem){
  .intro{padding:3rem 0 2.5rem}
  .note{max-width:40rem;margin:0 0 4rem}
  .paper{padding:2rem 2.25rem 2rem 3.6rem;transform:rotate(-.6deg)}
  .paper::before{left:2.4rem}
  .shopgrid{grid-template-columns:1fr 1fr;max-width:40rem}
}
/* Zwei Spalten erst, wenn wirklich Platz für Text UND Zettel da ist.
   minmax(0,…) verhindert, dass die Spalten breiter werden als das Fenster. */
@media (min-width:75rem){
  .top,main:not(.legal),.foot{max-width:75rem}
  main:not(.legal){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36rem);column-gap:3rem;align-items:start}
  .intro{grid-column:1;grid-row:1;padding-top:2rem}
  .note{grid-column:2;grid-row:1/span 2;max-width:none}
  .steps,.range,.free,.shop{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.top .call,.skip,.send,.alt,.how,.actions{display:none}.paper{box-shadow:none;transform:none}}
.mark img{display:block;height:3.1rem;width:auto}
@media (min-width:52rem){.mark img{height:3.6rem}}