/* ==========================================================================
   Hof Bramkamp, Ossenbeck. Relaunch-Entwurf.
   Ein Akzent (Logo-Grün), ein Modus (hell), ein dokumentiertes Formsystem.

   Farben stammen aus dem Logo: tiefes Grün auf Creme. Kein zweiter Akzent.
   Formsystem, gilt ausnahmslos:
     Flächen, Bilder, Karten .............. 18px  (--r)
     kleine Marken, Eingaben .............. 10px  (--r-klein)
     Bedienelemente (Knöpfe, Pillen) ...... Pille (--r-pille)
     Bogenform (--r-bogen) tragen genau die beiden Menschen- und Ortsbilder,
     Kopfbild und Hofbild. Sie zitiert den Bogen der Wortmarke. Sonst nirgends.

   Kein style-Attribut im HTML, siehe README. Alles steht hier in Klassen.
   ========================================================================== */

/* --- Schriften, lokal ------------------------------------------------------
   Young Serif für Überschriften: ein Schnitt, kräftige, gerundete Serifen,
   nah an der handgezeichneten Wortmarke. Hierarchie trägt Größe und Farbe,
   nicht das Gewicht, denn es gibt nur eines.
   Figtree für Fließtext: warme Grotesk mit Gewichtsachse 300 bis 900.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Young Serif';
  src: url('../fonts/youngserif-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Young Serif';
  src: url('../fonts/youngserif-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Merkmale -------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Direkt aus der Logodatei ausgezählt, nicht geschätzt. Genau ein Akzent. */
  --gruen:      #145541;
  --gruen-tief: #0e3a2c;
  --gruen-hell: #1f7357;

  /* Papier. Das Creme der Logofläche, plus zwei Abstufungen im selben Ton. */
  --papier:   #fdeed5;
  --papier-2: #f7e4c5;
  --papier-3: #fffaef;

  /* Schrift. Grünschwarz statt Neutralgrau, damit alles zusammenhält. */
  --tinte:   #16241d;
  --tinte-2: #4a5b51;
  --tinte-3: #6d7d73;

  --linie:   rgba(20, 85, 65, .18);
  --linie-2: rgba(20, 85, 65, .09);

  /* Auf dunkelgrüner Fläche */
  --auf-dunkel:   #fdeed5;
  --auf-dunkel-2: #b0c8bb;
  --linie-dunkel: rgba(253, 238, 213, .17);

  /* Form. Siehe Kopfkommentar. */
  --r:       18px;
  --r-klein: 10px;
  --r-pille: 999px;
  --r-bogen: 50% 50% var(--r) var(--r) / 30% 30% var(--r) var(--r);

  --kopfhoehe: 72px;
  /* Höhe des Hinweisbands, von main.js gemessen. Ohne Band 0. */
  --bandhoehe: 0px;
  /* Alles, was Platz für die feste Kopfzeile lässt, rechnet das Band
     mit — sonst verschwindet der erste Abschnitt darunter. */
  --kopfversatz: calc(var(--bandhoehe) + var(--kopfhoehe));
  --breite: 1240px;
  --rand: clamp(1.15rem, 4vw, 3.25rem);

  --weich: cubic-bezier(.16, 1, .3, 1);

  /* Ebenen. Nur diese vier Werte. */
  --z-flaeche: 1;
  --z-kopf: 40;
  --z-menue: 50;
  --z-korn: 60;
}

/* --- Grundlage ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfversatz) + 1.25rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:where(h1, h2, h3, h4) {
  font-family: 'Young Serif', ui-serif, Georgia, serif;
  font-weight: 400;
  letter-spacing: -.012em;
}

::selection { background: var(--gruen); color: var(--papier); }

:focus-visible {
  outline: 2.5px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 4px;
}
.auf-dunkel :focus-visible { outline-color: var(--auf-dunkel); }

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Der Symbolvorrat wird nur ausgelesen, nie gezeigt. Das Ausblenden steht
   hier und nicht als style-Attribut: Die CSP der Domain lässt keine
   Inline-Stile zu, das Attribut würde stumm verworfen. */
.symbolvorrat { display: none; }

/* Messpunkt am Seitenanfang. Das Skript beobachtet ihn, um zu erkennen, ob
   der Seitenkopf verlassen wurde. Er ist einen Punkt groß und nimmt keine
   Mausereignisse an. */
.wache {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

/* Sprungmarke für Tastatur */
.sprung {
  position: absolute; left: 50%; top: 0; translate: -50% -140%;
  z-index: var(--z-korn);
  background: var(--gruen); color: var(--papier);
  padding: .7rem 1.4rem; border-radius: 0 0 var(--r-klein) var(--r-klein);
  font-weight: 600; text-decoration: none;
  transition: translate .2s var(--weich);
}
.sprung:focus-visible { translate: -50% 0; }

/* --- Bausteine ------------------------------------------------------------- */
.hof {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.feld { padding-block: clamp(4.5rem, 11vw, 9rem); }
.feld--eng { padding-block: clamp(3rem, 7vw, 5.5rem); }

.titel {
  font-size: clamp(2rem, 4.6vw, 3.15rem);
  line-height: 1.08;
  max-width: 18ch;
}
.titel--breit { max-width: 24ch; }

.satz {
  color: var(--tinte-2);
  max-width: 58ch;
  font-size: 1.075rem;
}
.auf-dunkel .satz { color: var(--auf-dunkel-2); }

.klein {
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--tinte-3);
}

/* --- Knöpfe ---------------------------------------------------------------
   Fülleffekt läuft von unten ein, nicht als Farbwechsel. Beim Drücken sackt
   der Knopf einen Punkt ab. Beides nur Transform und Opazität.
   -------------------------------------------------------------------------- */
.knopf {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem;
  border-radius: var(--r-pille);
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: translate .18s var(--weich), box-shadow .25s var(--weich);
}
.knopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .42s var(--weich);
}
.knopf:hover { translate: 0 -2px; }
.knopf:active { translate: 0 1px; transition-duration: .06s; }

/* Vollflächig grün, Papierschrift. Kontrast 7,1:1. */
.knopf--voll {
  background: var(--gruen); color: var(--papier);
  box-shadow: 0 8px 22px -12px rgba(14, 58, 44, .7);
}
.knopf--voll::before { background: var(--gruen-tief); }
.knopf--voll:hover { box-shadow: 0 14px 30px -14px rgba(14, 58, 44, .8); }

/* Umrandet auf Papier. Füllung läuft ein, Schrift wechselt mit. */
.knopf--rand {
  color: var(--gruen);
  box-shadow: inset 0 0 0 1.5px var(--gruen);
  transition: translate .18s var(--weich), color .3s var(--weich);
}
.knopf--rand::before { background: var(--gruen); }
.knopf--rand:hover { color: var(--papier); }

/* Auf dunkelgrüner Fläche */
.auf-dunkel .knopf--voll {
  background: var(--auf-dunkel); color: var(--gruen-tief);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .55);
}
.auf-dunkel .knopf--voll::before { background: #fff; }
.auf-dunkel .knopf--rand {
  color: var(--auf-dunkel);
  box-shadow: inset 0 0 0 1.5px var(--linie-dunkel);
}
.auf-dunkel .knopf--rand::before { background: var(--auf-dunkel); }
.auf-dunkel .knopf--rand:hover { color: var(--gruen-tief); }

.knopf .sym { width: 1.15em; height: 1.15em; flex: none; }

/* Textlink mit mitlaufendem Strich */
.textlink {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--gruen); font-weight: 600; text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gruen), var(--gruen));
  background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--weich);
}
.textlink:hover { background-size: 100% 1.5px; }
.textlink .sym { width: 1.05em; height: 1.05em; transition: translate .3s var(--weich); }
.textlink:hover .sym { translate: 3px 0; }
.auf-dunkel .textlink {
  color: var(--auf-dunkel);
  background-image: linear-gradient(var(--auf-dunkel), var(--auf-dunkel));
}

/* --- Kopfzeile -------------------------------------------------------------
   Eine Zeile auf dem Rechner, 72px hoch. Auf dem Handy Logo plus Klappmenü.
   -------------------------------------------------------------------------- */
/* Hinweisband: Betriebsurlaub, kurzfristige Änderungen. Wird im
   Pflegebereich ein- und ausgeschaltet.

   Es liegt selbst fest ganz oben und schiebt die Kopfzeile nach unten.
   Ein Band IM Kopf würde dessen feste Höhe sprengen, ein Band davor
   im normalen Fluss läge unsichtbar dahinter — beides sind die beiden
   Fallen, die ein "position: fixed"-Kopf aufstellt. */
.hinweisband {
  position: fixed; inset: 0 0 auto 0; z-index: calc(var(--z-kopf) + 1);
  background: var(--gruen, #0e3a2c);
  color: var(--creme, #fdeed5);
}
.hinweisband p {
  padding-block: .55rem;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

/* Öffnungszeiten im Band "Wo Sie uns finden". Steht an der Stelle, an
   der vorher die Lücke ("Zeiten bitte ergänzen") stand. */
.zeiten { margin: .5rem 0 .25rem; display: grid; gap: .15rem; }
.zeiten__zeile { display: block; font-size: .95rem; }
.zeiten__zeile b { font-weight: 600; }

/* Zwischenüberschrift in einer Sortengruppe. Kommt im ausgelieferten
   Stand nicht vor, lässt sich im Pflegebereich aber anlegen; sie muss
   über die ganze Rasterbreite gehen. */
.raster__titel { grid-column: 1 / -1; }

.kopf {
  position: fixed; inset: var(--bandhoehe) 0 auto 0; z-index: var(--z-kopf);
  height: var(--kopfhoehe);
  display: flex; align-items: center;
  transition: background-color .35s var(--weich), box-shadow .35s var(--weich);
}
.kopf[data-fest='ja'] {
  background: rgba(253, 238, 213, .88);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 var(--linie-2), 0 10px 30px -24px rgba(14, 58, 44, .5);
}
@media (prefers-reduced-transparency: reduce) {
  .kopf[data-fest='ja'] { background: var(--papier); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.kopf__innen {
  width: 100%; max-width: var(--breite); margin-inline: auto;
  padding-inline: var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.marke img { height: 46px; width: auto; }
.marke__text { display: flex; flex-direction: column; line-height: 1.1; }
.marke__name {
  font-family: 'Young Serif', ui-serif, Georgia, serif;
  font-size: 1.0625rem; color: var(--gruen);
}
.marke__zusatz { font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-3); }

.menue { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); }
.menue a { text-decoration: none; font-weight: 500; font-size: .975rem; position: relative; }
.menue a:not(.knopf)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: var(--gruen); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--weich);
}
.menue a:not(.knopf):hover::after,
.menue a[aria-current='page']::after { transform: scaleX(1); }
.menue .knopf { padding: .68rem 1.3rem; font-size: .95rem; }

.klapper { display: none; }

@media (max-width: 899px) {
  .menue {
    position: fixed; inset: var(--kopfversatz) 0 auto 0; z-index: var(--z-menue);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    padding: .5rem var(--rand) 1.6rem;
    box-shadow: 0 24px 40px -30px rgba(14, 58, 44, .6);
    transform-origin: top;
    display: none;
  }
  .menue[data-offen='ja'] { display: flex; animation: menue-auf .3s var(--weich) both; }
  @media (prefers-reduced-motion: reduce) { .menue[data-offen='ja'] { animation: none; } }
  .menue a:not(.knopf) {
    padding: .95rem 0; font-size: 1.1rem;
    border-bottom: 1px solid var(--linie-2);
  }
  .menue a:not(.knopf)::after { display: none; }
  .menue .knopf { margin-top: 1.1rem; justify-content: center; }

  .klapper {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -8px;
    border-radius: var(--r-pille); color: var(--gruen);
  }
  .klapper .sym { width: 26px; height: 26px; }
  .klapper .sym--zu { display: none; }
  .klapper[aria-expanded='true'] .sym--auf { display: none; }
  .klapper[aria-expanded='true'] .sym--zu { display: block; }
}
@keyframes menue-auf { from { opacity: 0; scale: 1 .96; } to { opacity: 1; scale: 1 1; } }

/* --- Kopfbereich (Startseite) ---------------------------------------------
   Zweispaltig und ungleich: Text links breiter, Bild rechts in Bogenform.
   Unter 900px strikt einspaltig, Bild zuerst.
   -------------------------------------------------------------------------- */
.kopfbereich {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: center;
  padding-top: calc(var(--kopfversatz) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}

/* Weiche Aufhellung hinter dem Text, damit die Fläche nicht flach wirkt.
   Kein Farbverlauf mit zweiter Farbe, nur das Papier in zwei Stufen. */
.kopfbereich::before {
  content: ''; position: absolute; z-index: 0;
  inset: -20% auto auto -15%;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--papier-3) 0%, rgba(255, 251, 241, 0) 68%);
  pointer-events: none;
}

.kopfbereich__innen {
  position: relative; z-index: var(--z-flaeche);
  width: 100%; max-width: var(--breite); margin-inline: auto;
  padding-inline: var(--rand);
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .kopfbereich__innen { grid-template-columns: 1.04fr .96fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}

.kopfbereich__wort { max-width: 34rem; }

.kopfbereich h1 {
  font-size: clamp(2.55rem, 6.1vw, 4.35rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  text-wrap: balance;
}
/* „100 %" ist eine Einheit und darf nie umbrechen. Das geschützte
   Leerzeichen im HTML allein reicht nicht, wenn text-wrap: balance den
   Umbruch neu verteilt, deshalb zusätzlich hier gesperrt. */
.kopfbereich h1 .zahl { color: var(--gruen); white-space: nowrap; }

.kopfbereich .satz {
  margin-top: 1.35rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  max-width: 33rem;
}

.kopfbereich__knoepfe {
  margin-top: 2.1rem;
  display: flex; flex-wrap: wrap; gap: .85rem;
}

/* Bild in Bogenform, zitiert den Bogen der Wortmarke. */
.kopfbereich__bild {
  position: relative;
  border-radius: var(--r-bogen);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--papier-2);
  box-shadow: 0 40px 80px -50px rgba(14, 58, 44, .75);
}
.kopfbereich__bild > img,
.kopfbereich__bild > .bildplatz {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 0;
}
@media (min-width: 900px) {
  .kopfbereich__bild { aspect-ratio: 5 / 6; max-height: 78vh; margin-left: auto; }
}

/* --- Bildplätze ------------------------------------------------------------
   Solange keine Fotos vorliegen, steht hier eine bewusst gestaltete Fläche
   mit der Aufnahmebeschreibung. Sobald die Datei da ist, ersetzt ein
   <img> den Block, sonst ändert sich nichts.
   -------------------------------------------------------------------------- */
.bildplatz {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; text-align: center;
  padding: 1.75rem;
  background:
    repeating-linear-gradient(135deg,
      rgba(20, 85, 65, .05) 0 12px,
      rgba(30, 91, 68, 0) 12px 24px),
    var(--papier-2);
  border-radius: var(--r);
  color: var(--gruen);
  min-height: 180px;
}
.bildplatz .sym { width: 30px; height: 30px; opacity: .55; }
.bildplatz b { font-size: .95rem; font-weight: 700; max-width: 24ch; line-height: 1.4; }
.bildplatz span { font-size: .78rem; color: var(--tinte-3); letter-spacing: .02em; }

/* --- Band: wo man uns findet ----------------------------------------------
   Zwei echte Angaben nebeneinander, getrennt durch eine Haarlinie.
   Eigene Bauform, taucht kein zweites Mal auf.
   -------------------------------------------------------------------------- */
.band {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--papier-3);
}
.band__gitter {
  display: grid; grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 820px) {
  .band__gitter { grid-template-columns: 1fr 1fr; }
  .band__teil + .band__teil { border-left: 1px solid var(--linie); border-top: 0; }
}
.band__teil {
  padding: clamp(2rem, 4vw, 2.9rem) clamp(1.15rem, 3vw, 2.6rem);
  display: flex; gap: 1.1rem; align-items: flex-start;
}
.band__teil + .band__teil { border-top: 1px solid var(--linie); }

.band__zeichen {
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-pille);
  background: var(--gruen); color: var(--papier);
}
.band__zeichen .sym { width: 22px; height: 22px; }

.band h3 { font-size: 1.3rem; line-height: 1.25; }
.band p { margin-top: .4rem; color: var(--tinte-2); font-size: 1rem; }
.band .textlink { margin-top: .75rem; font-size: .95rem; }

/* Offene Angabe, bewusst sichtbar markiert. Wird vor dem Livegang gefüllt. */
.luecke {
  display: inline-block; margin-top: .55rem;
  padding: .32rem .7rem;
  border: 1.5px dashed var(--gruen);
  border-radius: var(--r-klein);
  font-size: .82rem; font-weight: 600; color: var(--gruen);
  background: rgba(20, 85, 65, .055);
}

/* --- Sortenreihe -----------------------------------------------------------
   Waagerechte Leiste mit Einrasten. Zieh- und wischbar, keine Scrollentführung.
   -------------------------------------------------------------------------- */
.sorten__kopf {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sorten__steuer { display: flex; gap: .6rem; }
.pfeil {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-pille);
  box-shadow: inset 0 0 0 1.5px var(--linie);
  color: var(--gruen);
  transition: background-color .25s var(--weich), box-shadow .25s var(--weich), translate .18s var(--weich);
}
.pfeil:hover:not(:disabled) { background: var(--gruen); color: var(--papier); box-shadow: inset 0 0 0 1.5px var(--gruen); }
.pfeil:active:not(:disabled) { translate: 0 1px; }
.pfeil:disabled { opacity: .3; cursor: default; }
.pfeil .sym { width: 20px; height: 20px; }
@media (max-width: 640px) { .sorten__steuer { display: none; } }

.reihe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(255px, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Der Rand darf über die Spalte hinauslaufen, damit die Leiste am
     Bildschirmrand ausläuft statt hart zu stoppen. */
  margin-inline: calc(var(--rand) * -1);
  padding-inline: var(--rand);
  padding-bottom: .5rem;
  cursor: grab;
}
.reihe::-webkit-scrollbar { display: none; }
.reihe[data-zieht='ja'] { cursor: grabbing; scroll-snap-type: none; }
.reihe[data-zieht='ja'] * { pointer-events: none; }
@media (min-width: 720px) { .reihe { grid-auto-columns: minmax(300px, 1fr); } }

.sorte {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  border-radius: var(--r);
  background: var(--papier-3);
  box-shadow: 0 1px 0 var(--linie-2), 0 18px 40px -34px rgba(14, 58, 44, .55);
  overflow: hidden;
  transition: translate .4s var(--weich), box-shadow .4s var(--weich);
}
.sorte:hover { translate: 0 -6px; box-shadow: 0 1px 0 var(--linie-2), 0 30px 50px -32px rgba(14, 58, 44, .6); }
.sorte__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-2); }
.sorte__bild > img, .sorte__bild > .bildplatz {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  transition: scale .6s var(--weich);
}
.sorte:hover .sorte__bild > img { scale: 1.05; }
.sorten__mehr { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.sorte__wort { padding: 1.35rem 1.4rem 1.6rem; }
.sorte h3 { font-size: 1.28rem; line-height: 1.2; }
.sorte p { margin-top: .45rem; font-size: .95rem; color: var(--tinte-2); }

/* --- Dunkle Fläche: Handwerk ----------------------------------------------
   Der eine Farbblock der Seite. Grün aus dem Logo, deutlich abgesetzt.
   -------------------------------------------------------------------------- */
.handwerk {
  background: var(--gruen-tief);
  color: var(--auf-dunkel);
  overflow: hidden;
}
.handwerk__gitter {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .handwerk__gitter { grid-template-columns: .92fr 1.08fr; }
}
.handwerk h2 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; max-width: 15ch; }
.handwerk .satz { margin-top: 1.3rem; }
.handwerk .satz + .satz { margin-top: 1rem; }

/* Der Laib. Beim Durchscrollen dreht er sich, weil er täglich gewendet wird.
   Umgesetzt mit einer scrollgetriebenen CSS-Zeitachse, ohne scroll-Horcher. */
.laib {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.laib__ring {
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px solid var(--linie-dunkel);
  pointer-events: none;
}
.laib__ring--zwei { inset: -2%; opacity: .55; }
.laib__bild {
  position: relative;
  width: min(100%, 460px); aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(253, 238, 213, .06);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
  transform: rotate(-14deg);
}
.laib__bild > img, .laib__bild > .bildplatz {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
.laib .bildplatz {
  background:
    repeating-linear-gradient(135deg,
      rgba(253, 238, 213, .07) 0 12px,
      rgba(247, 237, 214, 0) 12px 24px),
    rgba(253, 238, 213, .05);
  color: var(--auf-dunkel);
}
.laib .bildplatz span { color: var(--auf-dunkel-2); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .laib__bild {
      animation: laib-wenden linear both;
      animation-timeline: view();
      animation-range: entry 15% exit 85%;
    }
  }
}
@keyframes laib-wenden {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(14deg); }
}

/* Merksätze zum Handwerk. Zwei Spalten, keine Kartenkästen, nur Linien. */
.merksatz { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
@media (min-width: 620px) { .merksatz { grid-template-columns: 1fr 1fr; gap: 1.6rem 2.2rem; } }
.merksatz div { padding-top: 1.1rem; border-top: 1px solid var(--linie-dunkel); }
.merksatz h3 { font-size: 1.1rem; color: var(--auf-dunkel); }
.merksatz p { margin-top: .35rem; font-size: .95rem; color: var(--auf-dunkel-2); line-height: 1.6; }

/* --- Hof: versetzte Doppelspalte ------------------------------------------- */
.hofteil__gitter {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 940px) {
  .hofteil__gitter { grid-template-columns: 1fr 1.12fr; }
}
.hofteil__bild {
  border-radius: var(--r-bogen);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--papier-2);
  box-shadow: 0 40px 80px -55px rgba(14, 58, 44, .8);
}
.hofteil__bild > img, .hofteil__bild > .bildplatz {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
.hofteil h2 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; max-width: 16ch; }
.hofteil .satz { margin-top: 1.3rem; }
.hofteil .satz + .satz { margin-top: 1rem; }

/* Namenszeile statt Zitatkasten */
.unterschrift {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.unterschrift b { font-family: 'Young Serif', ui-serif, Georgia, serif; font-weight: 400; font-size: 1.2rem; }
.unterschrift span { font-size: .9rem; color: var(--tinte-3); }

/* --- Besuch: drei Angaben über voller Breite ------------------------------- */
.besuch { background: var(--papier-2); }
.besuch__kopf { max-width: 40rem; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.besuch__gitter {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--linie);
  border-radius: var(--r); overflow: hidden;
  box-shadow: 0 1px 0 var(--linie-2);
}
@media (min-width: 780px) { .besuch__gitter { grid-template-columns: repeat(3, 1fr); } }
.besuch__teil {
  background: var(--papier-3);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.besuch__teil h3 { font-size: 1.15rem; margin-bottom: .7rem; }
.besuch__teil p { font-size: 1rem; color: var(--tinte-2); }
.besuch__teil a:not(.textlink) { color: var(--gruen); font-weight: 600; text-decoration: none; }
.besuch__teil a:not(.textlink):hover { text-decoration: underline; text-underline-offset: 3px; }
.besuch__teil .textlink { margin-top: .9rem; font-size: .95rem; }

/* Breites Abschlussbild unter den Kontaktangaben. Bewusst keine eingebettete
   Karte: Ein Karteneinbau lädt fremde Server nach und zöge einen
   Einwilligungsbanner nach sich. Die Anfahrt läuft über einen Link. */
.breitbild {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r); overflow: hidden;
  aspect-ratio: 21 / 9; min-height: 260px;
  background: var(--papier-3);
  box-shadow: 0 1px 0 var(--linie-2);
}
.breitbild > img, .breitbild > .bildplatz {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
@media (max-width: 640px) {
  .breitbild { min-height: 0; }
}

/* --- Produktseite: gruppierte Listen ---------------------------------------
   Keine Reihe mit Haarlinie unter jedem Eintrag. Drei Gruppen, je eine
   Überschrift, darunter ein Kartenraster mit Bild.
   -------------------------------------------------------------------------- */
.gruppe + .gruppe { margin-top: clamp(3.5rem, 7vw, 6rem); }
.gruppe__kopf {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--linie);
}
.gruppe__kopf h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15; }
.gruppe__kopf span { font-size: .875rem; color: var(--tinte-3); margin-left: auto; white-space: nowrap; }

.raster {
  display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.6rem);
}
@media (min-width: 560px) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .raster { grid-template-columns: repeat(4, 1fr); } }
/* So viele Spalten wie Einträge, nie eine leere Spur am Zeilenende.
   Vier Einträge nehmen .raster, drei .raster--drei, zwei .raster--zwei. */
@media (min-width: 940px) { .raster--drei { grid-template-columns: repeat(3, 1fr); } }

.raster--zwei { grid-template-columns: 1fr; }
@media (min-width: 560px) { .raster--zwei { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .raster--zwei { grid-template-columns: repeat(2, 1fr); max-width: 62%; } }

/* Ruhige Randnotiz unter einem Abschnitt. Kein Kasten, nur eine Linie und
   ein Einzug, damit sie sich von den Produktkarten absetzt. */
.hinweis {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.4rem 0 0 1.4rem;
  border-top: 1px solid var(--linie);
  border-left: 3px solid var(--gruen);
}
.hinweis p { color: var(--tinte-2); max-width: 62ch; }
.hinweis b { color: var(--tinte); font-weight: 700; }

/* --- Fußzeile --------------------------------------------------------------- */
.fuss {
  background: var(--gruen-tief);
  color: var(--auf-dunkel);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.fuss__gitter {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linie-dunkel);
}
@media (min-width: 780px) { .fuss__gitter { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } }
.fuss__marke img { height: 64px; width: auto; }
.fuss__spruch {
  margin-top: 1.1rem;
  font-family: 'Young Serif', ui-serif, Georgia, serif;
  font-size: 1.35rem; line-height: 1.35; color: var(--auf-dunkel);
  max-width: 22ch;
}
.fuss h4 {
  font-family: 'Figtree', sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--auf-dunkel-2); margin-bottom: .95rem;
}
.fuss ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.fuss a { text-decoration: none; color: var(--auf-dunkel); font-size: .975rem; }
.fuss a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fuss address { font-style: normal; font-size: .975rem; color: var(--auf-dunkel); line-height: 1.75; }
/* Pflichtangabe zur ELER-Förderung. Stand auf der alten Seite und muss
   erhalten bleiben, siehe README. Das Emblem braucht eine helle Fläche,
   sonst geht es auf dem Grün unter. */
.fuss__foerderung {
  display: grid; gap: 1.25rem;
  align-items: center;
  padding-top: 1.75rem;
}
@media (min-width: 620px) { .fuss__foerderung { grid-template-columns: auto 1fr; gap: 1.5rem; } }
.fuss__foerderung img {
  width: 190px; height: auto;
  background: #fff;
  border-radius: var(--r-klein);
  padding: 10px;
}
.fuss__foerderung p {
  font-size: .84rem; line-height: 1.6;
  color: var(--auf-dunkel-2); max-width: 58ch;
}
.fuss__foerderung a { font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }

.fuss__unten {
  margin-top: 1.75rem;
  border-top: 1px solid var(--linie-dunkel);
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .85rem; color: var(--auf-dunkel-2);
}

/* --- Rechtstexte, Lesespalte ------------------------------------------------ */
.lesen { max-width: 68ch; }
.lesen h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); line-height: 1.1; margin-bottom: 1.6rem; }
.lesen h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-top: 2.6rem; margin-bottom: .7rem; }
.lesen h3 { font-size: 1.1rem; margin-top: 1.8rem; margin-bottom: .5rem; }
.lesen p, .lesen li { color: var(--tinte-2); }
.lesen p + p { margin-top: .9rem; }
.lesen ul { margin: .8rem 0 0 1.2rem; display: grid; gap: .4rem; }
.lesen a { color: var(--gruen); font-weight: 600; }
.lesen address { font-style: normal; line-height: 1.8; color: var(--tinte-2); }
.lesen .luecke { margin-top: 0; }

/* Vorspann über den Rechtstexten, damit der feste Kopf nicht überdeckt */
.vorspann { padding-top: calc(var(--kopfversatz) + clamp(2.5rem, 6vw, 4.5rem)); }

/* --- Bewegung ---------------------------------------------------------------
   1. Kopfbereich fährt beim Laden gestaffelt ein.
   2. Abschnitte blenden beim Erreichen ein, gesteuert per IntersectionObserver.
   Beides nur transform und opacity. Bei prefers-reduced-motion ist alles
   sofort sichtbar, es wird nichts bewegt.
   -------------------------------------------------------------------------- */
/* Wichtig: Der versteckte Zustand hängt an .js-bewegt am html-Element. Die
   Klasse setzt das Skript erst, wenn es das Einblenden auch wirklich
   übernehmen kann. Ohne Skript, ohne IntersectionObserver oder bei
   prefers-reduced-motion steht der Inhalt sofort da. So kann eine
   Verzierung den Inhalt nie verschlucken. */
.js-bewegt [data-auf] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--weich), transform .7s var(--weich);
}
.js-bewegt [data-auf='ja'] { opacity: 1; transform: none; }

.verzug-1 { transition-delay: .08s; }
.verzug-2 { transition-delay: .16s; }
.verzug-3 { transition-delay: .24s; }
.verzug-4 { transition-delay: .32s; }

@media (prefers-reduced-motion: no-preference) {
  .einzug { opacity: 0; animation: einzug .9s var(--weich) both; }
  .einzug-1 { animation-delay: .05s; }
  .einzug-2 { animation-delay: .17s; }
  .einzug-3 { animation-delay: .29s; }
  .einzug-4 { animation-delay: .41s; }
}
@keyframes einzug {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Das Kopfbild setzt sich beim Laden, danach wandert es beim Scrollen leicht
   mit. Auch das ohne scroll-Horcher, über eine scrollgetriebene Zeitachse. */
@media (prefers-reduced-motion: no-preference) {
  .kopfbereich__bild { opacity: 0; animation: bild-setzen 1.1s var(--weich) .12s both; }
}
@keyframes bild-setzen {
  from { opacity: 0; transform: scale(1.05) translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .kopfbereich__bild > img { animation: mitwandern linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes mitwandern {
  from { transform: scale(1.08) translateY(-2%); }
  to   { transform: scale(1.08) translateY(4%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- Papierkorn, fest und ohne Mausannahme ---------------------------------
   Liegt fest über allem, scrollt nicht mit, daher keine Dauerneuzeichnung.
   -------------------------------------------------------------------------- */
.korn {
  position: fixed; inset: 0; z-index: var(--z-korn);
  pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) { .korn { display: none; } }


/* Ersatz fuer ein Wortzeichen, das es in der
   Musterfassung nicht gibt. Erbt Farbe und Groesse
   von der Kopfzeile, in der es steht. */
.marke-ersatz {
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: currentColor;
}