/* Obstbau Dahlhausen — Stilblatt
   Farben: dunkles Grün aus dem Hoflogo, Apfelrot als Akzent, Creme als Grund.
   Kontraste sind gerechnet, siehe Kommentare an der Palette. */

/* ============================================================ Grundlagen */
:root {
  /* Farben. Verhältnis jeweils gegen --creme (#FDFAF3) */
  --gruen-900: #14351C;   /* 14,1 : 1  — Überschriften, Fußzeile          */
  --gruen-700: #1F5B2B;   /*  7,1 : 1  — Text, Knöpfe, Verknüpfungen      */
  --gruen-500: #3E8E41;   /*  3,6 : 1  — nur ab 24 px oder auf Dunkel     */
  --gruen-300: #8CC63F;   /*  1,9 : 1  — nur Fläche, nie Text             */
  --rot: #B4261E;         /*  6,3 : 1  — Akzent, Bestseller               */
  --rot-hell: #F6E2E0;
  --creme: #FDFAF3;
  --sand: #F3E9D8;
  --sand-tief: #E7D8BE;
  --text: #2B2620;        /* 14,3 : 1                                     */
  --text-leise: #4E463D;  /*  8,7 : 1  — auch auf den Fotogruenden sicher */
  --weiss: #FFFFFF;

  --rund: 18px;
  --rund-gross: 28px;
  --schatten: 0 2px 4px rgba(43, 38, 32, .05), 0 8px 24px rgba(43, 38, 32, .07);
  --schatten-hoch: 0 6px 12px rgba(43, 38, 32, .08), 0 20px 48px rgba(43, 38, 32, .12);
  --breite: 1200px;
  --schrift-kopf: 'Fraunces', Georgia, 'Times New Roman', serif;
  --schrift: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tempo: .38s cubic-bezier(.22, .8, .3, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 120px; }

/* Der Grundton liegt auf html, damit die Bildschicht darunter darüber
   gemalt werden kann. Steht sie auf body, verschwindet sie hinter dessen
   eigenem Hintergrund. */
html { background: var(--creme); }

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ein leicht durchscheinendes Foto aus der Anlage liegt fest hinter allem.
   Es füllt die Stellen, an denen kein Abschnitt sein eigenes Motiv mitbringt,
   etwa hinter der halbdurchsichtigen Kopfzeile.
   Gerechnet: dunkelste Stelle des Fotos 0,370, bei 10 Prozent über dem Creme
   ergibt das einen dunkelsten Grund von 0,905. Fließtext 12,6 : 1. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('bilder/hintergrund-anlage.jpg?v=20260919a');
  background-size: cover; background-position: center;
  opacity: .10;
}

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

h1, h2, h3, h4 {
  font-family: var(--schrift-kopf);
  color: var(--gruen-900);
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p { margin: 0 0 1.1em; }
a { color: var(--gruen-700); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* Telefonnummern werden angetippt, nicht gelesen. Überall 44 Pixel hoch. */
a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }

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

.huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.eng { width: min(100% - 2.5rem, 820px); margin-inline: auto; }

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* Nur fuer Vorleseprogramme. clip-path muss dazu, sonst zieht der Text auf
   schmalen Bildschirmen die Dokumentbreite auseinander und die Seite laesst
   sich seitlich schieben. */
.nur-fuer-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.spring-zum-inhalt {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--gruen-900); color: var(--weiss);
  padding: .8rem 1.2rem; border-radius: 0 0 12px 12px; font-weight: 700;
}
.spring-zum-inhalt:focus { top: 0; color: var(--weiss); }

/* Solange das Schubfach offen ist, scrollt der Hintergrund nicht mit. */
body.menue-liegt-offen { overflow: hidden; }

/* ============================================================== Kopfzeile */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 250, 243, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.kopf.geschrumpft { border-bottom-color: var(--sand-tief); box-shadow: 0 4px 20px rgba(43, 38, 32, .06); }

/* ---------------------------------------------- Kopfzeile über der Bühne
   Auf der Startseite liegt das Hero-Foto bis ganz nach oben. Die Kopfzeile
   steht darin, ohne eigene Fläche: kein heller Balken über dem Bild. Damit
   Logo, Menü und Symbole lesbar bleiben, sind sie dort weiß. Das Logo ist
   in seiner Grundform dunkelgrün, auf dem Foto wäre das nicht zu lesen,
   deshalb wird es zu einer weißen Fassung umgerechnet.
   Gerechnet: Weiß auf der dunkelsten Stelle der Bildabdunklung (0,055)
   ergibt 15,3 : 1, auf der hellsten Stelle des Fotos unter der Abdunklung
   noch 4,9 : 1. Der Schattenwurf hält es auch über hellen Stellen lesbar. */
.mit-buehne .kopf { position: fixed; left: 0; right: 0; }

/* Die Fotos wechseln, und eines davon hat oben das helle Hofladen-Schild.
   Weiße Schrift wäre darauf nicht zu lesen. Darum liegt über dem oberen
   Rand des Bildes eine zusätzliche Abdunklung, die nach unten ausläuft.
   Sie wirkt wie eine Vignette und macht die Kopfzeile auf jedem der fünf
   Fotos lesbar. */
.mit-buehne .buehne-bild::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 230px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 53, 28, .74) 0%,
    rgba(20, 53, 28, .48) 45%,
    rgba(20, 53, 28, 0) 100%);
}
.kopf.im-bild {
  background: transparent; backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none;
}
.kopf.im-bild .marke-logo {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(20, 53, 28, .75));
}
/* Weiße Schrift gilt nur für die Menüleiste am Rechner. Unter 860 Pixeln
   ist .menue das ausklappbare Schubfach mit eigenem hellem Grund, dort wäre
   weiße Schrift nicht zu lesen. */
@media (min-width: 860px) {
  .kopf.im-bild .menue > a,
  .kopf.im-bild .kopf-sozial a {
    color: var(--weiss);
    text-shadow: 0 1px 10px rgba(20, 53, 28, .7);
  }
  .kopf.im-bild .menue > a::after { background: var(--weiss); }
}
.kopf.im-bild .kopf-sozial a {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.kopf.im-bild .menue-schalter {
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.kopf.im-bild .menue-schalter span,
.kopf.im-bild .menue-schalter span::before,
.kopf.im-bild .menue-schalter span::after { background: var(--weiss); }


.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0;
  transition: padding var(--tempo);
}
.kopf.geschrumpft .kopf-innen { padding: .5rem 0; }

/* Wortmarke */
.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; min-height: 46px; }
/* Das Logo des Hofes. Es ist ein rundes Siegel mit Bogenschrift, darum steht
   der Name als Text daneben: in Kopfzeilengröße wäre die Bogenschrift nicht
   mehr lesbar. Auf der dunklen Fußzeile liegt es auf einer hellen Fläche,
   sonst verschwindet die dunkelgrüne Schrift im Grund. */
/* Für Vorleseprogramme, auf dem Bildschirm nicht zu sehen */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.marke-logo {
  width: 142px; height: auto; flex-shrink: 0;
  transition: transform var(--tempo);
}
.fuss .marke-logo {
  width: 92px; background: var(--creme); border-radius: 12px;
  padding: .45rem .55rem;
}
.marke-text { display: flex; flex-direction: column; line-height: 1.05; }
.marke-oben {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gruen-700); font-weight: 700;
}
.marke-name {
  font-family: var(--schrift-kopf); font-weight: 700; font-size: 1.35rem;
  color: var(--gruen-900); letter-spacing: -.01em;
}
.marke-unten {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-leise); font-weight: 600;
}

/* Menü */
.menue { display: flex; align-items: center; gap: .35rem; }
.menue a {
  text-decoration: none; color: var(--gruen-900); font-weight: 600;
  padding: .7rem .85rem; border-radius: 999px; font-size: .97rem;
  position: relative; transition: background var(--tempo), color var(--tempo);
  min-height: 44px; display: inline-flex; align-items: center;
}
.menue a[aria-current="page"] { color: var(--gruen-700); }
.menue a[aria-current="page"]::after {
  content: ''; position: absolute; left: 50%; bottom: .35rem;
  width: 18px; height: 3px; margin-left: -9px; border-radius: 2px;
  background: var(--rot);
}

/* Instagram und Facebook oben rechts, direkt neben der Telefonnummer. */
.kopf-sozial { display: flex; gap: .4rem; flex-shrink: 0; }
.kopf-sozial a {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--sand); color: var(--gruen-900);
  display: grid; place-items: center; text-decoration: none;
  transition: background var(--tempo), color var(--tempo), transform var(--tempo);
}
.menue-sozial { display: none; }

.knopf-anruf {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gruen-700); color: var(--weiss); text-decoration: none;
  padding: .7rem 1.15rem; border-radius: 999px; font-weight: 700;
  min-height: 44px; font-size: .97rem;
  transition: transform var(--tempo), background var(--tempo);
}

/* Im Schubfach gewinnt sonst .menue a (Klasse + Typ) gegen .knopf-anruf
   (nur Klasse). Der Anrufknopf haette dann dunkelgruene Schrift auf
   gruenem Grund, gemessen 1,66 : 1. Deshalb hier ausdruecklich weiss. */
.menue a.knopf-anruf { color: var(--weiss); font-weight: 700; }

/* Der Anrufknopf steht zweimal im Kopf: einmal im Schubfach fürs Handy,
   einmal daneben für große Bildschirme. Immer nur einer ist sichtbar.
   Kopf und Fuß des Schubfachs gibt es nur auf schmalen Bildschirmen. */
.menue .knopf-anruf,
.menue-kopf,
.menue-fuss { display: none; }

.menue-schalter {
  display: none; width: 48px; height: 48px; border: 0; border-radius: 14px;
  background: var(--sand); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.menue-schalter span {
  display: block; width: 20px; height: 2px; background: var(--gruen-900);
  border-radius: 2px; position: relative; transition: transform var(--tempo), background var(--tempo);
}
.menue-schalter span::before, .menue-schalter span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--gruen-900); border-radius: 2px; transition: transform var(--tempo);
}
.menue-schalter span::before { top: -6px; }
.menue-schalter span::after { top: 6px; }
/* Der Knopf mit den drei Strichen wird beim Öffnen NICHT zum Kreuz.
   Das Schubfach bringt sein eigenes Kreuz mit, und zwei Kreuze
   übereinander waren auf dem Handy nicht zu unterscheiden. */

/* ================================================================== Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1.02rem; text-decoration: none; cursor: pointer;
  min-height: 52px; font-family: var(--schrift);
  transition: transform var(--tempo), background var(--tempo), box-shadow var(--tempo), color var(--tempo);
}
.knopf-voll { background: var(--gruen-700); color: var(--weiss); box-shadow: var(--schatten); }
.knopf-rand { background: transparent; color: var(--gruen-900); border-color: var(--gruen-700); }
/* Knopf, der auf einem Foto steht. Der Hintergrund wechselt dort Bild für Bild,
   deshalb bringt der Knopf seine eigene dunkle Fläche mit. Weiß auf
   rgba(20,53,28,.86) ergibt selbst über einer rein weißen Stelle des Fotos
   noch 9,0 : 1 und ist damit unabhängig vom Bild sicher. */
.knopf-auf-bild {
  background: rgba(20, 53, 28, .86); color: var(--weiss); border-color: var(--weiss);
}

.knopf-hell { background: var(--weiss); color: var(--gruen-900); box-shadow: var(--schatten); }

/* ================================================================== Bühne */
.buehne { position: relative; min-height: min(92vh, 780px); display: flex; align-items: flex-end; overflow: hidden; }
.buehne-bild { position: absolute; inset: 0; }
/* Die Fotos liegen uebereinander. Sichtbar ist immer genau eines,
   der Wechsel laeuft als weiche Blende. */
.buehne-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  opacity: 0; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}
.buehne-foto.ist-da { opacity: 1; }
.buehne-bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 53, 28, .55) 0%, rgba(20, 53, 28, .18) 32%, rgba(20, 53, 28, .72) 78%, rgba(20, 53, 28, .88) 100%);
}
.buehne-innen { position: relative; z-index: 2; padding: 3rem 0 3.5rem; width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.buehne h1 { color: var(--weiss); text-shadow: 0 2px 24px rgba(20, 53, 28, .6); max-width: 16ch; }
.buehne-schild {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255, 255, 255, .94); color: var(--gruen-900);
  padding: .5rem 1.1rem; border-radius: 999px; font-weight: 700;
  font-size: .92rem; margin-bottom: 1.4rem;
}
.buehne-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--gruen-500); flex-shrink: 0; }
.buehne-punkt.zu { background: var(--rot); }
.buehne-spruch {
  font-family: var(--schrift-kopf); font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  color: var(--weiss); font-weight: 500; margin-bottom: 2rem;
  text-shadow: 0 2px 18px rgba(20, 53, 28, .7); max-width: 30ch;
}
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Sanftes Heranfahren.
   Wichtig: die Bewegung liegt auf dem Rahmen, nicht auf den einzelnen Fotos.
   Vorher bekam jedes Foto beim Einblenden seine eigene Animation. Das
   abgehende Foto sprang dabei im Moment des Wechsels von seiner gerade
   erreichten Größe zurück auf die Ausgangsgröße, und weil es noch eine
   Sekunde lang sichtbar war, sah man genau diesen Sprung. Jetzt bewegt
   sich der ganze Rahmen langsam und gleichmäßig, die Fotos blenden nur
   noch ineinander. Damit kann nichts mehr springen. */
@media (prefers-reduced-motion: no-preference) {
  .buehne-bild { animation: langsam-heran 34s ease-in-out infinite alternate; }
}
@keyframes langsam-heran {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* =========================================================== Saisonstreifen */
.saison-streifen { background: var(--gruen-900); color: var(--weiss); padding: 1.4rem 0; }
.saison-innen { display: flex; align-items: center; gap: 1rem 1.6rem; flex-wrap: wrap; }
.saison-titel {
  font-family: var(--schrift-kopf); font-size: 1.15rem; font-weight: 600;
  color: var(--weiss); margin: 0; flex-shrink: 0;
}
.saison-liste { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.saison-liste li {
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22);
  padding: .35rem .9rem; border-radius: 999px; font-size: .93rem; font-weight: 600;
  opacity: 0; transform: translateY(8px);
  animation: chip-auf .5s cubic-bezier(.22, .8, .3, 1) forwards;
}
@keyframes chip-auf { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .saison-liste li { opacity: 1; transform: none; animation: none; } }

/* =============================================================== Abschnitte */
.abschnitt-kopf { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.abschnitt-kopf.mittig { margin-inline: auto; text-align: center; }
.oberzeile {
  display: inline-block; font-size: .74rem; font-weight: 800;
  letter-spacing: .19em; text-transform: uppercase; color: var(--gruen-700);
  margin-bottom: .8rem;
}
.abschnitt-kopf p { color: var(--text-leise); font-size: 1.1rem; margin-bottom: 0; }

.grund-sand { background-color: var(--sand); }
.grund-gruen { background: var(--gruen-900); color: var(--sand); }
.grund-gruen h2, .grund-gruen h3 { color: var(--weiss); }
.grund-gruen .oberzeile { color: var(--gruen-300); }
.grund-gruen p { color: #E3DCCD; }   /* 10,4 : 1 auf --gruen-900 */

/* ================================================== Motive im Hintergrund
   Jeder große Abschnitt bekommt ein eigenes Foto vom Hof statt einer glatten
   Farbfläche. Das Motiv soll erkennbar sein, deshalb wird es nur leicht
   weichgezeichnet und stattdessen sein ganzer Tonwertumfang in den hellen
   Bereich gestaucht. Die Obergrenze ist der jeweilige Grundton, die
   Untergrenze so gesetzt, dass der Kontrast sicher bleibt.

   Der Vorteil gegenüber einer Deckschicht: die Helligkeit steckt im Bild
   selbst. Der Kontrast hängt damit nicht an einem CSS-Wert, den jemand
   später versehentlich verstellt.

   Für jedes der zwölf Bilder die dunkelste Stelle gemessen:
     auf Creme   0,573 bis 0,596  ->  Fließtext 8,2 bis 8,5 : 1, leiser Text 5,3 bis 5,5 : 1
     auf Sand    0,567 bis 0,581  ->  Fließtext 8,1 bis 8,3 : 1, leiser Text 5,3 bis 5,4 : 1
   Nötig sind 4,5 : 1. */
.foto-grund {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.foto-aepfel   { background-image: url('bilder/grund-aepfel.jpg?v=20260919a'); }
.foto-birnen   { background-image: url('bilder/grund-birnen.jpg?v=20260919a'); }
.foto-anlage   { background-image: url('bilder/grund-anlage.jpg?v=20260919a'); }
.foto-laden    { background-image: url('bilder/grund-laden.jpg?v=20260919a'); }
.foto-kirschen { background-image: url('bilder/grund-kirschen.jpg?v=20260919a'); }
.foto-ernte    { background-image: url('bilder/grund-ernte.jpg?v=20260919a'); }

/* In den sandfarbenen Abschnitten dieselben Motive, nur über dem Sandton
   angerührt, damit der warme Wechsel zwischen den Abschnitten bleibt. */
.grund-sand.foto-aepfel   { background-image: url('bilder/grund-aepfel-sand.jpg?v=20260919a'); }
.grund-sand.foto-birnen   { background-image: url('bilder/grund-birnen-sand.jpg?v=20260919a'); }
.grund-sand.foto-anlage   { background-image: url('bilder/grund-anlage-sand.jpg?v=20260919a'); }
.grund-sand.foto-laden    { background-image: url('bilder/grund-laden-sand.jpg?v=20260919a'); }
.grund-sand.foto-kirschen { background-image: url('bilder/grund-kirschen-sand.jpg?v=20260919a'); }
.grund-sand.foto-ernte    { background-image: url('bilder/grund-ernte-sand.jpg?v=20260919a'); }

/* ============================================================ Werte-Kacheln */
/* Flexbox statt Raster: eine angebrochene letzte Reihe steht dann mittig
   statt linksbuendig. Auf Tablet und Handy sieht das deutlich ruhiger aus. */
.werte { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.werte > * { flex: 1 1 250px; max-width: 380px; }
/* Ab Tabletbreite immer drei Kacheln je Reihe. Sechs Kacheln stehen dann
   drei oben und drei unten, fuenf stehen drei oben und zwei mittig darunter. */
@media (min-width: 700px) {
  .werte > * { flex: 1 1 calc(33.333% - .8rem); }
}
.wert {
  background: var(--weiss); border-radius: var(--rund); padding: 1.6rem 1.4rem;
  overflow: hidden;
  box-shadow: var(--schatten); border: 1px solid var(--sand-tief);
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .3, 1);
}
.wert.sichtbar { opacity: 1; transform: none; }
.wert-zeichen {
  font-size: 1.9rem; line-height: 1; margin-bottom: .7rem;
  display: inline-block; transform-origin: center center;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.wert.im-blick { transform: translateY(-6px); box-shadow: var(--schatten-hoch); border-color: var(--gruen-300); }
.wert.im-blick .wert-zeichen { transform: scale(1.22) rotate(-7deg); }
.wert h3 { font-size: 1.05rem; margin-bottom: .35rem; font-family: var(--schrift); font-weight: 800; }
.wert p { margin: 0; color: var(--text-leise); font-size: .97rem; }

/* ============================================================ Erntekalender */
.kalender-band {
  display: flex; gap: .4rem; overflow-x: auto; padding: .35rem .35rem .9rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.kalender-band button {
  position: relative; flex: 0 0 auto; border: 2px solid var(--sand-tief); background: var(--weiss);
  color: var(--gruen-900); border-radius: 999px; padding: .7rem 1.15rem;
  font-weight: 700; font-family: var(--schrift); font-size: .96rem; cursor: pointer;
  min-height: 46px; white-space: nowrap;
  transition: transform var(--tempo), background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.kalender-band button[aria-pressed="true"] {
  background: var(--gruen-700); border-color: var(--gruen-700); color: var(--weiss);
}
.kalender-band button .jetzt {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rot); margin-left: .45rem; vertical-align: middle;
}
.kalender-band button[aria-pressed="true"] .jetzt { background: var(--gruen-300); }

.kalender-tafel {
  background: var(--weiss); border: 1px solid var(--sand-tief);
  border-radius: var(--rund-gross); padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--schatten); margin-top: 1rem;
}
.kalender-ueberschrift { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.kalender-ueberschrift h3 { margin: 0; }
.kalender-anzahl { color: var(--text-leise); font-weight: 600; font-size: .97rem; }

.kalender-gruppe { margin-bottom: 1.5rem; }
.kalender-gruppe:last-of-type { margin-bottom: 0; }
.kalender-gruppe h4 {
  font-family: var(--schrift); font-size: .78rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gruen-700);
  margin-bottom: .7rem;
}
.kalender-liste { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.kalender-liste li {
  position: relative; background: var(--sand); color: var(--gruen-900); border-radius: 999px;
  padding: .45rem 1rem; font-weight: 600; font-size: .96rem;
  opacity: 0; transform: translateY(10px) scale(.96);
  animation: chip-auf .42s cubic-bezier(.22, .8, .3, 1) forwards;
}
.kalender-liste li.ist-bestseller { background: var(--rot-hell); color: #7E1A14; }
.kalender-leer { color: var(--text-leise); margin: 0; }
.kalender-hinweis { font-size: .9rem; color: var(--text-leise); margin: 1.4rem 0 0; }
@media (prefers-reduced-motion: reduce) { .kalender-liste li { opacity: 1; transform: none; animation: none; } }

/* ================================================================ Sortenwelt */
.sorten-gitter { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.sorten-gitter > * { flex: 1 1 255px; max-width: 340px; }
.sorten-karte {
  position: relative; display: block; text-decoration: none; color: inherit;
  border-radius: var(--rund-gross); overflow: hidden; background: var(--gruen-900);
  box-shadow: var(--schatten); aspect-ratio: 4 / 5;
  transition: transform var(--tempo), box-shadow var(--tempo);
}
.sorten-karte img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .8, .3, 1), filter var(--tempo);
}
.sorten-karte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 53, 28, 0) 34%, rgba(20, 53, 28, .82) 100%);
}
.sorten-karte-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem; z-index: 2; }
.sorten-karte h3 { color: var(--weiss); margin: 0 0 .2rem; text-shadow: 0 2px 14px rgba(20, 53, 28, .6); }
.sorten-karte span { color: #E3DCCD; font-weight: 600; font-size: .93rem; }
.sorten-karte.im-blick { transform: translateY(-6px); box-shadow: var(--schatten-hoch); }
.sorten-karte.im-blick img { transform: scale(1.07); }

/* =============================================================== Bestseller */
.bestseller-gitter { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.bestseller-gitter > * { flex: 1 1 300px; max-width: 420px; }
.bestseller {
  background: var(--weiss); border: 1px solid var(--sand-tief); border-radius: var(--rund-gross);
  padding: 1.8rem; box-shadow: var(--schatten); position: relative;
  transition: transform var(--tempo), box-shadow var(--tempo);
}
.bestseller.im-blick { transform: translateY(-5px); box-shadow: var(--schatten-hoch); }
.bestseller-band {
  position: relative; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--rot-hell); color: #7E1A14; font-weight: 800;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.bestseller h3 { margin-bottom: .25rem; }
.bestseller-ernte { color: var(--text-leise); font-size: .93rem; font-weight: 600; margin-bottom: .9rem; }
.bestseller p { color: var(--text-leise); font-size: .99rem; }

.worte { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.worte li {
  background: var(--sand); color: var(--gruen-900); border-radius: 999px;
  padding: .3rem .8rem; font-size: .87rem; font-weight: 700;
}

/* ============================================================== Zwei Läden */
.laden-schalter { display: flex; gap: .5rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.laden-schalter button {
  border: 2px solid var(--sand-tief); background: var(--weiss); color: var(--gruen-900);
  border-radius: 999px; padding: .75rem 1.4rem; font-weight: 700; cursor: pointer;
  font-family: var(--schrift); font-size: 1rem; min-height: 48px;
  transition: background var(--tempo), border-color var(--tempo), color var(--tempo), transform var(--tempo);
}
.laden-schalter button[aria-selected="true"] { background: var(--gruen-700); border-color: var(--gruen-700); color: var(--weiss); }

.laden-tafel { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.laden-tafel[hidden] { display: none; }
.laden-bild { border-radius: var(--rund-gross); overflow: hidden; box-shadow: var(--schatten); }
.laden-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.laden-daten dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.6rem; margin: 0 0 1.4rem; }
.laden-daten dt { font-weight: 700; color: var(--gruen-900); }
.laden-daten dd { margin: 0; color: var(--text-leise); }
/* Die Telefonnummer wird auf dem Handy angetippt, nicht gelesen. */
.laden-daten dd a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.laden-status {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--weiss); border: 1px solid var(--sand-tief);
  padding: .5rem 1rem; border-radius: 999px; font-weight: 700;
  color: var(--gruen-900); margin-bottom: 1.2rem; font-size: .95rem;
}
.laden-status .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--gruen-500); }
.laden-status.zu .punkt { background: var(--rot); }
.laden-hinweis { font-size: .93rem; color: var(--text-leise); background: var(--sand); padding: .9rem 1.1rem; border-radius: 14px; margin: 0 0 1.4rem; }

/* =============================================================== Apfelfinder */
.finder {
  background: var(--weiss); border: 1px solid var(--sand-tief); border-radius: var(--rund-gross);
  padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--schatten);
}
.finder-frage { margin-bottom: 2rem; }
.finder-frage:last-of-type { margin-bottom: 1.6rem; }
.finder-frage > p { font-family: var(--schrift-kopf); font-size: 1.2rem; color: var(--gruen-900); font-weight: 600; margin-bottom: .9rem; }
.finder-wahl { display: flex; flex-wrap: wrap; gap: .6rem; }
.finder-wahl button {
  border: 2px solid var(--sand-tief); background: var(--creme); color: var(--gruen-900);
  border-radius: 999px; padding: .7rem 1.25rem; font-weight: 700; cursor: pointer;
  font-family: var(--schrift); font-size: .98rem; min-height: 48px;
  transition: background var(--tempo), border-color var(--tempo), color var(--tempo), transform var(--tempo);
}
.finder-wahl button[aria-pressed="true"] { background: var(--gruen-700); border-color: var(--gruen-700); color: var(--weiss); }
.finder-antwort {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.22, .8, .3, 1);
}
.finder-antwort.offen { grid-template-rows: 1fr; }
.finder-antwort > div { overflow: hidden; }
.finder-treffer { background: var(--sand); border-radius: var(--rund); padding: 1.5rem; }
.finder-treffer h3 { margin-bottom: .3rem; }
.finder-treffer .ernte { color: var(--text-leise); font-weight: 600; font-size: .93rem; margin-bottom: .8rem; }

/* ================================================================ Sortenliste */
.filter-leiste { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1.6rem; }
.filter-knoepfe { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-knoepfe button {
  border: 2px solid var(--sand-tief); background: var(--weiss); color: var(--gruen-900);
  border-radius: 999px; padding: .6rem 1.1rem; font-weight: 700; cursor: pointer;
  font-family: var(--schrift); font-size: .95rem; min-height: 46px;
  transition: background var(--tempo), border-color var(--tempo), color var(--tempo), transform var(--tempo);
}
.filter-knoepfe button[aria-pressed="true"] { background: var(--gruen-700); border-color: var(--gruen-700); color: var(--weiss); }

.suchfeld { position: relative; flex: 1 1 240px; max-width: 340px; }
.suchfeld input {
  width: 100%; border: 2px solid var(--sand-tief); background: var(--weiss);
  border-radius: 999px; padding: .75rem 1.1rem .75rem 2.7rem; min-height: 46px;
  font-family: var(--schrift); font-size: 1rem; color: var(--text);
}
.suchfeld input::placeholder { color: var(--text-leise); }
.suchfeld input:focus { border-color: var(--gruen-500); outline: none; }
.suchfeld svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); pointer-events: none; }

.treffer-zahl { color: var(--text-leise); font-weight: 600; margin: 0 0 1.4rem; }

.sortenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.sorte {
  background: var(--weiss); border: 1px solid var(--sand-tief); border-radius: var(--rund);
  box-shadow: 0 1px 2px rgba(43, 38, 32, .04);
  transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
}
.sorte.im-blick { transform: translateY(-4px); box-shadow: var(--schatten); border-color: var(--gruen-300); }
.sorte-kopf {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.3rem 1.4rem; font-family: var(--schrift); color: inherit;
  display: flex; gap: 1rem; align-items: flex-start; min-height: 44px;
}
.sorte-kopf > div { flex: 1; min-width: 0; }

/* Vorschaubild links in der Karte. Der Platz ist immer reserviert, damit
   beim Überfahren nichts verrutscht. In Ruhe ist das Bild etwas zurück-
   genommen, beim Überfahren oder beim Vorbeiscrollen tritt es hervor. */
.sorte-bild {
  flex: 0 0 76px; width: 76px; height: 76px; border-radius: 14px;
  overflow: hidden; background: var(--sand); display: block;
  box-shadow: inset 0 0 0 1px var(--sand-tief);
}
/* Sorten ohne Foto bekommen eine ruhige Kachel mit einem Umriss statt eines
   Bildes, das eine andere Frucht zeigt. Der Platz bleibt gleich. */
.sorte-bild-leer {
  display: flex; align-items: center; justify-content: center;
  color: var(--gruen-500);
}
.sorte-bild-leer svg { opacity: .55; }
.sorte.im-blick .sorte-bild-leer svg { opacity: .85; }

.sorte-bild img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .82; filter: saturate(.85);
  transition: transform .55s cubic-bezier(.22, .8, .3, 1), opacity var(--tempo), filter var(--tempo);
}
.sorte.im-blick .sorte-bild img {
  transform: scale(1.12); opacity: 1; filter: saturate(1.1);
}
.sorte-name { font-family: var(--schrift-kopf); font-size: 1.2rem; font-weight: 600; color: var(--gruen-900); display: block; }
.sorte-zusatz { color: var(--text-leise); font-weight: 600; font-size: .88rem; }
.sorte-ernte { color: var(--gruen-700); font-weight: 700; font-size: .88rem; display: block; margin-top: .15rem; }
.sorte .worte { margin-top: .8rem; }
.sorte-pfeil { flex-shrink: 0; margin-top: .4rem; transition: transform var(--tempo); color: var(--gruen-700); }
.sorte-kopf[aria-expanded="true"] .sorte-pfeil { transform: rotate(180deg); }
.sorte-text { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.22, .8, .3, 1); }
.sorte-text.offen { grid-template-rows: 1fr; }
.sorte-text > div { overflow: hidden; }
.sorte-text p { padding: 0 1.4rem 1.4rem; margin: 0; color: var(--text-leise); font-size: .99rem; }
.stern {
  flex-shrink: 0; background: var(--rot-hell); color: #7E1A14; font-weight: 800;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px; margin-top: .3rem;
}
.stern.hof { background: #E4EFD9; color: #2F5416; }

/* ================================================================== Galerie */
.galerie { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.galerie > * { flex: 1 1 200px; max-width: 300px; }
/* Zwoelf Bilder: vier je Reihe ergibt drei volle Reihen. */
@media (min-width: 900px) {
  .galerie > * { flex: 1 1 calc(25% - .7rem); max-width: none; }
}
.galerie button {
  border: 0; padding: 0; background: var(--sand); cursor: pointer; overflow: hidden;
  border-radius: var(--rund); aspect-ratio: 1; display: block; width: 100%;
  transition: transform var(--tempo), box-shadow var(--tempo);
}
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, .8, .3, 1); }
.galerie button.im-blick { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.galerie button.im-blick img { transform: scale(1.08); }

.leuchtkasten {
  position: fixed; inset: 0; z-index: 300; border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: rgba(20, 53, 28, .94); display: none;
}
.leuchtkasten[open] { display: grid; place-items: center; }
.leuchtkasten::backdrop { background: rgba(20, 53, 28, .94); }
.leuchtkasten img { max-width: min(94vw, 1100px); max-height: 84vh; border-radius: var(--rund); object-fit: contain; }
.leuchtkasten figcaption { color: #E3DCCD; text-align: center; margin-top: .9rem; font-size: .95rem; padding: 0 1rem; }
.leuchtkasten-zu {
  position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px;
  border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: var(--weiss);
  font-size: 1.5rem; cursor: pointer; line-height: 1;
}

/* ================================================================= Formular */
.formular { display: grid; gap: 1.1rem; }
.feld { display: flex; flex-direction: column; gap: .4rem; }
.feld label { font-weight: 700; color: var(--gruen-900); font-size: .97rem; }
.feld input, .feld textarea, .feld select {
  border: 2px solid var(--sand-tief); border-radius: 14px; background: var(--weiss);
  padding: .85rem 1rem; font-family: var(--schrift); font-size: 1rem; color: var(--text);
  min-height: 48px; width: 100%;
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--gruen-500); outline: none; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zustimmung { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--text-leise); }
.zustimmung input { width: 22px; height: 22px; min-height: 22px; flex-shrink: 0; margin-top: .2rem; accent-color: var(--gruen-700); }
.meldung { border-radius: 14px; padding: 1rem 1.2rem; font-weight: 600; margin-bottom: 1.2rem; }
.meldung.gut { background: #E4EFD9; color: #2F5416; }
.meldung.schlecht { background: var(--rot-hell); color: #7E1A14; }

/* =================================================================== Karte */
.karte-rahmen { border-radius: var(--rund-gross); overflow: hidden; box-shadow: var(--schatten); border: 1px solid var(--sand-tief); background: var(--sand); }
.karte-rahmen iframe { display: block; width: 100%; height: 420px; border: 0; }
.karte-platzhalter { padding: 2.5rem 1.5rem; text-align: center; }
.karte-platzhalter p { color: var(--text-leise); max-width: 44ch; margin-inline: auto; }

/* ================================================================= Fußzeile */
.fuss { background: var(--gruen-900); color: #E3DCCD; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.fuss-gitter { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2.2rem; margin-bottom: 2.5rem; }
.fuss h3 { color: var(--weiss); font-family: var(--schrift); font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.fuss a { color: #E3DCCD; text-decoration: none; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; }
/* Klickziele in der Fußzeile mindestens 44 px hoch, damit sie auf dem Handy
   sicher zu treffen sind. */
.fuss ul a, .fuss p a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss p { color: #E3DCCD; }
.fuss .marke-name, .fuss .marke-oben { color: var(--weiss); }
.fuss .marke-unten { color: #BFB7A6; }   /* 8,0 : 1 auf --gruen-900 */
.fuss-unten {
  border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1.6rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .92rem; color: #BFB7A6;
}
.fuss-sozial { display: flex; gap: .6rem; }
.fuss-sozial a {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12);
  display: grid; place-items: center; transition: background var(--tempo), transform var(--tempo);
}

/* Scrollzustand für die Teile, die am Rechner auf den Zeiger reagieren.
   Auf Handy und Tablet übernimmt das Scrollen diese Rolle. */
.knopf.im-blick { transform: translateY(-3px); }
.knopf-voll.im-blick { background: var(--gruen-900); box-shadow: var(--schatten-hoch); }
.knopf-rand.im-blick { background: var(--gruen-700); color: var(--weiss); }
.knopf-hell.im-blick { background: var(--sand); }
.knopf-auf-bild.im-blick { background: var(--gruen-900); }
.sorten-chip.im-blick { background: var(--gruen-700); color: var(--weiss); transform: translateY(-3px); }
.sorten-chip.ist-bestseller.im-blick { background: var(--rot); color: var(--weiss); }
.ernte-name.im-blick { color: var(--rot); transform: translateX(3px); }
.fuss-sozial a.im-blick { background: var(--gruen-500); transform: translateY(-3px); }

/* Hinweiskasten auf der Sortenseite, wenn kein Foto vorliegt */
.detail-ohne-bild {
  display: flex; flex-direction: column; justify-content: center;
  gap: .6rem; padding: 2rem; background: var(--sand);
  border: 1px solid var(--sand-tief); border-radius: var(--rund);
}
.detail-ohne-bild p { margin: 0; color: var(--text-leise); }
.detail-ohne-bild p strong { color: var(--text); }

/* Verweis unter der Karte, für alle, die lieber gleich bei Google weitermachen */
.karte-fuss { margin: .7rem 0 0; font-size: .95rem; }
.karte-fuss a { display: inline-block; padding: .6rem 0; min-height: 44px; }

/* =========================================================== Geschichte
   Das alte Hofbild dreht sich und zeigt auf der Rückseite ein paar Angaben.
   Am Rechner beim Überfahren mit dem Zeiger, auf Handy und Tablet beim
   Vorbeiscrollen, und für die Tastatur auch beim Anklicken.
   Gerechnet: Weiß auf --gruen-900 ergibt 13,5 : 1, das helle Grün für die
   Jahreszahl 6,6 : 1, der Sandton für die kleine Zeile 11,2 : 1. */
/* Die Zeitleiste ist viel höher als das Bild. Stünden beide mittig, klebte das
   Bild in der Mitte und darüber wäre ein großes Loch. Beide beginnen oben, und
   das Bild bleibt beim Scrollen eine Weile stehen. */
#geschichte .zwei-spalten { align-items: stretch; }
.hist-haftet { position: sticky; top: 130px; }

/* Auf schmalen Bildschirmen stehen Bild und Zeitleiste untereinander. Dort
   gibt es keinen Platz zum Haftenbleiben, also bleibt das Bild normal stehen. */
@media (max-width: 860px) {
  .hist-haftet { position: static; }
}

.hist-dreh {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; perspective: 1200px; -webkit-tap-highlight-color: transparent;
}
.hist-innen {
  position: relative; display: block; width: 100%; aspect-ratio: 1390 / 720;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.22, .8, .3, 1);
}
.hist-seite {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: var(--rund-gross); backface-visibility: hidden;
  -webkit-backface-visibility: hidden; box-shadow: var(--schatten);
}
.hist-vorn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-fahne {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(20, 53, 28, .88); color: var(--weiss);
  font-size: .84rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .45rem .8rem; border-radius: 999px;
}
/* Auf Handy und Tablet dreht sich das Bild nicht von allein, sonst sieht man
   das Foto kaum. Stattdessen steht mitten darauf ein Hinweis, der leise
   pulst. Ein Fingertipp dreht das Bild, der nächste dreht es zurück.
   Gerechnet: dunkelgrüne Fläche mit 88 Prozent Deckung, weiße Schrift
   darauf 12,9 : 1. */
.hist-hinweis {
  display: none;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: 999px;
  background: rgba(20, 53, 28, .88); color: var(--weiss);
  font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  box-shadow: 0 6px 20px rgba(20, 53, 28, .35);
}
@media (max-width: 859px) {
  .hist-hinweis { display: inline-flex; animation: hinweisPulst 2.4s ease-in-out infinite; }
  .hist-dreh.ist-gedreht .hist-hinweis { display: none; }
}
@keyframes hinweisPulst {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .hist-hinweis { animation: none; }
}

.hist-hinten {
  transform: rotateY(180deg); background: var(--gruen-900);
  display: flex; flex-direction: column; justify-content: center; gap: .7rem;
  padding: clamp(1.3rem, 4vw, 2.6rem); text-align: left;
}
.hist-jahr {
  font-family: var(--schrift-kopf); font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700; color: var(--gruen-300); line-height: 1.1;
}
.hist-satz { color: var(--weiss); font-size: clamp(1rem, 2.4vw, 1.1rem); line-height: 1.5; }
.hist-mehr { color: var(--sand); font-size: .92rem; }

.hist-dreh.ist-gedreht .hist-innen,
.hist-dreh.zeigt-rueckseite .hist-innen { transform: rotateY(180deg); }

/* Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste::before {
  content: ''; position: absolute; left: 6px; top: .6rem; bottom: .6rem;
  width: 2px; background: var(--sand-tief);
}
.zeitleiste li { position: relative; padding: 0 0 1.5rem 2.2rem; }
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li::before {
  content: ''; position: absolute; left: 0; top: .5rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gruen-500); box-shadow: 0 0 0 4px var(--sand);
}
.zeit-jahr {
  display: block; font-family: var(--schrift-kopf); font-weight: 700;
  font-size: 1.14rem; color: var(--gruen-900);
}
.zeitleiste p { margin: .15rem 0 0; color: var(--text-leise); }

/* Zahlen zum Hof */
.hof-zahlen {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.hof-zahl {
  background: var(--creme); border: 1px solid var(--sand-tief);
  border-radius: 14px; padding: 1.05rem 1.15rem;
  transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
}
.hof-zahl b {
  display: block; font-family: var(--schrift-kopf); font-weight: 700;
  font-size: 1.4rem; color: var(--gruen-900); line-height: 1.2;
}
.hof-zahl span { color: var(--text-leise); font-size: .96rem; }
.hof-zahl.im-blick {
  transform: translateY(-4px); box-shadow: var(--schatten);
  border-color: var(--gruen-300);
}

/* Rundes Vorschaubild vor dem Namen einer Obstart, im Saisonstreifen und
   über dem Erntekalender. So sieht man auf einen Blick, was gerade da ist. */
.art-bild {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
.saison-liste li { display: inline-flex; align-items: center; gap: .5rem; }
.kalender-gruppe h4 { display: flex; align-items: center; gap: .6rem; }
.kalender-gruppe h4 .art-bild { width: 34px; height: 34px; }

/* Was es das ganze Jahr gibt, steht unter den Erntesorten */
.kalender-immer {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--sand-tief);
}
.kalender-immer h4 { margin: 0 0 .8rem; }
.kalender-immer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.kalender-immer li { display: flex; align-items: center; gap: .7rem; color: var(--text-leise); }
.kalender-immer li .art-bild { width: 34px; height: 34px; }
.kalender-immer strong { color: var(--gruen-900); }

/* Zweites Abzeichen auf der Hofsorte, direkt neben dem ersten. Die Abzeichen
   stehen im Textfluss, nicht absolut gesetzt, darum reihen sie sich von selbst
   und rutschen bei wenig Platz untereinander.
   Gerechnet: Weiß auf --gruen-700 ergibt 7,1 : 1. */
.bestseller-hof { background: var(--gruen-700); color: var(--weiss); margin-left: .4rem; }

/* ============================================================ Aufblenden */
.blendet-auf { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1); }
.blendet-auf.sichtbar { opacity: 1; transform: none; }

/* ================================================================ Zwei Spalten */
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.bild-rund { border-radius: var(--rund-gross); overflow: hidden; box-shadow: var(--schatten); }
.bild-rund img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bild-rund.hoch img { aspect-ratio: 3 / 4; }

/* Dreierreihe mit Bildern unter einem Abschnitt */
.drei-bilder { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-top: 2rem; }
.drei-bilder > * { flex: 1 1 260px; max-width: 420px; }

.band-bild { width: 100%; overflow: hidden; }
.band-bild img { width: 100%; height: clamp(220px, 30vw, 400px); object-fit: cover; }


/* ========================================================= Jahr auf dem Hof */
.jahr-tafel {
  background: var(--weiss); border: 1px solid var(--sand-tief);
  border-radius: var(--rund-gross); padding: clamp(1.6rem, 4vw, 2.8rem);
  box-shadow: var(--schatten); max-width: 46rem;
}
.jahr-tafel[hidden] { display: none; }
.jahr-zeichen { font-size: 2.4rem; line-height: 1; display: block; margin-bottom: .8rem; }
.jahr-tafel h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .7rem; }
.jahr-tafel p { color: var(--text-leise); }
.jahr-tafel p:last-child { margin-bottom: 0; }

/* ================================================ Zwei Karten nebeneinander */
.karten-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.karte-titel {
  font-family: var(--schrift); font-size: .78rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gruen-700);
  margin: 0 0 .6rem;
}
.karte-rahmen iframe { height: 340px; }

/* ============================================ Sorten-Chips im Erntekalender */
.kalender-liste li { padding: 0; background: none; }
.sorten-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--sand); color: var(--gruen-900); border-radius: 999px;
  padding: .5rem 1rem; font-weight: 600; font-size: .96rem; min-height: 44px;
  text-decoration: none; border: 2px solid transparent;
  transition: transform var(--tempo), background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.sorten-chip:focus-visible {
  background: var(--gruen-700); color: var(--weiss); transform: translateY(-3px);
}
.sorten-chip.ist-bestseller { background: var(--rot-hell); color: #7E1A14; }
.sorten-chip.ist-bestseller:focus-visible {
  background: var(--rot); color: var(--weiss);
}
.kalender-tipp {
  margin: 1.4rem 0 0; font-size: .95rem; font-weight: 600; color: var(--gruen-700);
}

/* ==================================================== Auftritt beim Umschalten */
.taucht-auf { animation: tafel-auf .42s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes tafel-auf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ========================================================== Erntezeit-Grafik */
.ernte-tafel {
  background: var(--weiss); border: 1px solid var(--sand-tief);
  border-radius: var(--rund-gross); padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: var(--schatten); overflow-x: auto;
}
.ernte-tafel > * { min-width: 540px; }
.ernte-kopfzeile { display: flex; gap: 1rem; margin-bottom: .6rem; }
.ernte-luecke { flex: 0 0 clamp(120px, 22%, 200px); }
.ernte-monate { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.ernte-monate span {
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-leise); border-left: 1px solid var(--sand-tief); padding-left: .5rem;
}
.ernte-gruppe {
  font-family: var(--schrift); font-size: .78rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gruen-700);
  margin: 1.6rem 0 .7rem;
}
.ernte-reihen { list-style: none; margin: 0; padding: 0; }
.ernte-reihe { display: flex; align-items: center; gap: 1rem; padding: .16rem 0; }
.ernte-name {
  flex: 0 0 clamp(120px, 22%, 200px); font-weight: 700; font-size: .95rem;
  color: var(--gruen-900); text-decoration: none; display: inline-flex;
  align-items: center; gap: .3rem; min-height: 44px;
  transition: color var(--tempo), transform var(--tempo);
}
.ernte-name:focus-visible { color: var(--rot); transform: translateX(3px); }
.ernte-stern { color: var(--rot); }
.ernte-bahn {
  position: relative; flex: 1; height: 26px; border-radius: 8px;
  background: repeating-linear-gradient(90deg,
    var(--creme) 0, var(--creme) calc(25% - 1px),
    var(--sand-tief) calc(25% - 1px), var(--sand-tief) 25%);
}
.ernte-balken {
  position: absolute; top: 5px; bottom: 5px; right: 0;
  border-radius: 999px; display: flex; align-items: center;
  transform-origin: left center; transform: scaleX(0);
  transition: transform .7s cubic-bezier(.22, .8, .3, 1);
}
.ernte-reihe.sichtbar .ernte-balken { transform: scaleX(1); }
.ernte-ab {
  position: absolute; left: .6rem; font-size: .72rem; font-weight: 800;
  color: var(--weiss); white-space: nowrap; letter-spacing: .02em;
  opacity: 0; transition: opacity .4s ease .3s;
}
/* Auf dem hellen gelben Balken ist weiße Schrift zu schwach.
   Dunkelgrün auf #D19710 ergibt 5,2 : 1, weiß nur 2,7 : 1. */
.ernte-balken.mittel-frueh .ernte-ab { color: var(--gruen-900); }
.ernte-reihe.sichtbar .ernte-ab { opacity: 1; }
.ernte-balken.sehr-frueh   { background: #14401F; }
.ernte-balken.frueh        { background: #3F7320; }
.ernte-balken.mittel-frueh { background: #D19710; }
.ernte-balken.mittel-spaet { background: #B85610; }
.ernte-balken.spaet        { background: #B4261E; }
.ernte-balken.sehr-spaet   { background: #7E1A14; }

.ernte-legende {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
}
.ernte-legende li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .88rem; font-weight: 600; color: var(--text-leise);
}
.ernte-punkt { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.ernte-punkt.sehr-frueh   { background: #14401F; }
.ernte-punkt.frueh        { background: #3F7320; }
.ernte-punkt.mittel-frueh { background: #D19710; }
.ernte-punkt.mittel-spaet { background: #B85610; }
.ernte-punkt.spaet        { background: #B4261E; }
.ernte-punkt.sehr-spaet   { background: #7E1A14; }

/* ============================================================ Sortendetail */
.zurueck {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-weight: 700; text-decoration: none; color: var(--gruen-700);
  margin-bottom: 1.2rem; transition: transform var(--tempo), color var(--tempo);
}
.detail-tafel {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; background: var(--weiss); border: 1px solid var(--sand-tief);
  border-radius: var(--rund-gross); padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: var(--schatten);
}
.detail-bild { margin: 0; }
.detail-bild img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rund); box-shadow: var(--schatten);
}
.detail-bild figcaption {
  font-size: .85rem; color: var(--text-leise); margin-top: .6rem; text-align: center;
}
.detail-text h1 { margin-bottom: .3rem; }
.detail-zusatz {
  font-family: var(--schrift); font-size: 1rem; font-weight: 600; color: var(--text-leise);
}
.detail-ernte { color: var(--text-leise); margin: .8rem 0; }
.detail-ernte strong { color: var(--gruen-900); }
.detail-beschreibung { color: var(--text-leise); margin-top: 1rem; }
.detail-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.sorte-mehr { padding: 0 1.4rem 1rem; margin: 0; }
/* Das ist der Weg zur einzelnen Sorte, kein Wort im Fließtext.
   Deshalb 44 Pixel hoch, damit man es auf dem Handy sicher trifft. */
.sorte-mehr a {
  font-weight: 700; display: inline-flex; align-items: center; min-height: 44px;
}

/* =============================================================== Bildschirme */
@media (max-width: 980px) {
  .detail-tafel { grid-template-columns: 1fr; }
  .karten-paar { grid-template-columns: 1fr; }
  .fuss-gitter { grid-template-columns: 1fr 1fr; }
  .laden-tafel { grid-template-columns: 1fr; }
  .zwei-spalten { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Der Weichzeichner in der Kopfzeile macht diese zum Bezugsrahmen fuer alles,
     was darin fest steht. Das Schubfach war dadurch nur so hoch wie die
     Kopfzeile selbst, der Rest wurde weggeschnitten und blieb unsichtbar.
     Auf schmalen Bildschirmen faellt der Weichzeichner deshalb weg. */
  .kopf { backdrop-filter: none; background: var(--creme); }

  .menue-schalter { display: inline-flex; }
  .kopf-innen > .knopf-anruf { display: none; }
  /* Das Schubfach steht immer am rechten Rand INNERHALB des Fensters und wird
     nur weggeschnitten. Ein geschlossenes Schubfach, das mit
     translateX(100%) neben der Seite geparkt wird, zählt in Chrome zur
     Dokumentbreite: die Seite lässt sich dann seitlich schieben und das Handy
     zoomt heraus. Mit clip-path passiert das nicht. */
  .menue {
    position: fixed; inset: 0 0 0 auto; width: min(92vw, 380px);
    background: var(--creme); flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0; padding: 0 0 1.5rem;
    clip-path: inset(0 0 0 100%); visibility: hidden; pointer-events: none;
    transition: clip-path var(--tempo), visibility 0s var(--tempo);
    box-shadow: -8px 0 40px rgba(43, 38, 32, .18); overflow-y: auto;
    /* Die Striche im Burger-Knopf stehen auf position: relative und werden
       deshalb in derselben Stufe gemalt wie das Schubfach. Da der Knopf im
       Dokument spaeter kommt, lagen seine drei Balken ueber dem Kreuz des
       Schubfachs, und man sah beides uebereinander. Mit z-index gewinnt
       das Schubfach. */
    z-index: 2;
  }
  .menue-kopf {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--sand-tief);
    background: var(--sand); position: sticky; top: 0; z-index: 2;
  }
  .menue-titel {
    font-size: .74rem; font-weight: 800; letter-spacing: .19em;
    text-transform: uppercase; color: var(--gruen-700);
  }
  .menue-zu {
    width: 48px; height: 48px; border: 0; border-radius: 14px; cursor: pointer;
    background: var(--weiss); color: var(--gruen-900); font-size: 2rem;
    line-height: 1; display: grid; place-items: center; padding: 0 0 .2rem;
  }
  .menue.offen {
    clip-path: inset(0); visibility: visible; pointer-events: auto;
    transition: clip-path var(--tempo), visibility 0s;
  }
  .menue > *:not(.menue-kopf) { transform: translateX(26px); transition: transform var(--tempo); }
  .menue.offen > *:not(.menue-kopf) { transform: none; }
  .menue-fuss { display: block; }
  .menue a {
    font-size: 1.15rem; padding: 1.05rem 1.25rem; border-radius: 0;
    border-bottom: 1px solid var(--sand-tief); min-height: 60px;
  }
  .menue a[aria-current="page"] { background: var(--sand); }
  .menue a[aria-current="page"]::after {
    left: auto; right: 1.25rem; bottom: auto; top: 50%; margin: -4px 0 0;
    width: 8px; height: 8px; border-radius: 50%;
  }
  .menue .knopf-anruf {
    display: inline-flex; margin: 1.5rem 1.25rem 0; justify-content: center;
    border-radius: 999px; min-height: 56px; font-size: 1.05rem; border-bottom: 0;
  }
  .kopf-sozial { display: none; }
  .menue-sozial {
    display: flex; gap: .6rem; padding: 1.25rem 1.25rem 0;
  }
  .menue-sozial a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; min-height: 52px; border-radius: 999px;
    background: var(--sand); color: var(--gruen-900);
    text-decoration: none; font-weight: 700; font-size: .95rem;
  }
  .menue-fuss {
    padding: 1.2rem 1.25rem 0; font-size: .93rem; color: var(--text-leise);
  }
  .menue-fuss p { margin: 0 0 .3rem; }
  .menue-schleier {
    position: fixed; inset: 0; background: rgba(20, 53, 28, .5);
    opacity: 0; pointer-events: none; transition: opacity var(--tempo); z-index: 99;
  }
  .menue-schleier.an { opacity: 1; pointer-events: auto; }
}

@media (max-width: 700px) {
  /* Hochkant ist die Karte sonst so flach, dass der Text auf der Rückseite
     nicht mehr hineinpasst. */
  .hist-innen { aspect-ratio: 4 / 3; }
}

@media (max-width: 600px) {
  .sorte-bild { flex-basis: 64px; width: 64px; height: 64px; border-radius: 12px; }
  .sorte-kopf { gap: .8rem; padding: 1.1rem 1.1rem; }

  body { font-size: 1.02rem; }
  .fuss-gitter { grid-template-columns: 1fr; gap: 1.8rem; }
  .feld-paar { grid-template-columns: 1fr; }
  .buehne { min-height: min(88vh, 660px); }
  .sortenliste { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .marke-logo { width: 106px; }
  .fuss .marke-logo { width: 84px; }
  .marke-name { font-size: 1.15rem; }
}

/* ====================================================== Nur mit einer Maus
   Alles, was beim Ueberfahren mit dem Zeiger passiert, steht hier drin.
   Auf Handy und Tablet gibt es keinen Zeiger. Dort behaelt iOS nach einem
   Antippen den Zeigerzustand bei, und die Kachel bleibt dann angehoben
   stehen, bis man woanders hintippt. Das sieht kaputt aus.
   Deshalb: Zeigereffekte nur bei (hover: hover). Was sich auf dem Handy
   bewegen soll, bewegt sich ueber das Scrollen, siehe .im-blick. */
@media (hover: hover) {
  a:hover { color: var(--rot); }
  .marke:hover { color: inherit; }
  .marke:hover .marke-logo { transform: rotate(-3deg) scale(1.05); }
  .menue a:hover { background: var(--sand); color: var(--gruen-700); }
  .knopf-anruf:hover { background: var(--gruen-900); color: var(--weiss); transform: translateY(-2px); }
  .menue a.knopf-anruf:hover { color: var(--weiss); }
  .knopf-voll:hover { background: var(--gruen-900); color: var(--weiss); transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
  .knopf-rand:hover { background: var(--gruen-700); color: var(--weiss); transform: translateY(-3px); }
  .knopf-auf-bild:hover { background: var(--gruen-900); color: var(--weiss); transform: translateY(-3px); }
  .knopf-hell:hover { background: var(--sand); color: var(--gruen-900); transform: translateY(-3px); }

  .wert:hover { transform: translateY(-6px); box-shadow: var(--schatten-hoch); border-color: var(--gruen-300); }
  .wert:hover .wert-zeichen { transform: scale(1.22) rotate(-7deg); }
  .sorten-karte:hover { transform: translateY(-6px); box-shadow: var(--schatten-hoch); }
  .sorten-karte:hover img { transform: scale(1.07); }
  .bestseller:hover { transform: translateY(-5px); box-shadow: var(--schatten-hoch); }
  .sorte:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: var(--gruen-300); }
  .sorte:hover .sorte-bild img { transform: scale(1.12); opacity: 1; filter: saturate(1.1); }
  .sorte:hover .sorte-bild-leer svg { opacity: .85; }
  .hist-dreh:hover .hist-innen,
  .hist-dreh:focus-visible .hist-innen { transform: rotateY(180deg); }
  .hof-zahl:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: var(--gruen-300); }
  .galerie button:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
  .galerie button:hover img { transform: scale(1.08); }

  .kalender-band button:hover { border-color: var(--gruen-500); transform: translateY(-2px); }
  .laden-schalter button:hover { border-color: var(--gruen-500); transform: translateY(-2px); }
  .finder-wahl button:hover { border-color: var(--gruen-500); transform: translateY(-2px); }
  .filter-knoepfe button:hover { border-color: var(--gruen-500); transform: translateY(-2px); }
  .sorten-chip:hover { background: var(--gruen-700); color: var(--weiss); transform: translateY(-3px); }
  .sorten-chip.ist-bestseller:hover { background: var(--rot); color: var(--weiss); }
  .ernte-name:hover { color: var(--rot); transform: translateX(3px); }
  .zurueck:hover { transform: translateX(-4px); color: var(--gruen-900); }
  .leuchtkasten-zu:hover { background: rgba(255, 255, 255, .3); }
  .fuss a:hover { color: var(--gruen-300); text-decoration: underline; }
  .fuss-sozial a:hover { background: var(--gruen-500); transform: translateY(-3px); }
  .kopf-sozial a:hover { background: var(--gruen-700); color: var(--weiss); transform: translateY(-2px); }
  .menue-sozial a:hover { background: var(--gruen-700); color: var(--weiss); }
  .menue-zu:hover { background: var(--gruen-700); color: var(--weiss); }
}

/* ================================================= Nur mit dem Finger
   Statt eines Zeigerzustands gibt es hier eine kurze Rueckmeldung im
   Moment des Antippens. Sie ist vorbei, sobald der Finger weg ist,
   und bleibt deshalb nicht haengen. */
@media (hover: none) {
  .knopf:active,
  .knopf-anruf:active,
  .sorten-chip:active,
  .kalender-band button:active,
  .laden-schalter button:active,
  .finder-wahl button:active,
  .filter-knoepfe button:active,
  .menue-zu:active { transform: scale(.96); }
  .sorte-kopf:active .sorte-name { color: var(--gruen-700); }
  .galerie button:active { transform: scale(.98); }
  .kopf-sozial a:active { background: var(--gruen-700); color: var(--weiss); transform: scale(.94); }
}

/* =========================================================== Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .blendet-auf, .wert, .ernte-reihe { opacity: 1; transform: none; }
  .ernte-balken { transform: scaleX(1); }
  .ernte-ab { opacity: 1; }
  .taucht-auf { animation: none; }
  .sorte-text, .finder-antwort { transition: none; }
}