@font-face {
  font-family: "Providence Sans";
  src: url("../fonts/ProvidenceSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Providence Sans";
  src: url("../fonts/ProvidenceSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --cream: #feedcc;
  --sky: #c2d6dc;
  --olive: #9e9167;
  --red: #a62b20;
  --red-dark: #832017;
  --ink: #3a230f;
  --ink-soft: #6b543f;

  --font-head: "Providence Sans", "Trebuchet MS", sans-serif;
  --track-head: -0.03em;
  --font-body: "Figtree", system-ui, sans-serif;

  --gutter: 16px;
  --col: 460px;
  /* eine Streifenperiode: auf dem Handy 18 % der Breite, am Desktop gedeckelt */
  --box-ink: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 52%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M13 4C50 2.500 115 5.500 177 3C185 2.500 189 9 188 15C187 23 189 33 187.500 41C187 46 181 48 174 47C120 49 60 46 15 47.500C7 48 2.500 44 3 36C3.500 28 2 17 3.500 10C4 6 8 4.500 13 4Z%22 stroke=%22%233a230f%22 stroke-width=%221.8%22 fill=%22none%22 vector-effect=%22non-scaling-stroke%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M11 3C70 5 128 2.500 182 4C188 5 188.500 13 188 21C187.500 30 188 38 187 43C186 48 178 48.500 168 48C114 46 58 49 15 47C6 46 3.500 42 2.800 34C2.200 24 3 14 3 8%22 stroke=%22%233a230f%22 stroke-width=%221.8%22 fill=%22none%22 vector-effect=%22non-scaling-stroke%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22/%3E%3C/svg%3E");
  --box-ink-fill: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 52%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M13 4C50 2.500 115 5.500 177 3C185 2.500 189 9 188 15C187 23 189 33 187.500 41C187 46 181 48 174 47C120 49 60 46 15 47.500C7 48 2.500 44 3 36C3.500 28 2 17 3.500 10C4 6 8 4.500 13 4Z%22 fill=%22%233a230f%22 stroke=%22none%22/%3E%3Cpath d=%22M13 4C50 2.500 115 5.500 177 3C185 2.500 189 9 188 15C187 23 189 33 187.500 41C187 46 181 48 174 47C120 49 60 46 15 47.500C7 48 2.500 44 3 36C3.500 28 2 17 3.500 10C4 6 8 4.500 13 4Z%22 stroke=%22%233a230f%22 stroke-width=%221.8%22 fill=%22none%22 vector-effect=%22non-scaling-stroke%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M11 3C70 5 128 2.500 182 4C188 5 188.500 13 188 21C187.500 30 188 38 187 43C186 48 178 48.500 168 48C114 46 58 49 15 47C6 46 3.500 42 2.800 34C2.200 24 3 14 3 8%22 stroke=%22%233a230f%22 stroke-width=%221.8%22 fill=%22none%22 vector-effect=%22non-scaling-stroke%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22/%3E%3C/svg%3E");
  --box-red: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 52%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M13 4C50 2.500 115 5.500 177 3C185 2.500 189 9 188 15C187 23 189 33 187.500 41C187 46 181 48 174 47C120 49 60 46 15 47.500C7 48 2.500 44 3 36C3.500 28 2 17 3.500 10C4 6 8 4.500 13 4Z%22 fill=%22%23a62b20%22 stroke=%22none%22/%3E%3Cpath d=%22M13 4C50 2.500 115 5.500 177 3C185 2.500 189 9 188 15C187 23 189 33 187.500 41C187 46 181 48 174 47C120 49 60 46 15 47.500C7 48 2.500 44 3 36C3.500 28 2 17 3.500 10C4 6 8 4.500 13 4Z%22 stroke=%22%23a62b20%22 stroke-width=%221.8%22 fill=%22none%22 vector-effect=%22non-scaling-stroke%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M11 3C70 5 128 2.500 182 4C188 5 188.500 13 188 21C187.500 30 188 38 187 43C186 48 178 48.500 168 48C114 46 58 49 15 47C6 46 3.500 42 2.800 34C2.200 24 3 14 3 8%22 stroke=%22%23a62b20%22 stroke-width=%221.8%22 fill=%22none%22 vector-effect=%22non-scaling-stroke%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22/%3E%3C/svg%3E");
  --box-red-dark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 52%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M13 4C50 2.500 115 5.500 177 3C185 2.500 189 9 188 15C187 23 189 33 187.500 41C187 46 181 48 174 47C120 49 60 46 15 47.500C7 48 2.500 44 3 36C3.500 28 2 17 3.500 10C4 6 8 4.500 13 4Z%22 fill=%22%23832017%22 stroke=%22none%22/%3E%3Cpath d=%22M13 4C50 2.500 115 5.500 177 3C185 2.500 189 9 188 15C187 23 189 33 187.500 41C187 46 181 48 174 47C120 49 60 46 15 47.500C7 48 2.500 44 3 36C3.500 28 2 17 3.500 10C4 6 8 4.500 13 4Z%22 stroke=%22%23832017%22 stroke-width=%221.8%22 fill=%22none%22 vector-effect=%22non-scaling-stroke%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M11 3C70 5 128 2.500 182 4C188 5 188.500 13 188 21C187.500 30 188 38 187 43C186 48 178 48.500 168 48C114 46 58 49 15 47C6 46 3.500 42 2.800 34C2.200 24 3 14 3 8%22 stroke=%22%23832017%22 stroke-width=%221.8%22 fill=%22none%22 vector-effect=%22non-scaling-stroke%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22/%3E%3C/svg%3E");
  --scribble-line: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 8%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M2 4.500C60 3 120 5.500 200 4.200S340 3.500 398 4.500%22 fill=%22none%22 stroke=%22%233a230f%22 stroke-width=%221.4%22 vector-effect=%22non-scaling-stroke%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --stripe: min(18vw, 96px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  /* Streifen aus Background.png, als CSS nachgebaut. Die Papiertextur liegt als
     oberste Ebene nur auf dem Hintergrund; Kopf, Karten und der rote Bereich decken sie ab. */
  background-color: var(--sky);
  background-image:
    url("../img/paper.png"),
    linear-gradient(90deg, var(--sky) 0 25%, var(--olive) 25% 75%, var(--sky) 75% 100%);
  background-size: 512px 512px, var(--stripe) 100%;
  background-position: 0 0, center top;
  background-repeat: repeat, repeat-x;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  letter-spacing: var(--track-head);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.1;
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Kopfbereich */

.masthead {
  background: var(--cream);
  padding: 22px var(--gutter) 24px;
  text-align: center;
}

.masthead h1 {
  font-weight: 700;
  letter-spacing: -0.06em;
  font-size: clamp(2.25rem, 10vw, 3.25rem);
  color: var(--red);
}

.band {
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--red) 0 12px, var(--sky) 12px 24px);
}

/* Produkte */

.shop {
  width: 76%;
  max-width: var(--col);
  margin-inline: auto;
  padding-block: 28px 140px;
}

.intro {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--cream);
  font-size: 0.9375rem;
}

.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
}

.product,
.empty {
  background: var(--cream);
  padding: 7% 7% 6%;
}

.product__image {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.97;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-head);
  letter-spacing: var(--track-head);
  font-size: 1.125rem;
  overflow: hidden;
}

.product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}

.product__title {
  font-size: 1.375rem;
  line-height: 1.15;
}

.product__price {
  font-family: var(--font-head);
  letter-spacing: var(--track-head);
  font-size: 1.25rem;
  white-space: nowrap;
}

.product__link {
  display: inline-block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.875rem;
  text-underline-offset: 3px;
}

.product__rule {
  height: 8px;
  border: 0;
  margin: 12px 0 14px;
  background: var(--scribble-line) center / 100% 100% no-repeat;
}

/* Button: Text bleibt gerade, nur Rahmen und Fläche (::before) wackeln wie von Hand gezeichnet */
.btn {
  position: relative;
  isolation: isolate;
  display: block;
  margin-inline: auto;
  font-family: var(--font-head);
  letter-spacing: var(--track-head);
  font-size: 1.0625rem;
  font-synthesis: none;
  border: 0;
  background: none;
  color: var(--ink);
  min-height: 48px;
  min-width: 150px;
  padding: 0 24px;
  cursor: pointer;
}

.btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: var(--box-ink) center / 100% 100% no-repeat;
}

.btn[aria-pressed="true"] {
  color: var(--cream);
}

.btn[aria-pressed="true"]::before {
  background-image: var(--box-ink-fill);
}

.btn--primary {
  color: var(--cream);
}

.btn--primary::before {
  background-image: var(--box-red);
}

.btn--primary:hover::before {
  background-image: var(--box-red-dark);
}

.btn--quiet {
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
}

.btn--quiet::before {
  background: none;
}

.shoplink {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--red);
  text-underline-offset: 3px;
}

/* Admin */

.panel {
  background: var(--cream);
  padding: 7% 7% 6%;
  margin-bottom: 32px;
}

.panel h2 {
  font-size: 1.5rem;
  color: var(--red);
  margin-bottom: 16px;
}

#item-dialog .field {
  margin-top: 18px;
}

.sheet .btn--primary {
  margin-top: 8px;
}

.admin-top {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 24px;
}

.admin-top .intro {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
}

.btn--plus {
  flex: none;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  margin: 0;
  font-size: 2rem;
  line-height: 1;
}

.photo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.btn--small {
  min-height: 40px;
  min-width: 0;
  padding: 0 16px;
  font-size: 1rem;
}

.admin-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.admin-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--cream);
}

.admin-item__body {
  min-width: 0;
  flex: 1;
}

.admin-item__meta,
.admin-item__status {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.admin-item__status.is-sold {
  color: var(--red);
  font-weight: 600;
}

.admin-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-item__actions .btn {
  margin-inline: 0;
}

.admin-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--cream);
}

.admin-foot .btn {
  margin-inline: 0;
}

/* Schon vergeben */

.taken {
  background: var(--red);
  color: var(--cream);
  padding: 36px var(--gutter) 140px;
}

.taken h2 {
  font-size: clamp(2rem, 9vw, 2.75rem);
  text-align: center;
}

.taken__list {
  list-style: none;
  margin: 28px auto 0;
  padding: 0;
  max-width: var(--col);
  display: grid;
  gap: 16px;
}

.taken__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--cream);
  color: var(--ink);
}

.taken__thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-head);
  letter-spacing: var(--track-head);
  font-size: 0.8125rem;
  text-align: center;
  overflow: hidden;
}

.taken__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.taken__title {
  font-family: var(--font-head);
  letter-spacing: var(--track-head);
  font-size: 1.25rem;
  line-height: 1.15;
}

.taken__by {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.empty h2 {
  font-size: 1.75rem;
  margin-bottom: 6px;
}

/* Korbleiste */

.basketbar {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 2px solid var(--ink);
  transform: translateY(110%);
  transition: transform 0.25s ease-out;
}

.basketbar.is-visible {
  transform: none;
}

.basketbar__inner {
  max-width: var(--col);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.basketbar__inner .btn {
  margin-inline: 0;
}

.basketbar__sum {
  line-height: 1.25;
}

.basketbar__sum strong {
  display: block;
}

.basketbar__sum span {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* Korb als Bottom-Sheet */

.sheet {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--col);
  max-height: 92dvh;
  overflow-y: auto;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: var(--cream);
  color: var(--ink);
  padding: 28px 22px calc(24px + env(safe-area-inset-bottom));
}

.sheet[open] {
  animation: sheet-in 0.25s ease-out;
}

.sheet::backdrop {
  background: rgb(58 35 15 / 0.5);
}

@keyframes sheet-in {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}

.sheet h2 {
  font-size: 2rem;
  color: var(--red);
  margin-bottom: 16px;
}

.cart {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.cart__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
}

.cart__name {
  flex: 1;
  line-height: 1.3;
}

.cart__price {
  font-family: var(--font-head);
  letter-spacing: var(--track-head);
  white-space: nowrap;
}

.cart__remove {
  font: inherit;
  width: 44px;
  height: 44px;
  margin: -6px -10px -6px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1.5rem;
  cursor: pointer;
}

.cart__total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-head);
  letter-spacing: var(--track-head);
  font-size: 1.25rem;
  margin-bottom: 24px;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.field input {
  font: inherit;
  width: 100%;
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.field input:focus-visible {
  outline-offset: 4px;
}

.field__error {
  min-height: 1.5em;
  margin: 6px 0 0;
  color: var(--red-dark);
  font-size: 0.9375rem;
}

.sheet .btn--primary {
  width: 100%;
  margin-top: 8px;
}

.sheet__hint {
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.sheet__actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.done p {
  margin: 12px 0 24px;
}

.notice {
  background: var(--sky);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.9375rem;
}

@media (min-width: 720px) {
  .masthead {
    padding-block: 32px 34px;
  }

  .sheet {
    bottom: 32px;
    border-bottom: 2px solid var(--ink);
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}