@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000; font-style: normal; font-display: swap;
}

:root {
  --papier: #FBF6EE;
  --papier-2: #F4ECDF;
  --karte: #FFFDF9;
  --tinte: #2F3B32;
  --tinte-2: #5E6B60;
  --moos: #3E5641;
  --salbei: #8DAA91;
  --salbei-hell: #E2EBDF;
  --lavendel: #A996CF;
  --lavendel-hell: #EEE8F7;
  --rose: #D99A93;
  --rose-hell: #F8E6E2;
  --butter: #F1D78C;
  --butter-hell: #FBF1D3;
  --terrakotta: #B5523B;
  --tod: #7A2E2A;
  --linie: #E6DCCB;
  --schatten: 0 1px 2px rgb(62 86 65 / .06), 0 6px 20px -8px rgb(62 86 65 / .18);
  --radius: 18px;
  --kopf: "Fraunces", Georgia, serif;
  --text: "Nunito", system-ui, sans-serif;
  --unten: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  font: 16px/1.5 var(--text); color: var(--tinte);
  background-color: var(--papier);
  background-image:
    radial-gradient(circle at 12% 8%, rgb(169 150 207 / .14), transparent 32%),
    radial-gradient(circle at 92% 18%, rgb(141 170 145 / .16), transparent 30%),
    radial-gradient(circle at 70% 96%, rgb(217 154 147 / .10), transparent 30%),
    radial-gradient(rgb(62 86 65 / .05) 1px, transparent 1.2px);
  background-size: auto, auto, auto, 18px 18px;
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--kopf); font-weight: 560; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--moos); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
a { color: var(--moos); }
em.latein, .latein { font-family: var(--kopf); font-style: italic; color: var(--tinte-2); font-weight: 400; }
img { max-width: 100%; display: block; }
svg { width: 1.3em; height: 1.3em; flex: none; }
[hidden] { display: none !important; }

#app { max-width: 1080px; margin: 0 auto; padding: 16px 16px calc(110px + var(--unten)); }

/* ── Laden ───────────────────────────── */
.laden { display: grid; place-items: center; min-height: 60dvh; }
.laden-pilz { width: 72px; height: 72px; animation: wippen 1.6s ease-in-out infinite; }
@keyframes wippen { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } }

/* ── Kopf ────────────────────────────── */
.kopf { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.kopf .logo { width: 54px; height: 54px; filter: drop-shadow(0 4px 6px rgb(217 154 147 / .35)); }
.kopf h1 { margin: 0; }
.kopf p { margin: 0; color: var(--tinte-2); font-size: .95rem; }
.kopf .rechts { margin-left: auto; }
.zurueck { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--tinte-2); font-weight: 700; margin-bottom: 8px; background: none; border: 0; font: inherit; cursor: pointer; padding: 6px 0; }

.funkeln { color: var(--butter); width: 18px; height: 18px; display: inline-block; vertical-align: -2px; }
.funkeln.lila { color: var(--lavendel); }

.welle { height: 10px; margin: 18px 0; background: radial-gradient(circle at 10px -4px, transparent 8px, var(--linie) 8.5px, var(--linie) 9.5px, transparent 10px) 0 0 / 20px 10px repeat-x; opacity: .9; }

/* ── Knöpfe ──────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--moos);
  background: var(--moos); color: #FFFDF8; font: 700 1rem var(--text); cursor: pointer;
  text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s;
  box-shadow: 0 3px 0 rgb(62 86 65 / .25);
}
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(1px); box-shadow: 0 1px 0 rgb(62 86 65 / .25); }
.knopf.zart { background: var(--karte); color: var(--moos); border-color: var(--linie); box-shadow: 0 2px 0 var(--linie); }
.knopf.lila { background: var(--lavendel); border-color: var(--lavendel); box-shadow: 0 3px 0 rgb(169 150 207 / .45); }
.knopf.warn { background: var(--karte); color: var(--terrakotta); border-color: rgb(181 82 59 / .4); box-shadow: none; }
.knopf.klein { padding: 7px 12px; font-size: .9rem; }
.knopf.breit { width: 100%; }
.knopf[disabled] { opacity: .55; pointer-events: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── Karten & Flächen ────────────────── */
.flaeche { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; box-shadow: var(--schatten); }
.flaeche + .flaeche { margin-top: 16px; }
.flaeche h2 { display: flex; align-items: center; gap: 8px; }

.statistik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.statistik div { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 12px; text-align: center; }
.statistik div:nth-child(1) { background: var(--salbei-hell); border-color: transparent; }
.statistik div:nth-child(2) { background: var(--lavendel-hell); border-color: transparent; }
.statistik div:nth-child(3) { background: var(--butter-hell); border-color: transparent; }
.statistik b { display: block; font: 600 1.7rem/1.1 var(--kopf); color: var(--moos); }
.statistik span { font-size: .82rem; color: var(--tinte-2); font-weight: 700; }

/* ── Chips ───────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.chips.rollen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; }
.chips.rollen::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--linie);
  background: var(--karte); color: var(--tinte); font: 700 .9rem var(--text); cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"], .chip.an { background: var(--moos); color: #FFFDF8; border-color: var(--moos); }
.chip .punkt { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .12); }

.suche { position: relative; margin-bottom: 12px; }
.suche svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tinte-2); }
.suche input[type=search] { padding-left: 44px; }

/* ── Fundbuch-Raster (Polaroids) ─────── */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px 14px; }
.polaroid {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: #FFFEFB; padding: 8px 8px 12px; border-radius: 6px;
  box-shadow: 0 1px 1px rgb(0 0 0 / .05), 0 10px 22px -12px rgb(62 86 65 / .35);
  transform: rotate(var(--dreh, 0deg)); transition: transform .18s ease;
}
.polaroid:nth-child(3n+1) { --dreh: -1.2deg; }
.polaroid:nth-child(3n+2) { --dreh: .9deg; }
.polaroid:nth-child(4n) { --dreh: -.5deg; }
.polaroid:hover { transform: rotate(0) translateY(-3px); }
.polaroid::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 20px; transform: translateX(-50%) rotate(-3deg);
  background: var(--band, rgb(169 150 207 / .55)); border-radius: 2px; opacity: .85;
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
}
.polaroid:nth-child(4n+2)::before { --band: rgb(141 170 145 / .6); transform: translateX(-50%) rotate(2deg); }
.polaroid:nth-child(4n+3)::before { --band: rgb(241 215 140 / .75); }
.polaroid:nth-child(4n)::before { --band: rgb(217 154 147 / .5); transform: translateX(-50%) rotate(4deg); }
.polaroid .bild { aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: var(--papier-2); display: grid; place-items: center; }
.polaroid .bild img { width: 100%; height: 100%; object-fit: cover; }
.polaroid .bild svg { width: 46%; height: 46%; opacity: .5; }
.polaroid h3 { font-size: 1.02rem; margin: 10px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polaroid .unter { margin: 4px 2px 0; font-size: .8rem; color: var(--tinte-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.polaroid .herz { position: absolute; top: 14px; right: 14px; color: var(--rose); fill: var(--rose); width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .3)); }
.polaroid .warte { position: absolute; top: 14px; left: 14px; background: var(--butter); color: var(--tinte); font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; }

.leer { text-align: center; padding: 34px 18px; }
.leer svg { width: 110px; height: 110px; margin-bottom: 8px; }
.leer p { color: var(--tinte-2); max-width: 30em; margin: 0 auto 18px; }

/* ── Essbarkeit ──────────────────────── */
.ess { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap; letter-spacing: .01em; }
.ess-essbar { background: var(--salbei-hell); color: #2F5A37; }
.ess-bedingt { background: var(--butter-hell); color: #7A5A12; }
.ess-ungeniessbar { background: #ECE9E4; color: #5D5A55; }
.ess-giftig { background: #F7DED6; color: var(--terrakotta); }
.ess-toedlich { background: var(--tod); color: #FFF4EF; }
.ess-unbestimmt { background: var(--lavendel-hell); color: #5B4A86; }

.sicher { font-size: .75rem; font-weight: 800; color: var(--tinte-2); }

/* ── Warnungen ───────────────────────── */
.achtung { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; font-size: .92rem; background: var(--butter-hell); border: 1px solid #EBD9A2; }
.achtung svg { color: #9A7314; margin-top: 2px; }
.achtung.giftig { background: #F9E5DF; border-color: #EBC1B5; }
.achtung.giftig svg { color: var(--terrakotta); }
.achtung.toedlich { background: var(--tod); border-color: var(--tod); color: #FFF4EF; }
.achtung.toedlich svg { color: #FFD7C9; }
.achtung p { margin: 0; }
.achtung p + p { margin-top: 4px; }

/* ── Formulare ───────────────────────── */
label { display: block; font-weight: 800; font-size: .88rem; color: var(--moos); margin: 0 0 6px; }
.feld { margin-bottom: 14px; }
.feld small { display: block; color: var(--tinte-2); font-size: .8rem; margin-top: 4px; }
input[type=text], input[type=password], input[type=search], input[type=datetime-local], input[type=date], input:not([type]), textarea, select {
  width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--linie);
  background: #FFFEFB; color: var(--tinte); font: 1rem var(--text); outline: none; transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--lavendel); box-shadow: 0 0 0 4px rgb(169 150 207 / .2); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .zwei { grid-template-columns: 1fr; } }

.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label { margin: 0; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--karte); font-weight: 700; color: var(--tinte); cursor: pointer; font-size: .9rem; display: inline-flex; gap: 6px; align-items: center; }
.wahl input:checked + label { background: var(--lavendel-hell); border-color: var(--lavendel); color: #4A3B75; }
.wahl input:focus-visible + label { box-shadow: 0 0 0 3px rgb(169 150 207 / .35); }

/* Fotos im Formular */
.fotoreihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.fotoreihe .foto { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--papier-2); }
.fotoreihe .foto img { width: 100%; height: 100%; object-fit: cover; }
.fotoreihe .foto button { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgb(255 253 249 / .92); color: var(--tinte); display: grid; place-items: center; cursor: pointer; }
.fotoreihe .foto button svg { width: 16px; height: 16px; }
.fotoreihe .foto .erst { position: absolute; left: 6px; bottom: 6px; font-size: .68rem; font-weight: 800; background: var(--butter); border-radius: 999px; padding: 1px 7px; }
.fotoneu { aspect-ratio: 1; border: 2px dashed var(--salbei); border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--moos); font-weight: 800; font-size: .8rem; cursor: pointer; background: rgb(226 235 223 / .5); text-align: center; padding: 6px; }
.fotoneu svg { width: 28px; height: 28px; }
.fotoneu input { display: none; }

/* Karte */
.minikarte { height: 230px; border-radius: 16px; overflow: hidden; border: 1px solid var(--linie); z-index: 0; }
.grosskarte { height: calc(100dvh - 210px - var(--unten)); min-height: 340px; border-radius: 20px; overflow: hidden; border: 1px solid var(--linie); box-shadow: var(--schatten); z-index: 0; }
.ortzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: .85rem; color: var(--tinte-2); }
.pilzmarke { background: none; border: 0; }
.pilzmarke div { width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; background: var(--karte); border: 2px solid var(--moos); box-shadow: 0 3px 8px rgb(0 0 0 / .2); }
.pilzmarke svg { transform: rotate(45deg); width: 22px; height: 22px; }
.leaflet-popup-content-wrapper { border-radius: 16px; font-family: var(--text); }
.leaflet-popup-content { margin: 10px 12px; }
.popfund { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--tinte); min-width: 180px; }
.popfund img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.popfund b { font-family: var(--kopf); color: var(--moos); font-size: 1rem; display: block; }

/* Reiter */
.reiter { display: flex; background: var(--papier-2); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 14px; }
.reiter button { flex: 1; border: 0; background: none; padding: 9px 6px; border-radius: 999px; font: 800 .88rem var(--text); color: var(--tinte-2); cursor: pointer; }
.reiter button[aria-selected="true"] { background: var(--karte); color: var(--moos); box-shadow: 0 1px 4px rgb(62 86 65 / .15); }

/* Gewählte Art */
.gewaehlt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--lavendel-hell); margin-bottom: 12px; }
.gewaehlt svg.p { width: 40px; height: 40px; }
.gewaehlt b { font-family: var(--kopf); font-size: 1.15rem; color: var(--moos); display: block; }
.gewaehlt .x { margin-left: auto; }

/* Treffer (Schlüssel, Erkennung, Suche) */
.treffer { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.treffer li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #FFFEFB; border: 1px solid var(--linie); }
.treffer .name { flex: 1; min-width: 0; }
.treffer .name b { display: block; font-family: var(--kopf); font-weight: 560; color: var(--moos); }
.treffer .name span { font-size: .85rem; }
.balken { height: 6px; border-radius: 99px; background: var(--papier-2); overflow: hidden; margin-top: 5px; }
.balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--salbei), var(--lavendel)); border-radius: 99px; }
.treffer .mini { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; }

.merkmal { margin-bottom: 14px; }
.merkmal > span { display: block; font-weight: 800; font-size: .85rem; color: var(--moos); margin-bottom: 6px; }

/* Detail */
.galerie { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 20px; margin-bottom: 16px; scrollbar-width: none; }
.galerie::-webkit-scrollbar { display: none; }
.galerie img { flex: 0 0 100%; aspect-ratio: 4/3; object-fit: cover; scroll-snap-align: center; border-radius: 20px; cursor: zoom-in; background: var(--papier-2); }
@media (min-width: 760px) { .galerie img { flex-basis: 70%; } }
.galerie-punkte { display: flex; justify-content: center; gap: 6px; margin: -6px 0 14px; }
.galerie-punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--linie); }
.galerie-punkte i.an { background: var(--lavendel); }
.fakten { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: .95rem; }
.fakten dt { font-weight: 800; color: var(--tinte-2); font-size: .85rem; padding-top: 2px; }
.fakten dd { margin: 0; }
.detail-raster { display: grid; gap: 16px; }
@media (min-width: 860px) { .detail-raster { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.vollbild { position: fixed; inset: 0; background: rgb(30 36 31 / .92); z-index: 1000; display: grid; place-items: center; padding: 16px; }
.vollbild img { max-height: 100%; max-width: 100%; border-radius: 10px; }

/* Lexikon */
.artliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.artkarte { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; text-decoration: none; color: inherit; cursor: pointer; text-align: left; font: inherit; width: 100%; }
.artkarte svg { width: 38px; height: 38px; }
.artkarte b { display: block; font-family: var(--kopf); font-weight: 560; color: var(--moos); }
.artkarte .latein { font-size: .85rem; }
.monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 4px; }
.monate i { height: 22px; border-radius: 6px; background: var(--papier-2); font-style: normal; font-size: .62rem; font-weight: 800; display: grid; place-items: center; color: var(--tinte-2); }
.monate i.an { background: var(--salbei); color: #FFFDF8; }
.monate i.jetzt { outline: 2px solid var(--lavendel); outline-offset: 1px; }

/* Dialog */
dialog { border: 0; border-radius: 24px; padding: 0; max-width: min(560px, calc(100vw - 24px)); width: 100%; background: var(--karte); color: var(--tinte); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .45); }
dialog::backdrop { background: rgb(47 59 50 / .45); backdrop-filter: blur(2px); }
dialog .innen { padding: 22px; max-height: 85dvh; overflow: auto; }
dialog .schliessen { float: right; background: var(--papier-2); border: 0; border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; color: var(--tinte); }

/* Anmeldung */
.anmeldung { max-width: 420px; margin: 6vh auto 0; text-align: center; }
.anmeldung .logo { width: 96px; height: 96px; margin: 0 auto 4px; filter: drop-shadow(0 8px 12px rgb(217 154 147 / .4)); animation: wippen 4s ease-in-out infinite; }
.anmeldung .flaeche { text-align: left; margin-top: 18px; }
.anmeldung h1 { margin-bottom: 4px; }
.anmeldung > p { color: var(--tinte-2); margin: 0; }
.fehler { color: var(--terrakotta); font-weight: 700; font-size: .9rem; margin: 6px 0 10px; min-height: 1.2em; }

/* Untere Leiste */
.leiste {
  position: fixed; left: 50%; bottom: calc(12px + var(--unten)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 6px; z-index: 50;
  background: rgb(255 253 249 / .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--linie); border-radius: 999px; box-shadow: 0 12px 30px -12px rgb(62 86 65 / .4);
  width: min(460px, calc(100vw - 20px));
}
.leiste a { flex: 1; display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 999px; text-decoration: none; color: var(--tinte-2); font-size: .68rem; font-weight: 800; }
.leiste a svg { width: 22px; height: 22px; }
.leiste a.an { color: var(--moos); background: var(--salbei-hell); }
.leiste .leiste-plus { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: var(--rose); color: #FFFDF8; margin: -18px 4px 0; box-shadow: 0 8px 16px -6px rgb(217 154 147 / .8), inset 0 -3px 0 rgb(0 0 0 / .08); border: 3px solid var(--papier); }
.leiste .leiste-plus svg { width: 26px; height: 26px; }
.leiste .leiste-plus.an { background: var(--lavendel); color: #FFFDF8; }

.toast { position: fixed; left: 50%; bottom: calc(96px + var(--unten)); transform: translateX(-50%); background: var(--moos); color: #FFFDF8; padding: 10px 18px; border-radius: 999px; font-weight: 700; z-index: 2000; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .4); max-width: calc(100vw - 32px); text-align: center; }
.toast.fehler-toast { background: var(--terrakotta); }

.fussnote { text-align: center; color: var(--tinte-2); font-size: .8rem; margin-top: 30px; }
.fussnote svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--salbei); }
.zeile-zwischen { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dezent { color: var(--tinte-2); font-size: .88rem; }
.monat-titel { font-family: var(--kopf); font-style: italic; color: var(--tinte-2); margin: 22px 0 12px; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.monat-titel::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

@media (min-width: 760px) {
  #app { padding-top: 28px; }
  .raster { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
svg.gross { width: 52px; height: 52px; }
.pin { font-size: 1.6rem !important; letter-spacing: .4em; text-align: center; }