/* ==========================================================================
   Honig aus Kircha – Stylesheet
   Eine Datei, keine Abhängigkeiten, kein Build.

   Aufbau
   1  Schrift
   2  Designsystem (Custom Properties)
   3  Grundlagen und Reset
   4  Hilfsklassen
   5  Header und Navigation
   6  Buttons und CTA
   7  Biene
   8  Hero
   9  Abschnitte allgemein
   10 Honig / Produkt
   11 Zahlenband
   12 Imkerei
   13 Glasrückgabe
   14 Impressionen
   15 Kontakt
   16 Footer
   17 Textseiten (Impressum, Datenschutz, 404)
   18 Reduzierte Bewegung
   ========================================================================== */


/* 1  Schrift ============================================================== */

/* Jost* – SIL Open Font License 1.1, siehe assets/fonts/OFL.txt
   Variable Font, Achse wght 400–800, Subset "latin".
   Rein lokal – die Seite lädt nichts von externen Servern.

   Soll später die lizenzierte Dunbar Low eingesetzt werden: Datei nach
   assets/fonts/ legen, hier src und font-family anpassen. Sonst ändert
   sich nichts, alle Größen hängen an --font-display / --font-body. */
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-latin-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}


/* 2  Designsystem ========================================================= */

:root {
  /* Farbe.
     --ink ist kein Reinschwarz, sondern das sehr dunkle, leicht bläuliche
     Schwarz des Honigetiketts. Es gibt bewusst KEINE Akzentfarbe. */
  --ink:        #191d2b;
  --paper:      #f7f5f1;

  --ink-80:     #3d4152;
  --ink-55:     #7b7e8c;
  --ink-30:     #b6b8c0;
  --ink-14:     #dcdde1;
  --ink-07:     #ebebee;

  /* Typografie */
  --font-display: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next',
                  'Trebuchet MS', system-ui, sans-serif;
  --font-body:    var(--font-display);

  /* Fließende Typoskala. Alle Werte skalieren zwischen 320 px und 1440 px. */
  --step-0:   clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:   clamp(1.13rem, 1.05rem + 0.38vw, 1.38rem);
  --step-2:   clamp(1.35rem, 1.19rem + 0.80vw, 1.88rem);
  --step-3:   clamp(1.60rem, 1.29rem + 1.55vw, 2.63rem);
  --step-4:   clamp(1.95rem, 1.36rem + 2.95vw, 3.88rem);
  --step-5:   clamp(2.40rem, 1.32rem + 5.40vw, 6.00rem);

  /* Abstände */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: clamp(3.5rem, 2rem + 7vw, 7rem);
  --space-3xl: clamp(5rem, 2.5rem + 11vw, 10rem);

  /* Struktur */
  --border-width: 1px;
  --border-strong: 2px;
  --radius: 0;
  --max-content-width: 78rem;
  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);

  /* Bewegung */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 240ms;
  --dur-slow: 620ms;
}


/* 3  Grundlagen und Reset ================================================= */

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

html {
  /* Kein smooth-scroll erzwingen, wenn Bewegung reduziert werden soll –
     das wird in Abschnitt 19 zurückgenommen. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-weight: 400;
  /* Sicherheitsnetz gegen versehentlichen horizontalen Überlauf durch
     die sehr großen Schriftgrade. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Sichtbarer Fokus – überall, ohne Ausnahme. */
:focus-visible {
  outline: var(--border-strong) solid var(--ink);
  outline-offset: 3px;
}

::selection { background: var(--ink); color: var(--paper); }


/* 4  Hilfsklassen ========================================================= */

.wrap {
  width: 100%;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Grid- und Flex-Elemente haben von Haus aus min-width:auto und schrumpfen
   deshalb nicht unter die Eigenbreite ihres Inhalts. Ein Foto mit
   width="1200" zwingt seine Spalte damit auf 1200 px – auf dem Handy läuft
   die ganze Seite über den Rand hinaus. min-width:0 hebt das auf. */
.hero__grid > *,
.two-col > *,
.gallery > *,
.retour > *,
.band li,
.site-header__inner > * {
  min-width: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2xs) var(--space-s);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--space-s); outline-color: var(--paper); }

/* Große plakative Aussage. Kleine Zeilenhöhe, enges Tracking, Versalien. */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
  /* Sicherheitsnetz: greift nur, wenn ein Wort allein nicht in eine Zeile
     passt. Ein umbrochenes Wort ist hässlich, ein waagerechter Überlauf
     schlimmer. */
  overflow-wrap: break-word;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 46ch;
  color: var(--ink-80);
}

/* Kleine, gesperrte Auszeichnung – das „Etikett“-Detail des Systems. */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.rule { border: 0; border-top: var(--border-width) solid var(--ink-14); }


/* 5  Header und Navigation ================================================ */

.site-header {
  border-bottom: var(--border-width) solid var(--ink);
  background: var(--paper);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  padding-block: var(--space-s);
}

/* Wortmarke in Kleinschreibung – die Geste stammt direkt vom Etikett
   („deutscher blütenhonig“). */
.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-transform: lowercase;
}
.wordmark span { display: block; }
.wordmark b { font-weight: 600; }
.wordmark .wordmark__sub {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--ink-55);
  letter-spacing: 0.01em;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  /* Der Spaltenabstand schrumpft mit, damit alle vier Punkte auf einem
     375-px-Display in eine Zeile passen. */
  gap: var(--space-2xs) clamp(0.85rem, 2.6vw, 1.5rem);
}
.site-nav a {
  display: inline-block;
  /* Touch-Ziel: mit dem vertikalen Padding sicher über 44 px. */
  padding-block: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.45rem;
  height: var(--border-strong);
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }


/* 6  Buttons und CTA ====================================================== */

.cta {
  --cta-fg: var(--paper);
  --cta-bg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3.25rem;
  padding: 0.9rem 1.5rem;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: var(--border-strong) solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: visible;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cta:hover, .cta:focus-visible { --cta-fg: var(--ink); --cta-bg: var(--paper); }

/* Der Pfeil ist ein Inline-SVG, kein Textzeichen: das latin-Subset der
   Schrift enthält kein „→“, sonst würde eine fremde Schrift einspringen. */
.cta__arrow {
  width: 1.1em; height: 1.1em;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { transform: translateX(0.35em); }

/* „SUMM.“ erscheint zusätzlich – der eigentliche Buttontext bleibt immer
   unverändert lesbar. */
.cta__summ {
  position: absolute;
  right: 0.1rem;
  bottom: calc(100% + 0.35rem);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink-55);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.cta:hover .cta__summ, .cta:focus-visible .cta__summ { opacity: 1; transform: none; }

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}

/* Sekundäre Aktion: „E-Mail-Adresse kopieren“. Wird per JS eingeblendet. */
.btn-copy {
  min-height: 3rem;
  padding: 0.7rem 1.1rem;
  border: var(--border-width) solid var(--ink-30);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-copy:hover, .btn-copy:focus-visible { border-color: var(--ink); background: var(--ink-07); }
.btn-copy[hidden] { display: none; }

/* Die Mailadresse als gut sichtbarer, kopierbarer Textlink. */
.mail-plain {
  font-size: var(--step-1);
  font-weight: 600;
  word-break: break-word;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}


/* 7  Biene ================================================================ */

/* Sehr reduzierte, selbst gezeichnete SVG-Biene. Rein dekorativ und vor
   Screenreadern verborgen. Sie fliegt nur bei Hover/Fokus auf dem CTA. */
.bee {
  position: absolute;
  width: 2.1rem; height: 2.1rem;
  right: -0.6rem;
  top: -1.6rem;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) rotate(0deg);
  transition: opacity var(--dur) var(--ease);
}
.cta-wrap { position: relative; display: inline-block; }
.cta-wrap:hover .bee,
.cta-wrap:focus-within .bee {
  opacity: 1;
  animation: bee-flight 2.6s var(--ease) infinite;
}
/* Die Flügel sitzen in einer bereits gedrehten <g>-Gruppe. transform-box:
   fill-box sorgt dafür, dass das Flattern um die eigene Mitte läuft und die
   Drehung der Gruppe nicht überschreibt. */
.bee__wing { transform-box: fill-box; transform-origin: 50% 85%; }
.cta-wrap:hover .bee__wing,
.cta-wrap:focus-within .bee__wing { animation: bee-wing 140ms ease-in-out infinite alternate; }

@keyframes bee-flight {
  0%   { transform: translate(0, 0)          rotate(0deg); }
  25%  { transform: translate(-2.6rem, -0.7rem) rotate(-12deg); }
  50%  { transform: translate(-4.6rem, 0.5rem)  rotate(6deg); }
  75%  { transform: translate(-2.2rem, 1.1rem)  rotate(14deg); }
  100% { transform: translate(0, 0)          rotate(0deg); }
}
@keyframes bee-wing {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.45); }
}


/* 8  Hero ================================================================= */

.hero {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: var(--border-width) solid var(--ink);
}

.hero__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: end;
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-2xl); }
}

.hero__title {
  font-size: var(--step-5);
  margin-bottom: var(--space-m);
}
.hero__title span { display: block; }

.hero__lede { margin-bottom: var(--space-l); }

/* Preisblock mit sehr blassem Wabenraster im Hintergrund. Das Muster ist
   ein winziges Inline-SVG, kein Bild-Request. */
.price {
  display: inline-flex;
  flex-direction: column;
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-l);
  border: var(--border-strong) solid var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0 L28 8 L28 24 L14 32 L0 24 L0 8 Z M14 32 L28 40 L28 56 M14 32 L0 40 L0 56' fill='none' stroke='%23191d2b' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E");
  background-position: center;
}
.price__amount {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.price__unit {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-top: var(--space-3xs);
}

.hero__figure { margin: 0; }
.hero__note {
  margin-top: var(--space-2xs);
  font-size: 0.8rem;
  color: var(--ink-55);
}


/* Fotos: monochrom als Grundzustand, Farbe kommt beim Hover zurück.
   Die Farbe trägt keinerlei Information – auf Touch-Geräten sind die
   Bilder deshalb dauerhaft farbig (siehe unten). */
.photo {
  /* Ohne width:100% richtet sich ein Bild mit srcset nach der aus sizes
     abgeleiteten Eigenbreite und füllt seine Spalte nicht aus. */
  width: 100%;
  filter: grayscale(1) contrast(1.06);
  transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  background: var(--ink-07);
}
.photo-frame { overflow: hidden; border: var(--border-width) solid var(--ink); }
.photo-frame:hover .photo { filter: grayscale(0) contrast(1); transform: scale(1.03); }

@media (hover: none) {
  /* Ohne Hover gäbe es keinen Weg zur Farbe – also gleich farbig zeigen. */
  .photo { filter: grayscale(0); }
}


/* 9  Abschnitte allgemein ================================================= */

.section { padding-block: var(--space-2xl); border-bottom: var(--border-width) solid var(--ink); }
.section--tight { padding-block: var(--space-xl); }

.section__head { margin-bottom: var(--space-l); }
.section__title { font-size: var(--step-4); }
.section__title + .lede { margin-top: var(--space-m); }

.two-col {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 55rem) {
  .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .two-col--wide-left { grid-template-columns: 1.25fr 0.75fr; }
  .two-col--wide-right { grid-template-columns: 0.75fr 1.25fr; }
}


/* 10  Honig / Produkt ===================================================== */

/* Eine Stufe unter der h1: die Startüberschrift soll die größte bleiben. */
.honig__stack { font-size: var(--step-4); }
.honig__stack span { display: block; }
.honig__stack .is-quiet { color: var(--ink-30); }

.facts { margin-top: var(--space-l); border-top: var(--border-width) solid var(--ink-14); }
.facts div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  padding-block: var(--space-xs);
  border-bottom: var(--border-width) solid var(--ink-14);
}
.facts dt { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); }
.facts dd { margin: 0; font-weight: 600; }


/* 11  Zahlenband ========================================================== */

.band {
  padding-block: var(--space-xl);
  border-bottom: var(--border-width) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
/* Drei Zahlen: schmal zweispaltig, die letzte nimmt die volle Breite ein –
   das ist ruhiger als eine halbe Lücke. Ab 48 rem stehen alle drei nebeneinander. */
.band ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l) var(--space-m);
}
.band li:last-child { grid-column: 1 / -1; }

@media (min-width: 48rem) {
  .band ul { grid-template-columns: repeat(3, 1fr); }
  .band li:last-child { grid-column: auto; }
}

.band li {
  /* Ohne JS und bei reduzierter Bewegung sofort sichtbar – der Reveal
     wird ausschließlich additiv per .js-reveal ergänzt. */
  border-top: var(--border-strong) solid var(--paper);
  padding-top: var(--space-s);
}
.band__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.band__label {
  display: block;
  margin-top: var(--space-3xs);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.js-reveal .band li {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-reveal .band li.is-in { opacity: 1; transform: none; }


/* 12  Imkerei ============================================================= */

.imkerei__quote {
  font-size: var(--step-4);
  margin-bottom: var(--space-l);
}
.imkerei__quote span { display: block; }


/* 13  Glasrückgabe ======================================================== */

.retour {
  display: grid;
  gap: var(--space-m);
  align-items: center;
}
@media (min-width: 48rem) { .retour { grid-template-columns: auto 1fr; gap: var(--space-xl); } }

.retour__mark {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  padding: var(--space-m);
  border: var(--border-strong) solid var(--ink);
}


/* 14  Impressionen ======================================================== */

/* Editoriales Raster: bewusst ungleiche Größen, keine Slider-Bibliothek. */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 40rem) {
  .gallery { grid-template-columns: repeat(6, 1fr); gap: var(--space-m); }
  /* Bewusst ungleich: ein breites Querformat, ein hohes Hochformat und
     zwei Gegengewichte. Das schmale Deckelband sitzt am unteren Rand seiner
     Zeile, damit es nicht in der Luft hängt. */
  .gallery__item--a { grid-column: span 4; }
  .gallery__item--b { grid-column: span 2; align-self: end; }
  .gallery__item--c { grid-column: span 2; }
  .gallery__item--d { grid-column: span 4; align-self: end; }
}

.gallery figure { margin: 0; }
.gallery figcaption {
  margin-top: var(--space-2xs);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* Ein einzelnes Bild wabenförmig maskiert – ein Detail, kein Prinzip. */
.gallery__item--b .photo-frame {
  border: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}


/* 15  Kontakt ============================================================= */

.kontakt { background: var(--ink); color: var(--paper); }
.kontakt .section__title { font-size: var(--step-4); }
.kontakt .section__title span { display: block; }
.kontakt .lede { color: rgba(247, 245, 241, 0.78); }
.kontakt .eyebrow { color: rgba(247, 245, 241, 0.6); }
.kontakt :focus-visible { outline-color: var(--paper); }

.kontakt .cta {
  --cta-fg: var(--ink);
  --cta-bg: var(--paper);
  border-color: var(--paper);
}
.kontakt .cta:hover, .kontakt .cta:focus-visible {
  --cta-fg: var(--paper);
  --cta-bg: transparent;
}
.kontakt .cta__summ { color: rgba(247, 245, 241, 0.6); }
.kontakt .bee { color: var(--paper); }
.kontakt .btn-copy { border-color: rgba(247, 245, 241, 0.4); }
.kontakt .btn-copy:hover, .kontakt .btn-copy:focus-visible {
  border-color: var(--paper);
  background: rgba(247, 245, 241, 0.1);
}

.kontakt__mail { margin-top: var(--space-l); }
.kontakt__status {
  margin-top: var(--space-xs);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 1.2em;
  color: rgba(247, 245, 241, 0.75);
}


/* 16  Footer ============================================================== */

.site-footer { padding-block: var(--space-xl); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-xl);
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer__claim {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.site-footer a { text-underline-offset: 0.25em; }
.site-footer__meta { font-size: 0.8rem; color: var(--ink-55); }


/* 17  Textseiten ========================================================== */

.page { padding-block: var(--space-2xl) var(--space-3xl); }
/* Die Textseiten tragen .wrap und .prose gemeinsam. Das schmalere max-width
   aus .prose gewinnt – zusammen mit margin-inline:auto aus .wrap wäre die
   Spalte damit zentriert. Die übrige Website ist konsequent linksbündig,
   also bleibt sie das hier auch. */
.prose {
  max-width: calc(60ch + 2 * var(--gutter));
  margin-inline: 0 auto;
}
.prose h1 { font-size: var(--step-4); margin-bottom: var(--space-l); }
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-s);
}
.prose h3 {
  font-size: var(--step-1);
  font-weight: 600;
  margin-top: var(--space-l);
  margin-bottom: var(--space-2xs);
}
.prose p, .prose ul, .prose dl { margin-bottom: var(--space-s); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.25rem; margin-bottom: var(--space-3xs); }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  background: var(--ink);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.prose address { font-style: normal; }
.prose a { text-underline-offset: 0.2em; }

.page-404 {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-2xl);
}
.page-404 h1 { font-size: var(--step-5); margin-bottom: var(--space-m); }


/* 18  Reduzierte Bewegung ================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Die Biene bleibt sichtbar, fliegt aber nicht. */
  .cta-wrap:hover .bee,
  .cta-wrap:focus-within .bee { animation: none; opacity: 1; }
  .cta-wrap:hover .bee__wing,
  .cta-wrap:focus-within .bee__wing { animation: none; }

  .photo-frame:hover .photo { transform: none; }

  /* Der Reveal darf niemals dazu führen, dass Inhalt unsichtbar bleibt. */
  .js-reveal .band li { opacity: 1; transform: none; }
}