@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..700;1,62..125,400..700&family=Young+Serif&display=swap");

/* ==========================================================================
   Heidehonig Imkerei Brammer — „Das Glasetikett“
   Heidekraut-Violett und Bienenwachs; Young Serif für Namen,
   Archivo (schmal) für Etikettangaben, Archivo (normal) für Lesetext.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --heide: #4a1f4f;          /* Heidekraut: Flächen, Überschriften, Links */
  --heide-mittel: #7b3f7e;   /* Hover, Fokus auf Papier, Heidestiele */
  --bluete: #cb97c4;         /* Heideblüte: nur auf Heidekraut */
  --wachs: #e7c25e;          /* Bienenwachs: Etikett, Hauptknopf */
  --wachs-hell: #f2dc98;     /* Hover auf Wachs, Lückenmarkierung */
  --papier: #fcf8ee;         /* Etikettpapier: Seitengrund */
  --tinte: #2a1430;          /* Text, Linien, Regalbrett */
  --tinte-grau: #5f4d63;     /* Nebentext */
  --linie: rgb(42 20 48 / 0.22);
  --linie-hell: rgb(252 248 238 / 0.22);
  --heide-hauch: #f4eaf1;      /* Hinweisgrund: ein Hauch Heidekraut */

  /* Sortenfarben: echte Honigfarben, nur wo die Sorte gemeint ist */
  --honig-linde: #dcc77a;
  --honig-heide: #a2561d;
  --honig-wald: #553219;

  /* Zustände */
  --fehler: #9e2a2b;
  --fehler-grund: #f8e9e7;
  --erfolg: #3f5e2a;
  --erfolg-grund: #eef2e6;
  --warten-grund: #f3ecf2;

  --fokus: var(--heide-mittel);

  /* Schrift */
  --schrift-name: "Young Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --schrift-text: "Archivo", "Arial Nova", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;

  --t-sorte: clamp(2.6rem, 10.5vw, 8rem);
  --t-h2: clamp(1.9rem, 4.4vw, 3.2rem);
  --t-tage: clamp(1.7rem, 3.6vw, 2.6rem);
  --t-h3: 1.25rem;
  --t-lead: clamp(1.15rem, 1.8vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-angabe: 0.9rem;
  --t-klein: 0.875rem;

  /* Raum */
  --rand: clamp(1.25rem, 4vw, 3rem);
  --breite: 74rem;
  --abstand-sektion: clamp(3.5rem, 8vw, 6.5rem);
  --abstand-kopf: clamp(1.75rem, 3.5vw, 2.75rem);
  --mass: 62ch;

  --radius-knopf: 0.3rem;
  --strich: 2px;
  --dauer: 160ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* ---------- Grundtypografie ---------- */
body {
  min-height: 100vh;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-body);
  font-stretch: 100%;
  line-height: 1.62;
  font-kerning: normal;
  overflow-x: clip;
}

h1,
h2,
h3 {
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--schrift-name);
  font-weight: 400;
  color: var(--heide);
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--schrift-text);
  font-size: var(--t-h3);
  font-weight: 650;
  font-stretch: 90%;
  line-height: 1.25;
  letter-spacing: 0.002em;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 650;
}

a {
  color: var(--heide);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--heide-mittel);
  text-decoration-thickness: 2.5px;
}

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

::selection {
  background: var(--wachs);
  color: var(--tinte);
}

/* ---------- Hilfsklassen ---------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 50;
  padding: 0.75rem 1.1rem;
  background: var(--wachs);
  color: var(--tinte);
  font-weight: 650;
  text-decoration: none;
  border: var(--strich) solid var(--tinte);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

/* ---------- Kopf ---------- */
.kopf {
  --fokus: var(--wachs);
  position: relative;
  z-index: 20;
  background: var(--heide);
  color: var(--papier);
}

.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1rem;
}

.kopf__marke {
  display: grid;
  gap: 0.1rem;
  color: var(--papier);
  text-decoration: none;
}

.kopf__marke:hover {
  color: var(--papier);
}

.kopf__name {
  font-family: var(--schrift-name);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.1;
}

.kopf__zusatz {
  font-size: var(--t-klein);
  font-stretch: 78%;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bluete);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  color: var(--papier);
  border: 1.5px solid var(--papier);
  border-radius: var(--radius-knopf);
  font-weight: 600;
  font-stretch: 88%;
}

.nav-toggle__zeichen {
  display: grid;
  gap: 4px;
  width: 1.1rem;
}

.nav-toggle__zeichen span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__zeichen span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__zeichen span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__zeichen span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

#site-nav {
  display: none;
  flex-basis: 100%;
}

#site-nav[data-open="true"] {
  display: block;
}

.nav__liste {
  list-style: none;
  display: grid;
  border-top: 1px solid var(--linie-hell);
}

.nav__liste li {
  border-bottom: 1px solid var(--linie-hell);
}

.nav__link {
  display: block;
  padding: 0.85rem 0.1rem;
  color: var(--papier);
  font-size: 1.15rem;
  font-weight: 550;
  text-decoration: none;
}

.nav__link:hover {
  color: var(--wachs);
}

.nav__link[aria-current="page"] {
  color: var(--wachs);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}

.nav__link--laden {
  color: var(--wachs);
}

/* ---------- Sektionen: der einzige Ort für Sektionsabstand ---------- */
.abschnitt {
  padding-block: var(--abstand-sektion);
}

.abschnitt--heide {
  --fokus: var(--wachs);
  background: var(--heide);
  color: var(--papier);
}

.abschnitt--heide h2 {
  color: var(--papier);
}

.abschnitt--heide a:not([class]) {
  color: var(--papier);
}

.abschnitt--heide a:not([class]):hover {
  color: var(--wachs);
}

.abschnitt__kopf {
  max-width: 50rem;
  margin-bottom: var(--abstand-kopf);
}

.abschnitt__lead {
  margin-top: 1rem;
  max-width: 48ch;
  font-size: var(--t-lead);
  line-height: 1.5;
}

.abschnitt__raster > .abschnitt__kopf {
  margin-bottom: 0;
}

.abschnitt__raster {
  display: grid;
  gap: var(--abstand-kopf) clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* ---------- Etikett (Hero und Seitenköpfe) ---------- */
.hero {
  overflow-x: clip;
}

.hero__raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.etikett {
  --ecke: clamp(0.9rem, 2.4vw, 1.6rem);
  --e: var(--ecke);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  padding: clamp(1.9rem, 5vw, 3.4rem) clamp(1.4rem, 4.5vw, 3.4rem);
  background: var(--wachs);
  color: var(--tinte);
  text-align: center;
  rotate: -0.6deg;
}

.etikett,
.etikett::before,
.etikett::after {
  clip-path: polygon(
    var(--e) 0,
    calc(100% - var(--e)) 0,
    100% var(--e),
    100% calc(100% - var(--e)),
    calc(100% - var(--e)) 100%,
    var(--e) 100%,
    0 calc(100% - var(--e)),
    0 var(--e)
  );
}

/* Druckrahmen: Tintenfläche, darüber Wachsfläche — ergibt eine Linie mit abgeschrägten Ecken */
.etikett::before,
.etikett::after {
  content: "";
  position: absolute;
  z-index: -1;
}

.etikett::before {
  --e: calc(var(--ecke) - 0.32rem);
  inset: 0.55rem;
  background: var(--tinte);
}

.etikett::after {
  --e: calc(var(--ecke) - 0.32rem - 1px);
  inset: calc(0.55rem + 1.5px);
  background: var(--wachs);
}

.etikett__kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  justify-content: center;
  font-size: var(--t-angabe);
  font-stretch: 78%;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.etikett__kopf::before,
.etikett__kopf::after {
  content: "";
  flex: 0 1 3rem;
  height: 1.5px;
  background: currentColor;
}

.etikett__sorte {
  margin-top: 0.9rem;
  font-size: clamp(2.4rem, 9vw, 6rem);
  font-size: clamp(2.4rem, 15.5cqi, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--heide);
  hyphens: manual;
}

.etikett__zusatz {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--schrift-text);
  font-size: clamp(1rem, 3.6cqi, 1.4rem);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--tinte);
}

.etikett__angaben {
  display: grid;
  margin-top: clamp(1.4rem, 4cqi, 2.2rem);
  border-top: 1.5px solid var(--tinte);
  font-size: var(--t-angabe);
  font-stretch: 80%;
  line-height: 1.35;
}

.etikett__feld {
  padding: 0.7rem 0.4rem 0;
}

.etikett__feld + .etikett__feld {
  border-top: 1px solid var(--linie);
  margin-top: 0.7rem;
}

.etikett__feld dt {
  font-weight: 700;
}

.etikett__feld dd {
  font-weight: 450;
}

.etikett--klein {
  --ecke: clamp(0.8rem, 2vw, 1.2rem);
  max-width: 46rem;
  margin-inline: auto;
}

.etikett--klein .etikett__sorte {
  font-size: clamp(2rem, 8vw, 4.2rem);
  font-size: clamp(2rem, 9.5cqi, 4.6rem);
  line-height: 1;
  hyphens: auto;
}

/* Ladentage neben dem Etikett */
.hero__laden {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

.hero__vorzeile {
  font-size: var(--t-angabe);
  font-stretch: 78%;
  font-weight: 600;
  color: var(--bluete);
}

.ladentage {
  list-style: none;
  display: grid;
  width: 100%;
  max-width: 22rem;
}

.ladentage li {
  padding-block: 0.35rem 0.45rem;
  font-family: var(--schrift-name);
  font-size: var(--t-tage);
  line-height: 1.05;
  color: var(--wachs);
  border-bottom: 1px solid var(--linie-hell);
}

.hero__text {
  max-width: 34ch;
}

.heidesaum {
  height: 72px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: calc(-1 * var(--abstand-sektion));
  background: url("heidesaum.svg") left bottom / auto 72px repeat-x;
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.7rem 1.25rem;
  border: var(--strich) solid var(--tinte);
  border-radius: var(--radius-knopf);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 650;
  font-stretch: 92%;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.knopf svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.knopf--wachs {
  background: var(--wachs);
  color: var(--tinte);
}

.knopf--wachs:hover {
  background: var(--wachs-hell);
  color: var(--tinte);
  text-decoration: none;
}

.knopf--linie {
  background: transparent;
  color: var(--heide);
  border-color: var(--heide);
}

.knopf--linie:hover {
  background: var(--heide);
  color: var(--papier);
  text-decoration: none;
}

.knopf--hell {
  background: transparent;
  color: var(--papier);
  border-color: var(--papier);
}

.knopf--hell:hover {
  background: var(--papier);
  color: var(--heide);
  text-decoration: none;
}

.knopf[disabled],
.knopf[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

/* ---------- Fliesstext ---------- */
.text {
  max-width: var(--mass);
}

.text > * + * {
  margin-top: 1.05em;
}

.text > h2 + *,
.text > h3 + * {
  margin-top: 0.6em;
}

.text > * + h2 {
  margin-top: 2.2em;
}

.text > * + h3 {
  margin-top: 1.8em;
}

.text h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
}

.klein {
  font-size: var(--t-klein);
  color: var(--tinte-grau);
}

.abschnitt--heide .klein,
.aufruf .klein,
.muster-probe--heide .klein {
  color: var(--bluete);
}

/* ---------- Listen ---------- */
.liste {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  max-width: var(--mass);
}

.liste li {
  position: relative;
  padding-left: 1.6rem;
}

.liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.9rem;
  height: 2px;
  background: var(--heide);
}

.liste--haken li::before {
  top: 0.3em;
  width: 1.05rem;
  height: 1.05rem;
  background: none;
  border: var(--strich) solid var(--heide);
  border-radius: 0.2rem;
}

.liste--haken li::after {
  content: "";
  position: absolute;
  left: 0.33rem;
  top: 0.42em;
  width: 0.36rem;
  height: 0.62rem;
  border: solid var(--heide);
  border-width: 0 2.5px 2.5px 0;
  rotate: 45deg;
}

/* Echte Reihenfolgen: hier sind Nummern Information */
.schritte {
  list-style: none;
  counter-reset: schritt;
  display: grid;
  gap: 1.5rem;
  max-width: 48rem;
}

.schritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.2rem 1rem;
}

.schritte li::before {
  content: counter(schritt);
  grid-row: span 2;
  font-family: var(--schrift-name);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--heide);
}

/* ---------- Honigjahr ---------- */
.honigjahr {
  --spalten: 1fr;
  display: grid;
  gap: 0;
  border-top: var(--strich) solid var(--tinte);
}

.honigjahr__kopf,
.honigjahr__zeile {
  display: grid;
  grid-template-columns: var(--spalten);
  gap: 0.35rem 2rem;
  align-items: center;
}

.honigjahr__kopf {
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--linie);
}

.honigjahr__monate,
.honigjahr__spur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.honigjahr__monate {
  font-size: 0.8rem;
  font-stretch: 75%;
  font-weight: 600;
  text-align: center;
  color: var(--tinte-grau);
}

.honigjahr__zeilen {
  list-style: none;
}

.honigjahr__zeile {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linie);
}

.honigjahr__sorte {
  font-family: var(--schrift-name);
  font-weight: 400;
  font-stretch: 100%;
  font-size: 1.45rem;
  color: var(--heide);
}

.honigjahr__text {
  max-width: 44ch;
}

.honigjahr__spur {
  height: 1.5rem;
  align-items: center;
  background-image: linear-gradient(to right, var(--linie) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  border-right: 1px solid var(--linie);
}

.honigjahr__balken {
  grid-column: var(--von) / span var(--dauer);
  height: 0.9rem;
  background: var(--honig, var(--heide));
  border: 1.5px solid var(--tinte);
  border-radius: 1px;
}

.honigjahr__zeile--linde { --von: 6; --dauer: 2; --honig: var(--honig-linde); }
.honigjahr__zeile--wald { --von: 6; --dauer: 3; --honig: var(--honig-wald); }
.honigjahr__zeile--heide { --von: 8; --dauer: 2; --honig: var(--honig-heide); }
.honigjahr__zeile--fuehrung { --von: 6; --dauer: 3; }

.honigjahr__zeile--fuehrung .honigjahr__balken {
  height: 0;
  border: 0;
  border-top: 3px dashed var(--heide);
  background: none;
}

.honigjahr__zeile--fuehrung .honigjahr__sorte {
  font-family: var(--schrift-text);
  font-size: 1.1rem;
  font-weight: 650;
  font-stretch: 90%;
}

.honigjahr__notiz {
  margin-top: 1.5rem;
  max-width: var(--mass);
}

/* ---------- Regal ---------- */
.regal {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
}

.regal__fach {
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding-bottom: 2.25rem;
}

.regal__stand {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  height: 9.5rem;
  padding-left: 1.25rem;
  border-bottom: 7px solid var(--tinte);
}

.regal__fach h3 {
  margin-top: 1.1rem;
  padding-right: 1.5rem;
  font-family: var(--schrift-name);
  font-weight: 400;
  font-stretch: 100%;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--heide);
}

.regal__fach p {
  margin-top: 0.5rem;
  padding-right: 1.5rem;
  max-width: 34ch;
}

.glas {
  position: relative;
  display: block;
  width: 6rem;
  height: 7.2rem;
  background: var(--honig, var(--honig-heide));
  border: var(--strich) solid var(--tinte);
  border-radius: 0.45rem 0.45rem 0.9rem 0.9rem;
}

.glas::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  top: -0.95rem;
  height: 0.85rem;
  background: var(--tinte);
  border-radius: 0.2rem 0.2rem 0 0;
}

.glas__etikett {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 30%;
  padding-block: 0.35rem;
  background: var(--papier);
  border-block: var(--strich) solid var(--tinte);
  font-family: var(--schrift-name);
  font-size: 0.95rem;
  line-height: 1.1;
  text-align: center;
  color: var(--heide);
}

.glas--linde { --honig: var(--honig-linde); }
.glas--heide { --honig: var(--honig-heide); }
.glas--wald { --honig: var(--honig-wald); }

/* Wabe nur, wo Wachs ist */
.kerze {
  position: relative;
  display: block;
  width: 2.3rem;
  height: 7.6rem;
  background: var(--wachs) url("wabe.svg") 0 0 / 12px auto;
  border: var(--strich) solid var(--tinte);
  border-radius: 0.25rem 0.25rem 0.15rem 0.15rem;
}

.kerze--kurz {
  height: 5.4rem;
}

.kerze::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.85rem;
  width: 2px;
  height: 0.8rem;
  background: var(--tinte);
  translate: -50% 0;
}

/* ---------- Hofladen / Adresse ---------- */
.adresse {
  font-style: normal;
}

.adresse__gross {
  display: block;
  font-family: var(--schrift-name);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.08;
  color: var(--heide);
}

.adresse__region {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-angabe);
  font-stretch: 80%;
  font-weight: 600;
  color: var(--tinte-grau);
}

.adresse .knoepfe {
  margin-top: 1.5rem;
}

/* ---------- Bienenstand ---------- */
.bienenstand {
  display: grid;
  gap: 1rem;
}

.bienenstand__bild {
  width: 100%;
  height: auto;
}

.beute rect {
  fill: var(--papier);
  stroke: var(--heide);
  stroke-width: 1.5;
}

.beute rect.beute__flugloch {
  fill: var(--heide);
  stroke: none;
}

.beute--pate rect {
  fill: var(--wachs);
  stroke: var(--tinte);
}

.bienenstand figcaption {
  font-size: var(--t-angabe);
  font-stretch: 82%;
  color: var(--tinte-grau);
  max-width: 46ch;
}

/* ---------- Hinweisband ---------- */
.hinweis {
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.25rem, 3vw, 2.4rem);
  border-left: 6px solid var(--heide);
  background: var(--heide-hauch);
}

.hinweis > * + * {
  margin-top: 0.9rem;
}

.hinweis h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
}

.hinweis p {
  max-width: var(--mass);
}

.hinweis--klein {
  padding: 1rem 1.25rem;
  border-left-width: 4px;
}

/* ---------- Kontaktfakten ---------- */
.fakten {
  display: grid;
  border-top: var(--strich) solid var(--tinte);
}

.fakten__feld {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--linie);
}

.fakten__feld dt {
  font-size: var(--t-angabe);
  font-stretch: 78%;
  font-weight: 700;
  color: var(--tinte-grau);
}

.fakten__feld dd {
  margin-top: 0.2rem;
  font-size: 1.15rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.fakten + .knoepfe {
  margin-top: 1.75rem;
}

/* ---------- Kacheln (Unterseiten) ---------- */
.kacheln {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.kachel {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  background: var(--papier);
  border: var(--strich) solid var(--tinte);
  border-radius: 0.2rem;
}

.kachel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.5rem;
  background: var(--kachel-farbe, var(--heide));
  border-bottom: var(--strich) solid var(--tinte);
}

.kachel h3 {
  margin-top: 0.5rem;
}

.kachel p {
  margin-top: 0.5rem;
}

.kachel--honig { --kachel-farbe: var(--honig-heide); }
.kachel--wachs { --kachel-farbe: var(--wachs); }

/* ---------- Tabelle ---------- */
.tabelle-rahmen {
  overflow-x: auto;
  max-width: 100%;
}

.tabelle {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 1rem;
}

.tabelle caption {
  text-align: left;
  padding-bottom: 0.6rem;
  font-size: var(--t-angabe);
  font-stretch: 80%;
  color: var(--tinte-grau);
}

.tabelle th,
.tabelle td {
  padding: 0.75rem 1rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
}

.tabelle thead th {
  font-size: var(--t-angabe);
  font-stretch: 78%;
  font-weight: 700;
  border-bottom: var(--strich) solid var(--tinte);
}

.tabelle tbody th {
  font-weight: 650;
}

.tabelle tbody tr {
  border-bottom: 1px solid var(--linie);
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 50rem;
  border-bottom: 1.5px solid var(--tinte);
}

.faq details {
  border-top: 1.5px solid var(--tinte);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.05rem;
  font-size: 1.15rem;
  font-weight: 650;
  font-stretch: 92%;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--schrift-name);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--heide);
}

.faq details[open] summary::after {
  rotate: 45deg;
}

.faq summary:hover {
  color: var(--heide);
}

.faq__antwort {
  padding-bottom: 1.2rem;
  max-width: var(--mass);
}

.faq__antwort > * + * {
  margin-top: 0.8rem;
}

/* ---------- Aufruf ---------- */
.aufruf {
  --fokus: var(--wachs);
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--heide);
  color: var(--papier);
}

.aufruf h2 {
  color: var(--papier);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
}

.aufruf p {
  max-width: 52ch;
}

/* ---------- Karte ---------- */
.karte {
  aspect-ratio: 16 / 10;
  border: var(--strich) solid var(--tinte);
  background: var(--wachs-hell);
}

.karte iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.karte__hinweis {
  margin-top: 0.6rem;
}

/* ---------- Formular ---------- */
.form {
  display: grid;
  gap: 1.3rem;
  max-width: 40rem;
}

.form__zeile {
  display: grid;
  gap: 1.3rem;
}

.form__field {
  display: grid;
  gap: 0.4rem;
}

.form__field label,
.form__legende {
  font-weight: 650;
  font-stretch: 90%;
}

.form__hilfe {
  font-size: var(--t-klein);
  color: var(--tinte-grau);
}

.form__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: var(--strich) solid var(--tinte);
  border-radius: 0.25rem;
  font-size: 1.0625rem;
  line-height: 1.4;
}

textarea.form__input {
  min-height: 9rem;
  resize: vertical;
}

.form__input::placeholder {
  color: var(--tinte-grau);
  opacity: 1;
}

.form__input:hover {
  border-color: var(--heide-mittel);
}

.form__input:focus-visible {
  outline: 3px solid var(--heide-mittel);
  outline-offset: 2px;
  border-color: var(--heide);
}

.form__input[aria-invalid="true"] {
  border-color: var(--fehler);
  background: var(--fehler-grund);
}

.form__error {
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--fehler);
}

.form__error:empty {
  display: none;
}

.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.form__check input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.2rem 0 0;
  accent-color: var(--heide);
}

.form__check label {
  font-weight: 450;
  font-stretch: 100%;
}

.form__status {
  padding: 0.9rem 1.1rem;
  border-left: 5px solid var(--tinte-grau);
  font-weight: 550;
}

.form__status:empty {
  display: none;
}

.form__status[data-state="pending"] {
  border-color: var(--heide-mittel);
  background: var(--warten-grund);
}

.form__status[data-state="success"] {
  border-color: var(--erfolg);
  background: var(--erfolg-grund);
  color: var(--erfolg);
}

.form__status[data-state="error"] {
  border-color: var(--fehler);
  background: var(--fehler-grund);
  color: var(--fehler);
}

/* ---------- Rechtstexte ---------- */
.rechtstext {
  max-width: var(--mass);
}

.rechtstext > * + * {
  margin-top: 1em;
}

.rechtstext h2 {
  margin-top: 2.2em;
  font-family: var(--schrift-text);
  font-size: 1.35rem;
  font-weight: 650;
  font-stretch: 90%;
  line-height: 1.3;
  color: var(--heide);
}

.rechtstext h3 {
  margin-top: 1.6em;
  font-size: 1.1rem;
}

.rechtstext h2:first-child {
  margin-top: 0;
}

.luecke {
  padding: 0 0.3em;
  background: var(--wachs-hell);
  border: 1.5px dashed var(--tinte);
  border-radius: 0.15rem;
  font-weight: 600;
}

/* ---------- Styleguide-Hilfen ---------- */
.farbfelder {
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.farbfeld {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  font-size: var(--t-angabe);
  font-stretch: 82%;
}

.farbfeld::before {
  content: "";
  height: 5rem;
  margin-bottom: 0.5rem;
  background: var(--muster);
  border: var(--strich) solid var(--tinte);
}

.farbfeld strong {
  font-size: 1rem;
  font-stretch: 92%;
}

.muster-stapel > * + * {
  margin-top: 1.5rem;
}

.muster-probe {
  padding: 1.5rem;
  border: 1px dashed var(--linie);
}

.muster-probe--heide {
  --fokus: var(--wachs);
  background: var(--heide);
  color: var(--papier);
}

.skala {
  display: grid;
  gap: 1.4rem;
}

.skala__zeile {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--linie);
}

.skala__name {
  font-size: var(--t-angabe);
  font-stretch: 78%;
  font-weight: 700;
  color: var(--tinte-grau);
}

.skala__sorte {
  font-family: var(--schrift-name);
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: 0.95;
  color: var(--heide);
}

.skala__angabe {
  font-size: var(--t-angabe);
  font-stretch: 78%;
}

.skala__h2,
.skala__tage {
  font-family: var(--schrift-name);
  line-height: 1.05;
  color: var(--heide);
}

.skala__h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.01em;
}

.skala__tage {
  font-size: var(--t-tage);
}

.skala__h3 {
  font-size: var(--t-h3);
  font-weight: 650;
  font-stretch: 90%;
  line-height: 1.25;
}

.skala__lead {
  max-width: 48ch;
  font-size: var(--t-lead);
  line-height: 1.5;
}

.skala__h2,
.skala__tage,
.skala__h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

.muster-raster {
  display: grid;
  gap: 2.5rem clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.muster-raster + .muster-raster {
  margin-top: 2.5rem;
}

.muster-titel {
  margin-bottom: 1rem;
}

.farbfelder + .muster-titel,
.muster-raster + .kacheln,
.fakten ~ .rechtstext {
  margin-top: 2.5rem;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* ---------- Fuss ---------- */
.fuss {
  --fokus: var(--wachs);
  padding-block: clamp(2.75rem, 6vw, 4rem) 2rem;
  background: var(--heide);
  color: var(--papier);
}

.fuss a {
  color: var(--papier);
}

.fuss a:hover {
  color: var(--wachs);
}

.fuss__raster {
  display: grid;
  gap: 2rem;
}

.fuss__name {
  font-family: var(--schrift-name);
  font-size: 1.5rem;
  line-height: 1.1;
}

.fuss__titel {
  margin-bottom: 0.5rem;
  font-size: var(--t-angabe);
  font-stretch: 78%;
  font-weight: 700;
  color: var(--bluete);
}

.fuss address {
  margin-top: 0.75rem;
  font-style: normal;
}

.fuss ul {
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.fuss__unten {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie-hell);
  font-size: var(--t-klein);
  color: var(--bluete);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* 576 px: Regal zweispaltig, Etikettfelder nebeneinander */
@media (min-width: 36em) {
  .etikett {
    rotate: -1deg;
  }

  .etikett__angaben {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .etikett__feld {
    padding: 0.8rem 0.8rem 0;
  }

  .etikett__feld + .etikett__feld {
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid var(--tinte);
  }

  .regal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form__zeile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fakten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--linie);
  }

  .fakten__feld {
    padding-inline: 0 1rem;
    border-bottom: 0;
  }

  .fakten__feld + .fakten__feld {
    padding-left: 1rem;
    border-left: 1px solid var(--linie);
  }

  .fuss__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 960 px: Navigation sichtbar, Hero und Sektionen zweispaltig */
@media (min-width: 60em) {
  .nav-toggle {
    display: none;
  }

  .kopf__innen {
    flex-wrap: nowrap;
    padding-block: 1.15rem;
  }

  #site-nav,
  #site-nav[data-open="true"] {
    display: block;
    flex-basis: auto;
  }

  .nav__liste {
    display: flex;
    align-items: center;
    gap: 0.35rem 1.4rem;
    border-top: 0;
  }

  .nav__liste li {
    border-bottom: 0;
  }

  .nav__link {
    padding: 0.4rem 0;
    font-size: 1rem;
  }

  .nav__link--laden {
    padding: 0.45rem 0.8rem;
    border: 1.5px solid var(--wachs);
    border-radius: var(--radius-knopf);
    font-stretch: 88%;
    font-weight: 650;
  }

  .nav__link--laden:hover {
    background: var(--wachs);
    color: var(--tinte);
  }

  .nav__link--laden[aria-current="page"] {
    background: var(--wachs);
    color: var(--tinte);
    text-decoration: none;
  }

  .hero__raster {
    grid-template-columns: minmax(0, 1.85fr) minmax(15rem, 1fr);
  }

  .abschnitt__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .abschnitt__raster--seitenkopf {
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.6fr);
  }

  .honigjahr {
    --spalten: minmax(9rem, 0.7fr) minmax(0, 1.2fr) minmax(20rem, 1.5fr);
  }

  .honigjahr__kopf .honigjahr__monate {
    grid-column: 3;
  }

  .muster-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aufruf {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
    column-gap: 3rem;
  }

  .aufruf .knoepfe {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .fuss__raster {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* 1200 px: das Regal steht auf einem Brett */
@media (min-width: 75em) {
  .regal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .regal__stand {
    height: 11rem;
  }

  .glas {
    width: 6.8rem;
    height: 8.2rem;
  }

  .kerze {
    height: 8.6rem;
  }

  .kerze--kurz {
    height: 6.2rem;
  }
}

/* ---------- Bewegung nur als Antwort auf eine Handlung ---------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  a,
  .knopf,
  .nav__link,
  .form__input,
  .faq summary {
    transition: color var(--dauer) ease, background-color var(--dauer) ease,
      border-color var(--dauer) ease, text-decoration-thickness var(--dauer) ease;
  }

  .faq summary::after,
  .nav-toggle__zeichen span {
    transition: rotate 200ms ease, transform 200ms ease, opacity 200ms ease;
  }

  .skip-link {
    transition: transform var(--dauer) ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .kopf,
  .fuss,
  .heidesaum,
  .nav-toggle {
    display: none;
  }

  .abschnitt--heide {
    background: none;
    color: var(--tinte);
  }
}

/* === honig: regal-angaben === */
/* Etikettfelder unter jedem Glas: Tracht, Zeit, Farbe — wie auf dem Glasetikett */
.regal__angaben {
  display: grid;
  margin-top: 1.1rem;
  margin-right: 1.5rem;
  border-top: 1.5px solid var(--tinte);
  font-size: var(--t-angabe);
  font-stretch: 80%;
  line-height: 1.35;
}

.regal__feld {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--linie);
}

.regal__feld dt {
  font-weight: 700;
}

.regal__feld dd {
  font-weight: 450;
}

/* === honig: tabelle unter dem honigjahr === */
.honigjahr + .tabelle-rahmen {
  margin-top: var(--abstand-kopf);
}

/* === honig: textlink im aufruf === */
.aufruf a:not([class]) {
  color: var(--papier);
}

.aufruf a:not([class]):hover {
  color: var(--wachs);
}

/* === bienenpatenschaft: bienenstand auf heidekraut === */
/* 59 Beuten als Umriss in Heideblüte, die eine Patenbeute in Wachs */
.abschnitt--heide .bienenstand figcaption {
  color: var(--bluete);
}

.abschnitt--heide .beute rect {
  fill: var(--heide);
  stroke: var(--bluete);
}

.abschnitt--heide .beute rect.beute__flugloch {
  fill: var(--bluete);
  stroke: none;
}

.abschnitt--heide .beute--pate rect {
  fill: var(--wachs);
  stroke: var(--papier);
}

.abschnitt--heide .beute--pate rect.beute__flugloch {
  fill: var(--heide);
  stroke: none;
}

/* === bienenpatenschaft: kacheln unter dem text === */
.abschnitt__raster + .kacheln {
  margin-top: var(--abstand-kopf);
}

/* === fuehrungen: seitentitel === */
/* h1 auf Papier (Führungen, Kontakt, Rechtstexte); auf dem Telefon begrenzt */
.seitentitel {
  font-size: clamp(2.1rem, 6.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
}

/* === fuehrungen: hinweis als seitenkopf === */
.hinweis__vorzeile {
  font-size: var(--t-angabe);
  font-stretch: 78%;
  font-weight: 600;
  color: var(--tinte-grau);
}

.hinweis .hinweis__lead {
  max-width: 48ch;
  font-size: var(--t-lead);
  line-height: 1.5;
}

.hinweis .fakten {
  margin-top: 1.75rem;
}

/* === kontakt: formular und fakten nebeneinander === */
.kontakt-raster {
  display: grid;
  gap: var(--abstand-sektion) clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.kontakt-raster .knoepfe + .text {
  margin-top: var(--abstand-kopf);
}

@media (min-width: 60em) {
  .kontakt-raster {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .kontakt-raster .fakten {
    grid-template-columns: 1fr;
    border-bottom: 0;
  }

  .kontakt-raster .fakten__feld,
  .kontakt-raster .fakten__feld + .fakten__feld {
    padding-inline: 0;
    border-left: 0;
    border-bottom: 1px solid var(--linie);
  }
}

/* === hofladen: kleines etikett im hero-raster === */
/* Im Raster streckt margin-inline: auto das Etikett nicht; mit container-type fiele es sonst auf Nullbreite */
.hero__raster > .etikett--klein {
  width: 100%;
}