/* GeleeVital – Farben exakt aus dem Logo (logo.png): Grün #729D49, Blau #006CA2. Schrift: Helvetica Neue.
   Keine externen Fonts (DSGVO): Helvetica Neue ist Systemschrift auf Apple-Geräten, sonst Helvetica/Arial. */
:root {
  color-scheme: light;
  --gruen: #729d49;
  --gruen-dunkel: #597a39;      /* gleicher Farbton wie Logo-Grün, dunkler für lesbare Schrift auf Weiß */
  --gruen-hell: #f1f5ed;
  --blau: #006ca2;
  --blau-dunkel: #005986;
  --blau-hell: #e6f0f6;
  --tinte: #15232b;
  --tinte-2: #3d4c55;
  --muted: #62717a;
  --flaeche: #f6f9f7;
  --weiss: #ffffff;
  --linie: rgba(21, 35, 43, .10);
  --nacht: #0f2530;
  --verlauf: linear-gradient(110deg, #729d49 0%, #3b8577 52%, #006ca2 100%);
  --verlauf-text: linear-gradient(100deg, #729d49 0%, #729d49 14%, #3b8577 36%, #006ca2 60%);
  --verlauf-hell: linear-gradient(135deg, #f1f5ed 0%, #e6f0f6 100%);
  --verlauf-fuss: linear-gradient(135deg, #e3eedb 0%, #d4e5f0 100%);
  --verlauf-linie: linear-gradient(90deg, #729d49 0%, #006ca2 100%);
  --radius: 22px;
  --schatten: 0 18px 50px rgba(15, 37, 48, .10);
  --schatten-klein: 0 6px 20px rgba(15, 37, 48, .08);
  --breite: 1600px;
  --font: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
}

@supports (background: linear-gradient(in oklab, red, blue)) {
  :root {
    --verlauf: linear-gradient(110deg in oklab, var(--gruen) 0%, var(--blau) 100%);
    --verlauf-text: linear-gradient(100deg in oklab, var(--gruen) 0%, var(--gruen) 14%, var(--blau) 60%);
    --verlauf-hell: linear-gradient(135deg in oklab, var(--gruen-hell) 0%, var(--blau-hell) 100%);
    --verlauf-fuss: linear-gradient(135deg in oklab, #e3eedb 0%, #d4e5f0 100%);
    --verlauf-linie: linear-gradient(90deg in oklab, var(--gruen) 0%, var(--blau) 100%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65;
  color: var(--tinte); background: var(--weiss); overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); text-underline-offset: 3px; }
a:hover { color: var(--blau-dunkel); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.3rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 12px; }

.wrap { width: min(var(--breite), 100% - clamp(40px, 6vw, 96px)); margin-inline: auto; }
section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.flaeche { background: var(--flaeche); }
.verlauf-text { background: var(--verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gruen-dunkel); margin-bottom: 18px;
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--verlauf); border-radius: 2px; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--tinte-2); max-width: 68ch; }
.kopf { max-width: 880px; margin-bottom: clamp(36px, 5vw, 56px); }
.kopf.mitte { margin-inline: auto; text-align: center; }
.kopf.mitte .kicker { justify-content: center; }
.muted { color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; font: 700 1rem/1 var(--font); text-decoration: none;
  border: 0; cursor: pointer; white-space: nowrap; transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s cubic-bezier(.22, 1, .36, 1), filter .2s cubic-bezier(.22, 1, .36, 1);
}
/* Verlauf beginnt mit dem dunkleren Grün: weiße Schrift hat so überall mind. 4.5:1 (WCAG 1.4.3), mit Hellgrün waren es 3.2:1 */
.btn-primaer { background: linear-gradient(110deg, var(--gruen-dunkel) 0%, var(--blau) 100%); color: #fff; box-shadow: 0 10px 26px rgba(0, 108, 162, .28); }
@supports (background: linear-gradient(in oklab, red, blue)) { .btn-primaer { background: linear-gradient(110deg in oklab, var(--gruen-dunkel), var(--blau)); } }
.btn-primaer:hover { color: #fff; transform: translateY(-2px); filter: saturate(1.12); box-shadow: 0 14px 32px rgba(0, 108, 162, .34); }
.fuss .btn-primaer, .fuss .btn-primaer:hover { color: #fff; }   /* Fußzeilen-Linkfarbe (dunkel) darf den Knopf nicht überschreiben */
.btn-rand { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--linie); }
.btn-rand:hover { color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--gruen); transform: translateY(-2px); }
.btn-hell { background: #fff; color: var(--blau-dunkel); }
.btn-hell:hover { color: var(--blau-dunkel); transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Header */
.kopfzeile {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
.kopfzeile.gescrollt { border-color: var(--linie); box-shadow: 0 6px 24px rgba(15, 37, 48, .06); }
.kopfzeile .wrap { display: flex; align-items: center; gap: 24px; height: 100px; }
.marke img { width: 280px; height: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--tinte-2); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 8px 12px; border-radius: 10px; position: relative;
}
.nav a:hover { color: var(--tinte); background: var(--flaeche); }
.nav a[aria-current="page"] { color: var(--tinte); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--verlauf); border-radius: 2px;
}
.sprache {
  display: inline-flex; padding: 3px; border-radius: 999px; background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--linie); font-size: .8rem; font-weight: 700;
}
.sprache a { padding: 6px 11px; border-radius: 999px; text-decoration: none; color: var(--muted); }
.sprache a[aria-current="true"] { background: #fff; color: var(--tinte); box-shadow: var(--schatten-klein); }
.kopfzeile .btn { padding: 11px 18px; font-size: .92rem; }
.menue-knopf { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--tinte); }
.menue-knopf svg { width: 28px; height: 28px; }

@media (max-width: 1260px) {
  .kopfzeile .btn-kopf { display: none; }
}
@media (max-width: 900px) {
  .menue-knopf { display: block; }
  .nav {
    position: fixed; inset: 100px 0 auto 0; flex-direction: column; gap: 0; background: #fff;
    padding: 12px 20px 24px; border-bottom: 1px solid var(--linie); box-shadow: var(--schatten);
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .15s cubic-bezier(.22, 1, .36, 1), transform .15s cubic-bezier(.22, 1, .36, 1), visibility 0s .15s;
  }
  .nav.offen { transform: none; opacity: 1; visibility: visible; transition: opacity .25s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
  .nav a { padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--linie); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--gruen-dunkel); }
  .sprache { margin-left: auto; }
}

/* Hero */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); overflow: hidden; position: relative; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); }
.hero .lead { margin-top: 18px; }
.hero-hinweis { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: .9rem; color: var(--muted); }
.punkt { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--gruen); flex: none; }
/* Pulsring über transform/opacity statt box-shadow: muss nicht jedes Bild neu gemalt werden */
.punkt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(114, 157, 73, .5); animation: puls 2.2s infinite; }
@keyframes puls { 70%, 100% { transform: scale(3.2); opacity: 0; } }
.blobs {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  /* weich auslaufen lassen, sonst schneidet der Abschnittsrand die Farbschleier hart ab:
     waagrecht über einen Kreisverlauf, senkrecht zusätzlich bis deutlich vor der Unterkante */
  -webkit-mask-image: radial-gradient(130% 120% at 55% 28%, #000 45%, rgba(0, 0, 0, .5) 72%, transparent 95%),
                      linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, .45) 62%, transparent 82%);
  mask-image: radial-gradient(130% 120% at 55% 28%, #000 45%, rgba(0, 0, 0, .5) 72%, transparent 95%),
              linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, .45) 62%, transparent 82%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* weicher Rand über Kreisverlauf statt filter: blur(70px) – sieht gleich aus, kostet beim Bewegen fast nichts */
.blobs span { position: absolute; border-radius: 50%; opacity: .45; background: radial-gradient(closest-side, var(--f), transparent) !important; scale: 1.35; }
.blobs span:nth-child(1) { width: 520px; height: 520px; --f: #d5e7c5; top: -160px; right: -120px; animation: drift1 18s ease-in-out infinite alternate; }
.blobs span:nth-child(2) { width: 460px; height: 460px; --f: #c2dcec; bottom: -200px; left: -140px; animation: drift2 22s ease-in-out infinite alternate; }
.blobs span:nth-child(3) { width: 300px; height: 300px; --f: #d8ebe3; top: 30%; left: 40%; animation: drift3 20s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-60px, 60px) scale(1.1); } }
@keyframes drift2 { to { transform: translate(70px, -50px) scale(1.08); } }
@keyframes drift3 { to { transform: translate(-40px, -40px) scale(1.15); } }

.seiten-hero { padding: clamp(48px, 7vw, 90px) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.seiten-hero .lead { margin-top: 10px; }
.brotkrumen { font-size: .85rem; color: var(--muted); margin-bottom: 20px; }
.brotkrumen a { color: var(--muted); }

/* Boden-Grafik */
.boden-karte {
  position: relative; border-radius: 28px; background: #fff; box-shadow: var(--schatten);
  border: 1px solid var(--linie); padding: 18px; isolation: isolate;
}
.boden-karte svg { width: 100%; height: auto; display: block; border-radius: 18px; }
.boden-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 14px; }
.boden-leiste strong { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.schalter { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.schalter button {
  font: 700 .8rem/1 var(--font); border: 0; background: none; padding: 8px 12px; border-radius: 999px; cursor: pointer; color: var(--muted);
}
.schalter button[aria-pressed="true"] { background: #fff; color: var(--tinte); box-shadow: var(--schatten-klein); }
.boden-legende { padding: 16px 6px 4px; min-height: 7.2em; }
.boden-legende p { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--tinte-2); }
.boden-legende .info-titel { font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blau); margin-bottom: 6px; }
.boden-legende .info-mit, .boden-legende .info-ohne { position: relative; padding-left: 16px; margin-top: 4px; }
.boden-legende .info-mit::before, .boden-legende .info-ohne::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; }
.boden-legende .info-mit::before { background: var(--gruen); }
.boden-legende .info-ohne::before { background: #5c6a73; }
.boden-legende b { color: var(--tinte); }
.boden-karte .info { animation: einblenden-von .15s ease-in-out; }
.boden-karte[data-modus="nass"] .info-trocken, .boden-karte[data-modus="trocken"] .info-nass { display: none; }
.boden-legende span { display: inline-flex; align-items: center; gap: 7px; }
.boden-legende i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.schwebe {
  position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--schatten); padding: 12px 16px;
  font-size: .85rem; line-height: 1.3; border: 1px solid var(--linie); animation: schweben 6s ease-in-out infinite;
}
.schwebe b { display: block; font-size: 1.35rem; letter-spacing: -.02em; }
.schwebe.eins { left: -64px; top: 12%; }
@keyframes schweben { 50% { transform: translateY(-10px); } }

/* Boden-Animation: Vergleich mit / ohne PowerGelee */
.boden-svg { background: #dfe7ec; }
.boden-svg .himmel-nass, .boden-svg .nur-nass-bild, .boden-svg .wolken, .boden-svg .regen, .boden-svg .sonne,
.boden-svg .nur-nass, .boden-svg .nur-trocken { transition: opacity 2s ease; }
.boden-svg.trocken .himmel-nass, .boden-svg.trocken .wolken, .boden-svg.trocken .regen,
.boden-svg.trocken .nur-nass { opacity: 0; }
.boden-svg.trocken .nur-nass-bild { opacity: 0; transition-duration: 5s; }
.boden-svg.nass .sonne, .boden-svg.nass .nur-trocken { opacity: 0; }
/* Mit PowerGelee: die Pflanze wächst mit jedem Regen ein Stück (main.js setzt --wuchs) und bleibt in der Sonne so stehen */
.wuchs, .kuemmern { transform-box: fill-box; transform-origin: 50% 100%; }
.wuchs { transform: scale(var(--wuchs, 1)); transition: transform 7s ease-out; }
/* Ohne: bei Regen sackt die Pflanze langsam etwas ein; in der Sonne lässt dieselbe Pflanze Blätter und Kopf hängen und vergilbt */
.boden-svg.nass .kuemmern { transform: rotate(6deg) scale(.94); transition: transform 7s ease-in 1s; }
.boden-svg.trocken .kuemmern { transform: rotate(4deg) scale(.9); transition: transform 6s ease-in-out; }
.haengen, .kopf { transition: transform 4s ease-in-out; }
.boden-svg.trocken .haengen { transform: rotate(var(--w)) scale(.88); transition: transform 6s ease-in-out .5s; }
.boden-svg.trocken .kopf { transform: rotate(105deg); transition: transform 6s ease-in-out .5s; }
.welkfarbe { opacity: 0; transition: opacity 4s ease; }
.boden-svg.trocken .welkfarbe { opacity: 1; transition: opacity 6s ease .5s; }
/* Stauwasser baut sich bei Regen auf und verdunstet in der Sonne */
.boden-svg .stauwasser { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 6s ease-out, opacity 2s ease; }
.boden-svg.trocken .stauwasser { transform: scaleY(0); transition: transform 4s ease-in, opacity 4s ease-in; }
/* Verdichtung: in der Trockenphase rücken die Schichten zusammen, der Boden wird dunkler */
.verdichtung { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(1.3); transition: opacity 2s ease, transform 2s ease; }
.boden-svg.trocken .verdichtung { opacity: 1; transform: none; transition: opacity 8s linear 1s, transform 8s linear 1s; }
.wolken { animation: ziehen 26s ease-in-out infinite alternate; }
@keyframes ziehen { to { transform: translateX(-30px); } }
.sonne { transform-box: fill-box; transform-origin: center; animation: gluehen 5s ease-in-out infinite; }
@keyframes gluehen { 50% { transform: scale(1.06); } }
.regentropfen { animation: regnen .7s linear infinite; }
@keyframes regnen { from { transform: translate(0, 0); } to { transform: translate(-16px, 205px); } }
.spritzer, .welle { fill: none; stroke: #eaf6fc; stroke-width: .8; transform-box: fill-box; transform-origin: center; animation: spritzen .9s ease-out infinite; }
.welle { stroke: #fff; animation-duration: 1.4s; }
@keyframes spritzen { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.sickerfront { opacity: 0; }
.boden-svg.nass .sickerfront { animation: sickern 3.2s ease-in 1; }
@keyframes sickern { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(300px); opacity: 0; } }
.wurzel { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wachsen 3.2s ease-out forwards; }
@keyframes wachsen { to { stroke-dashoffset: 0; } }
.haare { animation: einblenden-von 2s ease 3s both; }
/* eigener Name: „einblenden“ (unten, to:1) hätte diese sonst überschrieben */
@keyframes einblenden-von { from { opacity: 0; } }
.gel { transform-box: fill-box; transform-origin: center; transform: scale(1.6); transition: transform 2.6s cubic-bezier(.3, 1.35, .5, 1); }
.boden-svg.trocken .gel { transform: scale(1); transition-duration: 7s; transition-timing-function: ease-in-out; }
.halo { transform-box: fill-box; transform-origin: center; opacity: .9; transition: transform 3s ease, opacity 3s ease; }
.boden-svg.trocken .halo { transform: scale(1.25); opacity: .7; }
.narbe { fill: #4d6e32; transition: fill 3s ease; }
.boden-svg.trocken .narbe-ohne { fill: #857c4a; }
.halm1, .halm2, .halm3 { transition: fill 3s ease; }
.halm1 { fill: #5f9444; } .halm2 { fill: #75a856; } .halm3 { fill: #4c7a39; }
.boden-svg.trocken .gras-ohne .halm1 { fill: #a39c58; } .boden-svg.trocken .gras-ohne .halm2 { fill: #bbac6c; } .boden-svg.trocken .gras-ohne .halm3 { fill: #8a8a48; }
.gras { transform-box: fill-box; transform-origin: bottom; animation: wind 3.8s ease-in-out infinite alternate; }
@keyframes wind { from { transform: skewX(-5deg); } to { transform: skewX(4deg); } }
.pflanze { transform-box: fill-box; transform-origin: 50% 100%; animation: wiegen 6s ease-in-out infinite; }
@keyframes wiegen { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.4deg); } }
.blatt { transform-box: fill-box; transform-origin: center; animation: flattern 4s ease-in-out infinite; }
@keyframes flattern { 50% { transform: rotate(2deg) scaleY(1.03); } }

/* Traktor-Konvoi: reine CSS-Animation (läuft auf der Grafikkarte); main.js setzt nur die Maße */
.feldfahrt { position: relative; height: 92px; overflow: hidden; margin-top: -30px; --h: 72px; --acker: 14px; }
.feldfahrt .acker, .spur-innen { position: absolute; left: 0; bottom: 0; height: var(--acker); background-size: 300px 270px; }
.feldfahrt .acker { right: 0; background-image: url("../img/boden-ohne-trocken.webp"); background-position: 0 -12px; box-shadow: inset 0 2px 0 #7d8a45; }
.spur { position: absolute; left: 0; bottom: 0; height: var(--acker); width: var(--ww, 0px); overflow: hidden; transform: translateX(var(--sv, -9999px));
  animation: kv-spur var(--dauer, 60s) linear infinite, kv-ausblenden var(--dauer, 60s) linear infinite; will-change: transform, opacity; }
.spur-innen { width: var(--bw, 100vw); background-image: url("../img/boden-mit-nass.webp"); background-position: 0 -8px; box-shadow: inset 0 2px 0 #4d6e32;
  transform: translateX(calc(var(--sv, 0px) * -1)); animation: kv-spur-innen var(--dauer, 60s) linear infinite; will-change: transform; }
.feldfahrt .pflanzen { position: absolute; left: 0; bottom: 0; height: calc(var(--acker) + 30px); width: var(--ww, 0px); overflow: hidden;
  transform: translateX(var(--sv, -9999px)); animation: kv-spur var(--dauer, 60s) linear infinite, kv-ausblenden var(--dauer, 60s) linear infinite; }
.pflanzen-innen { position: absolute; left: 0; bottom: 0; height: 100%; width: var(--bw, 100vw);
  transform: translateX(calc(var(--sv, 0px) * -1)); animation: kv-spur-innen var(--dauer, 60s) linear infinite; }
.feldfahrt .pflanze { position: absolute; bottom: calc(var(--acker) - 5px); width: calc(var(--h) * .7); height: var(--h);
  transform-origin: bottom center; animation: pflanze-wachsen var(--dauer, 60s) ease-out infinite both; }
.feldfahrt .pflanze svg { width: 100%; height: 100%; display: block; }
/* Keimt kurz nach der Durchfahrt und ist nach 85 % der Runde ausgewachsen: früh gesäte Pflanzen (links) sind am größten */
@keyframes pflanze-wachsen { from { transform: scale(.6, .05); opacity: 0; } 3% { transform: scale(.3); opacity: 1; } 85%, to { transform: none; opacity: 1; } }
.konvoi { position: absolute; left: 0; bottom: calc(var(--acker) - 5px); height: var(--h); width: calc(var(--h) * var(--verh)); max-width: none;
  transform: translateX(var(--von, -9999px)); animation: kv-fahren var(--dauer, 60s) linear infinite; will-change: transform; }
@keyframes kv-fahren { from { transform: translateX(var(--von, -9999px)); } to { transform: translateX(var(--bis, -9999px)); } }
@keyframes kv-spur { from { transform: translateX(var(--sv, -9999px)); } to { transform: translateX(var(--sb, -9999px)); } }
@keyframes kv-spur-innen { from { transform: translateX(calc(var(--sv, 0px) * -1)); } to { transform: translateX(calc(var(--sb, 0px) * -1)); } }
@keyframes kv-ausblenden { 0%, 95% { opacity: 1; } 100% { opacity: 0; } }
.konvoi .rad { transform-box: fill-box; transform-origin: center; animation: rollen linear infinite; }
@keyframes rollen { to { transform: rotate(360deg); } }
.kv-korn { animation: rieseln 1.2s ease-in infinite; }
@keyframes rieseln { from { transform: translateY(-6px); opacity: 1; } to { transform: translateY(6px); opacity: 0; } }
.kv-staub { transform-box: fill-box; transform-origin: center; animation: staub 2.6s ease-out infinite; }
@keyframes staub { from { transform: translate(0, 0) scale(.4); opacity: .6; } to { transform: translate(-22px, -10px) scale(2); opacity: 0; } }
.kv-wurf { animation: werfen 1.9s ease-out infinite; }
@keyframes werfen { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(-40px, var(--wy, 0px)); opacity: 0; } }
.feldfahrt:not(.laeuft) *, .feldfahrt:not(.laeuft) { animation-play-state: paused !important; }
/* Dauer-Animationen anhalten, solange ihr Abschnitt nicht zu sehen ist (main.js setzt .pausiert) */
.pausiert, .pausiert *, .pausiert ::before, .pausiert ::after { animation-play-state: paused !important; }
@media (max-width: 640px) { .feldfahrt { height: 70px; margin-top: -16px; --h: 54px; --acker: 11px; } }

/* Keim: Schleife in vier Schritten (trockener Boden, Regen, Gel quillt, Pflanze wächst). Eine Runde dauert 14 s. */
.keim { margin-top: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px); align-items: center;
  background: #fff; border: 1px solid var(--linie); border-radius: 26px; padding: clamp(16px, 2.4vw, 30px); box-shadow: var(--schatten-klein); }
.keim > svg { width: 100%; height: auto; display: block; }
.keim h3 { margin: 6px 0 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.km-kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-dunkel); }
.km-kicker svg { width: 46px; flex: none; }
.keim ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.keim li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 11px 14px; border-radius: 16px; }
.keim li b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--verlauf); color: #fff; font-size: .9rem; }
.keim li strong { display: block; }
.keim li span { color: var(--tinte-2); }
.keim li, .keim [class^="km-"] { animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: linear; }
.km-s1 { animation-name: km-s1; } .km-s2 { animation-name: km-s2; } .km-s3 { animation-name: km-s3; } .km-s4 { animation-name: km-s4; }
@keyframes km-s1 { 0%, 19% { background: var(--gruen-hell); } 21%, 100% { background: transparent; } }
@keyframes km-s2 { 0%, 19% { background: transparent; } 21%, 39% { background: var(--blau-hell); } 41%, 100% { background: transparent; } }
@keyframes km-s3 { 0%, 39% { background: transparent; } 41%, 57% { background: var(--blau-hell); } 59%, 100% { background: transparent; } }
@keyframes km-s4 { 0%, 57% { background: transparent; } 59%, 96% { background: var(--gruen-hell); } 100% { background: transparent; } }
.km-szene { animation-name: km-szene; }
@keyframes km-szene { 0% { opacity: 0; } 3%, 96% { opacity: 1; } 100% { opacity: 0; } }
.km-regenhimmel { opacity: 0; animation-name: km-regenhimmel; }
@keyframes km-regenhimmel { 0%, 18% { opacity: 0; } 24%, 40% { opacity: 1; } 48%, 100% { opacity: 0; } }
.km-sonne { animation-name: km-sonne; }
@keyframes km-sonne { 0%, 16% { opacity: 1; } 22%, 42% { opacity: 0; } 50%, 100% { opacity: 1; } }
.km-tropfen { opacity: 0; animation-name: km-tropfen; }
@keyframes km-tropfen { 0%, 19% { opacity: 0; } 22%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
.km-nass { animation-name: km-nass; }
@keyframes km-nass { 0%, 20% { opacity: 0; } 38%, 100% { opacity: 1; } }
.km-gel { transform-box: fill-box; transform-origin: center; animation-name: km-gel; }
@keyframes km-gel { 0%, 38% { transform: scale(.3); } 50% { transform: scale(1.12); } 55%, 100% { transform: scale(1); } }
.km-wurzel { stroke-dasharray: 1; animation-name: km-wurzel; }
@keyframes km-wurzel { 0%, 50% { stroke-dashoffset: 1; } 72%, 100% { stroke-dashoffset: 0; } }
.km-haare { opacity: .75; animation-name: km-haare; }
@keyframes km-haare { 0%, 72% { opacity: 0; } 80%, 100% { opacity: .75; } }
/* Pflanze wächst als Ganzes aus dem Boden (Drehpunkt = Fuß des Stängels im viewBox) */
.km-wuchs { transform-origin: 260px 214px; animation-name: km-wuchs; }
@keyframes km-wuchs { 0%, 54% { transform: scale(0); } 70% { transform: scale(.62); } 86%, 100% { transform: scale(1); } }
.km-krone { transform-box: fill-box; transform-origin: 6% 88%; animation-name: km-krone; }
@keyframes km-krone { 0%, 78% { transform: scale(0) rotate(-24deg); } 89% { transform: scale(1.08) rotate(3deg); } 93%, 100% { transform: scale(1); } }
@media (max-width: 860px) { .keim { grid-template-columns: 1fr; } }

/* Laufband */
.laufband { padding: 22px 0; border-block: 1px solid var(--linie); overflow: hidden; background: #fff; }
.laufband-spur { display: flex; gap: 48px; width: max-content; animation: laufen 38s linear infinite; }
.laufband:hover .laufband-spur { animation-play-state: paused; }
.laufband span { display: inline-flex; align-items: center; gap: 48px; font-weight: 700; font-size: 1.05rem; color: var(--tinte-2); white-space: nowrap; }
.laufband span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verlauf); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Karten & Raster */
.raster { display: grid; gap: 22px; }
.r2 { grid-template-columns: repeat(2, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .r3, .r4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .r2, .r3, .r4 { grid-template-columns: 1fr; } }
.karte {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 28px;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s cubic-bezier(.22, 1, .36, 1), border-color .25s cubic-bezier(.22, 1, .36, 1);
  position: relative; overflow: hidden;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: rgba(114, 157, 73, .35); }
.karte p:last-child { margin-bottom: 0; }
.karte h3 { margin-top: 4px; }
.icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--verlauf-hell); color: var(--blau);
}
.icon svg { width: 26px; height: 26px; }
.karte .nr { position: absolute; right: 22px; top: 16px; font-size: 3.2rem; font-weight: 800; color: rgba(21, 35, 43, .05); letter-spacing: -.04em; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split.umgekehrt > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.umgekehrt > :first-child { order: 0; } }
.verlauf-flaeche { background: var(--verlauf-hell); }
.bild-rahmen { border-radius: 28px; overflow: hidden; box-shadow: var(--schatten); position: relative; }
.bild-rahmen img { width: 100%; height: 100%; object-fit: cover; }

.liste-haken { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.liste-haken li { display: flex; gap: 12px; align-items: flex-start; }
.liste-haken li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* Kennzahlen */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--linie); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); }
.zahl { background: #fff; padding: 30px 26px; }
.zahl b { display: block; font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -.04em; line-height: 1; margin-bottom: 10px; }
.zahl > span { color: var(--tinte-2); font-size: .95rem; }
/* Bei ungerader Anzahl füllt die letzte Kachel die ganze Zeile, sonst bleibt ein leeres graues Feld */
@media (max-width: 860px) { .zahlen { grid-template-columns: repeat(2, 1fr); } .zahl:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Ablauf */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; counter-reset: schritt; }
.ablauf::before {
  content: ""; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 2px;
  background: var(--verlauf-linie); transform-origin: left; transform: scaleX(0); transition: transform 1.6s ease .2s;
}
.ablauf.sichtbar::before { transform: scaleX(1); }
.schritt { position: relative; text-align: center; padding: 0 8px; }
.schritt .kreis {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-weight: 800; color: var(--blau); box-shadow: 0 0 0 2px var(--blau), 0 0 0 8px #fff; position: relative; z-index: 1;
}
.flaeche .schritt .kreis { box-shadow: 0 0 0 2px var(--blau), 0 0 0 8px var(--flaeche); }
.schritt p { color: var(--tinte-2); font-size: .96rem; }
@media (max-width: 860px) {
  .ablauf { grid-template-columns: 1fr; gap: 28px; }
  .ablauf::before { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .ablauf.sichtbar::before { transform: scaleY(1); }
  .schritt { text-align: left; display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 0; }
  .schritt .kreis { margin: 0; }
}
/* Zeitstrahl: Ablauf mit Text abwechselnd über und unter der Linie, Anzahl über --n. Mobil gilt der senkrechte Ablauf. */
.zeitstrahl .kreis { font-size: .9rem; }
@media (min-width: 861px) and (max-width: 1139px) { /* zu schmal für viele Spalten: senkrecht wie mobil */
  .zeitstrahl { grid-template-columns: 1fr; gap: 28px; }
  .zeitstrahl::before { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .zeitstrahl.sichtbar::before { transform: scaleY(1); }
  .zeitstrahl .schritt { text-align: left; display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 0; }
  .zeitstrahl .kreis { margin: 0; }
}
@media (min-width: 1140px) {
  .zeitstrahl { grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: 1fr auto 1fr; row-gap: 18px; margin-inline: 36px; }
  .zeitstrahl::before { top: calc(50% - 1px); left: calc(50% / var(--n)); right: calc(50% / var(--n)); }
  .zeitstrahl .schritt { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; }
  .zeitstrahl .kreis { grid-row: 2; margin: 0 auto; }
  .zeitstrahl .schritt > div { grid-row: 3; }
  .zeitstrahl .schritt:nth-child(odd) > div { grid-row: 1; align-self: end; }
  .zeitstrahl .schritt p { margin-bottom: 0; text-wrap: balance; }
  /* Nachbarn stehen auf der anderen Seite der Linie, der Text darf deshalb über die Spalte hinausragen */
  .zeitstrahl .schritt { padding: 0; }
  .zeitstrahl .schritt > div { margin-inline: -36px; }
  .zeitstrahl::before { transition-duration: 3.6s; }
}

/* Produkte */
.produkt { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.produkt .logo-flaeche { background: var(--verlauf-hell); height: 148px; display: grid; place-items: center; padding: 20px 28px; }
/* --logo-h je Produkt: gleicht aus, dass der Schriftzug je Logo unterschiedlich viel Bildhöhe einnimmt */
.produkt .logo-flaeche img { height: var(--logo-h, 48px); width: auto; max-width: 100%; object-fit: contain; }
.produkt .inhalt { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.produkt .inhalt p { align-self: stretch; }
.produkt .inhalt .liste-haken { margin: 6px 0 22px; font-size: .95rem; }
.produkt .btn { margin-top: auto; align-self: flex-start; }
.tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--gruen-hell); color: var(--gruen-dunkel); margin-bottom: 12px; }
.tag.blau { background: var(--blau-hell); color: var(--blau-dunkel); }
.tag.erde { background: #f2e9dc; color: #6d4f2c; }

/* Maschinen */
.maschine { padding: 0; }
.maschine img { aspect-ratio: 520 / 350; object-fit: cover; width: 100%; transition: transform .6s ease; }
.maschine:hover img { transform: scale(1.05); }
.maschine .inhalt { padding: 22px 24px 26px; }
.maschine .bild { overflow: hidden; }

/* Vergleich */
.vergleich {
  position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--schatten);
  --pos: 50%; user-select: none; background: #ddd;
}
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich .oben { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vergleich input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.vergleich .griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.vergleich .griff::after {
  content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--blau); display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; box-shadow: var(--schatten);
}
.vergleich input:focus-visible ~ .griff::after { outline: 3px solid var(--blau); outline-offset: 2px; }
.etikett {
  position: absolute; top: 14px; z-index: 2; background: rgba(15, 37, 48, .78); color: #fff; font-size: .78rem; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; pointer-events: none; backdrop-filter: blur(6px);
}
.etikett.l { left: 14px; background: var(--gruen-dunkel); } .etikett.r { right: 14px; }

.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.galerie figure { margin: 0; border-radius: 20px; overflow: hidden; position: relative; }
.galerie img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .6s; }
.galerie figure:hover img { transform: scale(1.04); }
@media (max-width: 560px) { .galerie { grid-template-columns: 1fr; } }
.beispiel { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--linie); }
.beispiel:first-of-type { border-top: 0; }
@media (max-width: 860px) { .beispiel { grid-template-columns: 1fr; } }
.beispiel h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.beispiel .kennwert { display: inline-flex; align-items: baseline; gap: 8px; margin: 8px 0 16px; padding: 10px 16px; border-radius: 14px; background: var(--gruen-hell); color: var(--gruen-dunkel); font-weight: 700; }
.beispiel .kennwert b { font-size: 1.6rem; letter-spacing: -.03em; }

/* Zitate */
.zitat {
  display: flex; flex-direction: column; margin: 0; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 55%, rgba(114, 157, 73, .05));
}
.zitat::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--verlauf); transform: scaleY(.572); transform-origin: top; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.zitat:hover::before { transform: none; }
.zitat:hover .zitat-logo { transform: scale(1.05); box-shadow: inset 0 0 0 1px rgba(114, 157, 73, .4), var(--schatten-klein); }
.zitat:hover::after { opacity: .12; transform: translateY(-4px); }
.zitat::after {
  content: "\201C"; position: absolute; right: 20px; bottom: -34px; font-size: 150px; line-height: 1;
  font-family: Georgia, "Times New Roman", serif; color: var(--gruen); opacity: .07; pointer-events: none;
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1);
}
.zitat blockquote { margin: 0; font-size: 1.02rem; color: var(--tinte-2); position: relative; z-index: 1; }
.zitat blockquote p:last-child { margin-bottom: 0; }
.zitat mark {
  color: inherit; padding: 0 2px; border-radius: 3px; background-color: transparent;
  background-image: linear-gradient(transparent 58%, rgba(114, 157, 73, .3) 58%);
  background-repeat: no-repeat; background-size: 100% 100%;
}
.js .zitat mark { background-size: 0 100%; transition: background-size .5s ease-in-out .45s; }
.js .zitat.sichtbar mark { background-size: 100% 100%; }
.zitat figcaption {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px;
  margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--linie);
}
.zitat-logo {
  grid-row: span 2; width: 92px; height: 68px; border-radius: 16px; display: grid; place-items: center; flex: none;
  background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-klein);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s cubic-bezier(.22, 1, .36, 1);
}
.zitat-logo img { max-height: 46px; max-width: 74px; width: auto; height: auto; object-fit: contain; }
.zitat figcaption b { display: block; align-self: end; font-size: 1.05rem; }
.zitat figcaption > div > span { display: block; font-size: .88rem; color: var(--muted); }
.zitat figcaption .sterne { grid-column: 2; align-self: start; font-size: .82rem; letter-spacing: .08em; margin: 0; }
.sterne { color: #e7a91a; letter-spacing: 2px; font-size: 1rem; margin-bottom: 10px; }
.zitat-gross { max-width: 900px; margin: 0 auto; text-align: center; }
.zitat-gross blockquote { font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.45; letter-spacing: -.01em; margin: 0 0 26px; color: var(--tinte); }
.zitat-gross figcaption { color: var(--muted); }
.zitat-gross figcaption b { color: var(--tinte); }

/* Team */
.person { padding: 0; text-align: left; }
.person img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.person .inhalt { padding: 22px 24px 26px; }
.person .rolle { color: var(--gruen-dunkel); font-weight: 600; font-size: .92rem; margin-bottom: 12px; }
.person details { margin-top: 10px; }
.person summary { cursor: pointer; font-weight: 700; color: var(--blau); list-style: none; }
.person summary::-webkit-details-marker { display: none; }
.person summary::after { content: " +"; }
.person details[open] summary::after { content: " –"; }
.person details p, .person details ul { font-size: .94rem; color: var(--tinte-2); margin-top: 10px; }
.person details ul { padding-left: 18px; }

/* Werte */
.werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wert {
  background: #fff; border: 1px solid var(--linie); border-radius: 20px; padding: 26px 26px 28px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s cubic-bezier(.22, 1, .36, 1), border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.wert::before {
  content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--verlauf);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.wert:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: rgba(114, 157, 73, .35); }
.wert:hover::before { transform: scaleX(1); }
.wert-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
  background: var(--verlauf-hell); color: var(--gruen-dunkel); transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.wert-icon svg { width: 22px; height: 22px; }
.wert:hover .wert-icon { transform: scale(1.08) rotate(-4deg); }
.wert h3 { font-size: 1.08rem; margin-bottom: 8px; }
.wert p { margin: 0; color: var(--tinte-2); font-size: .95rem; }
.js .werte.sichtbar .wert { animation: wert-ein .5s ease-in-out var(--d) both; }
@keyframes wert-ein { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 860px) { .werte { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .js .werte.sichtbar .wert { animation: none; } }
@media (max-width: 860px) { .werte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .werte { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 980px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 0 24px; transition: box-shadow .3s, border-color .3s; }
.faq details[open] { box-shadow: var(--schatten-klein); border-color: rgba(0, 108, 162, .3); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--blau-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006ca2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 20px; color: var(--tinte-2); }
.faq details > div p:last-child { margin: 0; }

/* CTA-Band */
.cta-band {
  background: var(--verlauf); color: #fff; border-radius: 32px; padding: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; position: relative; overflow: hidden;
}
.cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); }
.cta-band::before { width: 420px; height: 420px; right: -120px; top: -180px; animation: welle 9s ease-in-out infinite; }
.cta-band::after { width: 260px; height: 260px; right: 40px; bottom: -160px; animation: welle 11s ease-in-out infinite reverse; }
@keyframes welle { 50% { transform: scale(1.12); } }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .9); margin: 0; }
.cta-band .aktionen { margin: 0; justify-content: flex-end; position: relative; z-index: 1; }
.cta-kreise { display: flex; gap: 14px; justify-content: flex-end; position: relative; z-index: 1; }
.cta-kreise .kreis {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6);
  transition: background .2s, transform .2s, color .2s, box-shadow .2s;
}
.cta-kreise .kreis:hover { background: #fff; color: var(--gruen-dunkel); box-shadow: inset 0 0 0 1.5px #fff; transform: translateY(-2px); text-decoration: none; }
.cta-kreise svg { width: 24px; height: 24px; }
.cta-band .btn-rand { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.cta-band .btn-rand:hover { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } .cta-band .aktionen, .cta-kreise { justify-content: flex-start; } }

/* Instagram */
.insta { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.insta img { max-width: 420px; width: 100%; margin-inline: auto; animation: schweben 7s ease-in-out infinite; }
@media (max-width: 860px) { .insta { grid-template-columns: 1fr; } }

/* Hinweis-Box */
.hinweis { display: flex; gap: 12px; align-items: flex-start; background: #fff7e6; border: 1px solid #f1d9a6; color: #6b4a06; border-radius: 14px; padding: 12px 16px; font-size: .92rem; }

/* Rechtstexte & Artikel */
.text { max-width: 900px; }
.text h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 2em; }
.text h3 { margin-top: 1.6em; }
.text h4 { margin: 1.4em 0 .4em; font-size: 1.02rem; }
.text ul { padding-left: 20px; }
/* Vergleichstabelle im Ratgeber: auf schmalen Bildschirmen seitlich verschiebbar */
.tabelle-rahmen { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--linie); border-radius: 16px; background: #fff; }
.vergleichstabelle { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .95rem; }
.vergleichstabelle th, .vergleichstabelle td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.vergleichstabelle thead th { background: var(--gruen-hell); color: var(--gruen-dunkel); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.vergleichstabelle tbody tr:last-child th, .vergleichstabelle tbody tr:last-child td { border-bottom: 0; background: var(--blau-hell); }
.text li { margin-bottom: .35em; }
.text .gross { text-transform: none; }
.text-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.inhaltsverz { position: sticky; top: 124px; font-size: .9rem; border-left: 2px solid var(--linie); padding-left: 16px; }
.inhaltsverz b { display: block; margin-bottom: 10px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.inhaltsverz a { display: block; color: var(--tinte-2); text-decoration: none; padding: 5px 0; }
.inhaltsverz a:hover { color: var(--blau); }
@media (max-width: 900px) { .text-layout { grid-template-columns: 1fr; } .inhaltsverz { position: static; } }
.artikel-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; color: var(--muted); margin-top: 14px; }
.text h2, .info-box { clear: both; }
.info-box { background: var(--flaeche); border-radius: 18px; padding: 22px 26px; margin: 28px 0; border-left: 4px solid var(--gruen); }
.info-box p:last-child { margin: 0; }

/* Footer: helle Fläche im Markenverlauf, damit das Logo in Originalfarben stehen kann */
.fuss { background: var(--verlauf-fuss); color: var(--tinte-2); padding: 72px 0 26px; border-top: 1px solid var(--linie); }
.fuss a { color: var(--tinte); text-decoration: none; }
.fuss a:hover { color: var(--blau-dunkel); text-decoration: underline; }
.fuss-oben { display: grid; grid-template-columns: 1.3fr 1.1fr .8fr 1.1fr .8fr; gap: 40px; }
.fuss img.logo { width: 230px; margin-bottom: 18px; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.fuss-marke a:hover img.logo { transform: translateY(-2px); }
.fuss-marke p { max-width: 34ch; font-size: .95rem; color: var(--muted); }
.fuss-sozial { display: flex; gap: 10px; margin-top: 22px; }
.fuss-sozial a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--tinte);
  background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-klein);
  transition: background .2s, transform .2s, color .2s;
}
.fuss-sozial a:hover { background: var(--gruen); color: #fff; transform: translateY(-2px); text-decoration: none; }
.fuss-sozial svg { width: 20px; height: 20px; }
.fuss h3 { color: var(--tinte); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.fuss-kontakt li { display: flex; gap: 10px; align-items: flex-start; }
.fuss-kontakt svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--gruen-dunkel); }
.fuss address { font-style: normal; line-height: 1.5; }
.fuss-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 52px; padding: 22px 26px; border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-klein);
}
.fuss-cta p { margin: 0; color: var(--tinte); font-weight: 600; max-width: 56ch; }
.fuss-cta p small { display: block; margin-top: 4px; font-size: .82rem; font-weight: 400; color: var(--muted); }
.fuss-unten {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--muted);
  padding-right: 76px;   /* Platz für den WhatsApp-Knopf unten rechts */
}
@media (max-width: 1000px) { .fuss-oben { grid-template-columns: 1fr 1fr; gap: 36px; } .fuss-marke { grid-column: 1 / -1; } }
@media (max-width: 560px) { .fuss-oben { grid-template-columns: 1fr; } .fuss-cta { flex-direction: column; align-items: flex-start; } }

/* Beispielrechner: zwei Rechenzettel nebeneinander */
.rechner { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.zettel { padding: clamp(22px, 3vw, 30px); }
.zettel h2 { margin: 0 0 6px; font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.zettel label, .zettel .zeile { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linie); font-weight: 600; }
.zettel label { grid-template-columns: 1fr 116px; }
.zettel small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.zettel .zeile b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.zettel .summe { border-bottom: 0; font-size: 1.12rem; }
.zettel .summe b { font-size: 1.6em; }
.zettel-fazit { margin: 4px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--flaeche); line-height: 1.5; }
.zettel input { font: inherit; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; text-align: right; width: 100%; background: #fff; color: var(--tinte); }
.zettel input:focus { outline: 2px solid var(--gruen); outline-offset: 1px; border-color: transparent; }
.rechner-noten { max-width: 900px; margin: 28px auto 0; padding-left: 20px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.rechner-noten li { margin-bottom: 6px; }
@media (max-width: 960px) { .rechner { grid-template-columns: 1fr; } }

/* WhatsApp-Knopf */
.whatsapp {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;  /* über Acker und Laufband (61) */ width: 56px; height: 56px; border-radius: 50%;
  background: var(--gruen); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
  transition: transform .2s;
}
.whatsapp:hover { transform: scale(1.08); color: #fff; }
.whatsapp svg { width: 30px; height: 30px; }
.whatsapp::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gruen);
  animation: whatsapp-ring 2.4s ease-out infinite; pointer-events: none;
}
@keyframes whatsapp-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.55); opacity: 0; } }

/* Dialog / Formular */
dialog.formular {
  width: min(760px, 100% - 24px); max-height: calc(100dvh - 24px); border: 0; border-radius: 26px; padding: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3); color: var(--tinte);
}
dialog.formular::backdrop { background: rgba(15, 37, 48, .55); backdrop-filter: blur(4px); }
dialog.formular[open] { animation: auf .25s cubic-bezier(.22, 1, .36, 1); }
@keyframes auf { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.dialog-kopf { position: sticky; top: 0; background: #fff; padding: 26px 28px 16px; border-bottom: 1px solid var(--linie); z-index: 1; }
.dialog-kopf h2 { font-size: 1.6rem; margin: 0 40px 8px 0; }
.dialog-kopf p { font-size: .95rem; color: var(--tinte-2); margin: 0 0 12px; }
.schliessen {
  position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--flaeche); cursor: pointer; font-size: 1.2rem; color: var(--tinte);
}
.schliessen:hover { background: var(--gruen-hell); }
.formular form { padding: 22px 28px 28px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld.voll { grid-column: 1 / -1; }
@media (max-width: 600px) { .felder { grid-template-columns: 1fr; } }
.feld label { font-size: .86rem; font-weight: 700; }
.feld label .pflicht { color: #b3261e; }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--linie); background: #fff; color: var(--tinte); width: 100%;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--blau); outline: none; box-shadow: 0 0 0 4px rgba(0, 108, 162, .12); }
.feld input[type="file"] { padding: 10px; background: var(--flaeche); border-style: dashed; }
.feld small { color: var(--muted); font-size: .8rem; }
.gruppe-titel { grid-column: 1 / -1; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 10px; }
.check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gruen); flex: none; }
.honig { position: absolute; left: -9999px; }
.form-status { margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-weight: 600; display: none; }
.form-status.ok { display: block; background: var(--gruen-hell); color: var(--gruen-dunkel); }
.form-status.fehler { display: block; background: #fdecea; color: #8c1d18; }
.formular .btn[disabled] { opacity: .6; cursor: progress; }

/* Scroll-Reveal */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-in-out, transform .5s ease-in-out; }
.js [data-reveal].sichtbar { opacity: 1; transform: none; }
.js [data-reveal="links"] { transform: translateX(-12px); }
.js [data-reveal="rechts"] { transform: translateX(12px); }

/* 404 */
.nicht-gefunden { text-align: center; padding: 120px 0; }

@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .schwebe.eins { left: -12px; top: 12%; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .marke img { width: 190px; }
  .kopfzeile .wrap { gap: 12px; }
  .schwebe { display: none; }
  /* Karten mit randlosem Bild (Produkt, Maschine) behalten ihren Innenabstand 0, sonst sitzt das Bild in einem weißen Rahmen */
  .karte:not(.produkt):not(.maschine) { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .wurzel { stroke-dashoffset: 0; }
  .konvoi, .spur, .spur-innen { animation: none !important; }
  .laufband-spur { flex-wrap: wrap; width: auto; justify-content: center; }
  .laufband-spur [aria-hidden] { display: none; }
}

@media print {
  .kopfzeile, .fuss, .whatsapp, dialog, .blobs { display: none !important; }
}

/* Sofortige Sprachumschaltung: während des Tauschs keine Übergänge */
.tausch *, .tausch *::before, .tausch *::after { transition: none !important; }

/* Wirkungskurve (Kundenstimmen) */
.kurve { margin: 0; }
.kurve svg { width: 100%; height: auto; overflow: visible; }
.kurve .netz line { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 3 7; }
.kurve .achslinie { stroke: var(--tinte); stroke-width: 1.5; opacity: .3; }
.kurve .achse { fill: var(--muted); font-size: 15px; font-weight: 600; }
.kurve .achse-titel { fill: var(--muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.kurve .mit { fill: none; stroke: url(#kurveLinie); stroke-width: 4.5; stroke-linecap: round; }
.kurve .ohne { fill: none; stroke: #c8ccc4; stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: round; }
.kurve .flaeche { fill: url(#kurveFlaeche); }
.kurve .kurven-punkt { fill: #fff; stroke: var(--gruen); stroke-width: 3; }
.kurve .label { font-size: 15px; font-weight: 700; }
.kurve .mit-label { fill: var(--blau-dunkel); }
.kurve .ohne-label { fill: var(--muted); }
/* Bildunterschrift bündig mit der Y-Achse (x=60 im viewBox 560) */
.kurve figcaption { margin-top: 18px; padding-left: 10.7%; font-size: .88rem; color: var(--muted); }
.js .kurve .mit, .js .kurve .ohne, .js .kurve .flaeche { clip-path: inset(0 100% 0 0); }
.js .kurve .kurven-punkt, .js .kurve .label { opacity: 0; }
.js .kurve.sichtbar .mit, .js .kurve.sichtbar .flaeche { animation: linie-wischen 3.4s cubic-bezier(.3, 0, .25, 1) .3s forwards; }
.js .kurve.sichtbar .ohne { animation: linie-wischen 3.4s cubic-bezier(.3, 0, .25, 1) .3s forwards; }
.js .kurve.sichtbar .kurven-punkt { animation: einblenden .5s ease var(--d) forwards; }
.js .kurve.sichtbar .mit-label { animation: einblenden .6s ease 3.3s forwards; }
.js .kurve.sichtbar .ohne-label { animation: einblenden .6s ease 3.3s forwards; }
@keyframes linie-wischen { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .js .kurve .mit, .js .kurve .ohne, .js .kurve .flaeche { clip-path: none; animation: none; }
  .js .kurve .kurven-punkt, .js .kurve .label { opacity: 1; animation: none; }
}
/* Ertragsverlauf (Kundenstimmen) */
.ertrag { margin: 0; }
.ertrag svg { width: 100%; height: auto; overflow: visible; }
.ertrag .netz line { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 3 6; }
.ertrag .boden { stroke: var(--tinte); stroke-width: 2; opacity: .35; }
.ertrag .achse { fill: var(--muted); font-size: 15px; font-weight: 600; }
.ertrag .balken { transform-box: fill-box; transform-origin: bottom; }
.ertrag .balken.mit { fill: url(#balkenMit); }
.ertrag .balken.ohne { fill: #d6d9d2; }
.ertrag .trockenjahr rect { fill: rgba(224, 168, 60, .12); stroke: rgba(224, 168, 60, .5); stroke-width: 1; stroke-dasharray: 5 5; }
.ertrag .trockenjahr text { fill: #a9771a; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ertrag .legende text { fill: var(--muted); font-size: 14px; dominant-baseline: middle; }
.ertrag .legende-mit { fill: url(#balkenMit); }
.ertrag .legende-ohne { fill: #d6d9d2; }
.ertrag figcaption { margin-top: 16px; font-size: .88rem; color: var(--muted); }
.js .ertrag .balken { transform: scaleY(0); }
.js .ertrag .trockenjahr { opacity: 0; }
.js .ertrag.sichtbar .balken { animation: balken-auf .9s cubic-bezier(.2, .8, .2, 1) var(--d) forwards; }
.js .ertrag.sichtbar .trockenjahr { animation: einblenden .6s ease var(--d) forwards; }
@keyframes balken-auf { to { transform: scaleY(1); } }
@keyframes einblenden { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .ertrag .balken { transform: none; animation: none; }
  .js .ertrag .trockenjahr { opacity: 1; animation: none; }
}

/* Einwilligung zur Besucherzählung */
.zaehl-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 95;
  width: min(520px, calc(100vw - 32px)); background: #fff; border-radius: 20px; padding: 26px 28px;
  box-shadow: inset 0 0 0 1px var(--linie), 0 18px 50px rgba(16, 32, 20, .18);
  animation: banner-ein .45s cubic-bezier(.2, .8, .2, 1) both;
}
.zaehl-banner[hidden] { display: none; }
.zb-titel { font-weight: 700; font-size: 1.1rem; margin: 0 0 10px; color: var(--tinte); }
.zb-text { margin: 0 0 20px; font-size: .92rem; line-height: 1.55; color: var(--tinte-2); }
.zb-text a { color: var(--gruen-dunkel); }
.zb-knoepfe { display: flex; gap: 12px; }
.zb-knoepfe .btn { flex: 1; justify-content: center; }
.fuss-einst {
  background: none; border: 0; padding: 0; font: inherit; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fuss-einst:hover { color: var(--gruen-dunkel); }
@keyframes banner-ein { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (max-width: 560px) { .zaehl-banner { bottom: 12px; padding: 22px 20px; } .zb-knoepfe { flex-direction: column-reverse; } }
@media (prefers-reduced-motion: reduce) { .zaehl-banner { animation: none; } }

/* Seitenleiste (ab 1.000 px Breite, Idee Heiko 14.10.2026 nach Europa-Park): links eine Leiste im Fußzeilen-Verlauf,
   Kopfzeile im selben Verlauf, die Seite liegt als weißes Blatt darin und läuft unten im großen Bogen in die Fußzeile.
   Klassenname bewusst nicht „blatt“: den gibt es schon für die flatternden Blätter in der Grafik. */
:root { --leiste: 78px; }
.leiste { display: none; }
/* Runde Flaggen statt DE/EN, in der Leiste und im Sprachumschalter oben */
.flagge { display: block; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15, 37, 48, .12); }
.kopfzeile .sprache { padding: 4px; gap: 2px; }
.kopfzeile .sprache a { padding: 5px; display: grid; place-items: center; }
.kopfzeile .sprache .flagge { width: 22px; height: 22px; }
.kopfzeile .sprache a[aria-current="false"] .flagge { opacity: .5; filter: saturate(.6); transition: opacity .2s, filter .2s; }
.kopfzeile .sprache a[aria-current="false"]:hover .flagge { opacity: 1; filter: none; }
@media (min-width: 1000px) {
  body { background: var(--verlauf-fuss); background-attachment: fixed; }
  html, body { overscroll-behavior-y: none; }   /* kein Nachfedern oben, sonst löst sich die Ecke vom Blatt */
  /* kein z-index: Acker und Laufband müssen über die Leiste gelegt werden können (Symbole laufen dahinter durch) */
  .seitenblatt { margin-left: var(--leiste); background: var(--weiss); border-radius: 40px 0 0 220px; overflow: visible;
           position: relative; padding-bottom: 40px; }
  .kopfzeile { background: var(--verlauf-fuss); background-attachment: fixed; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; z-index: 70; }
  .kopfzeile.gescrollt { box-shadow: none; }
  /* Innere Rundung, wo Leiste und Kopfzeile ineinander übergehen: bleibt auch beim Scrollen stehen */
  .leiste::before { content: ""; position: fixed; left: var(--leiste); top: 100px; width: 40px; height: 40px; z-index: 65;
                    background: var(--verlauf-fuss); background-attachment: fixed; pointer-events: none;
                    -webkit-mask: radial-gradient(circle at 100% 100%, transparent 39.5px, #000 40.5px);
                            mask: radial-gradient(circle at 100% 100%, transparent 39.5px, #000 40.5px); }
  .seitenblatt .feldfahrt { margin-left: calc(var(--leiste) * -1); width: calc(100% + var(--leiste)); z-index: 61; }
  /* Von oben läuft das Leistengrün zum Acker hin ins Weiße aus, spiegelbildlich zum Auslauf unter dem Laufband */
  /* Acker schneidet nur seitlich ab (Traktoren), nach oben darf der Übergang 110px herausragen */
  .seitenblatt .feldfahrt { overflow-x: clip; overflow-y: visible; }
  /* Übergang liegt unter Pflanzen, Traktoren und Spur (Safari malt ihn sonst teils darüber) */
  .seitenblatt .feldfahrt > * { z-index: 1; }
  .seitenblatt .feldfahrt::before { content: ""; position: absolute; left: 0; top: max(-110px, var(--unter-kopf, -110px)); bottom: var(--acker); width: var(--leiste); pointer-events: none; z-index: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff 100%), var(--verlauf-fuss); background-attachment: scroll, fixed;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 100%); }
  /* Laufband läuft durch die Leiste: in der Leiste geht der Grund von Grün nach Weiß über, und unterhalb der Zeile
     läuft dieser Übergang weich nach unten aus, damit keine waagerechte Kante zum Leistengrün entsteht */
  .seitenblatt .laufband { margin-left: calc(var(--leiste) * -1); width: calc(100% + var(--leiste)); position: relative; z-index: 61;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff var(--leiste)), var(--verlauf-fuss); background-attachment: scroll, fixed; border-block: 0; }
  /* Trennlinie unter der Zeile: beginnt erst an der Blattkante und blendet dort weich ein, nichts davon in der Leiste */
  .seitenblatt .laufband::after { content: ""; position: absolute; left: var(--leiste); right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, rgba(220, 228, 223, 0) 0, var(--linie) 180px); pointer-events: none; }
  /* Auslauf nach unten sitzt am folgenden Abschnitt: das Laufband selbst schneidet alles außerhalb ab */
  .seitenblatt .laufband + section { position: relative; }
  /* steckt der Abschnitt schon unter der Kopfzeile, beginnt der Auslauf erst an ihrer Unterkante und entsprechend schwächer */
  .seitenblatt .laufband + section { --rest: clamp(0px, 110px - var(--unter-kopf, 0px), 110px); }
  .seitenblatt .laufband + section::before { content: ""; position: absolute; left: calc(var(--leiste) * -1); top: calc(110px - var(--rest)); width: var(--leiste); height: var(--rest); pointer-events: none; z-index: 61;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff 100%), var(--verlauf-fuss); background-attachment: scroll, fixed;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, var(--anteil, 1)) var(--weich, 0px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, var(--anteil, 1)) var(--weich, 0px), transparent 100%); }
  .fuss { background: transparent; border-top: 0; padding-left: var(--leiste); }
  .leiste { position: fixed; left: 0; top: 0; bottom: 0; width: var(--leiste); z-index: 60;
            display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 124px 0 24px; }
  .leiste a { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--tinte);
              background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); text-decoration: none;
              transition: background .2s, color .2s, transform .2s; position: relative; }
  .leiste a:hover, .leiste a:focus-visible { background: var(--verlauf); color: #fff; transform: translateX(3px); }
  .leiste a[aria-current="page"] { background: var(--verlauf); color: #fff; }
  .leiste svg { width: 22px; height: 22px; }
  .leiste .trenner { width: 30px; height: 2px; border-radius: 2px; background: var(--verlauf-linie); margin: 6px 0; }
  .leiste .flagge { width: 26px; height: 26px; }
  .leiste .sprache { display: contents; }
  /* Beschriftung beim Überfahren */
  .leiste a::after { content: attr(aria-label); position: absolute; left: 60px; white-space: nowrap; background: var(--tinte);
                     color: #fff; font-size: .8rem; font-weight: 600; padding: 6px 10px; border-radius: 8px;
                     opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
  .leiste a:hover::after, .leiste a:focus-visible::after { opacity: 1; transform: none; }
  .whatsapp { right: 26px; }
  /* Beim Ankommen von außen einmal kurz einpendeln (Klasse „neu“ setzt das Kopf-Skript), danach steht die Seite still */
  .neu .seitenblatt { animation: einpendeln 1.3s cubic-bezier(.3, .7, .3, 1) 1 both; }
  @keyframes einpendeln { 0% { transform: translateX(-26px); opacity: .4; } 45% { transform: translateX(7px); opacity: 1; }
                          72% { transform: translateX(-3px); } 100% { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .neu .seitenblatt { animation: none; } }
}


/* Saison (Heiko 14.10.2026): Farben bleiben gleich. Bob unten links am Seitenblatt wechselt nach data-saison sein Outfit,
   und das G im Logo trägt Bobs Hut der Saison. data-saison setzt das Kopf-Skript in build.py. */
.marke { position: relative; }
.logo-hut { position: absolute; left: -5%; top: -36%; width: 22%; pointer-events: none; }
.logo-hut svg { display: none; width: 100%; height: auto; transform: rotate(-16deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
[data-saison="weihnachten"] .hut-weihnachten, [data-saison="herbst"] .hut-herbst,
[data-saison="silvester"] .hut-silvester, [data-saison="ostern"] .hut-ostern { display: block; }

.bob { width: 130px; height: 210px; margin: 10px 0 -48px 18px; position: relative; z-index: 2; pointer-events: none;
  background: url("../img/bob/bob-standard.webp") center bottom / contain no-repeat; }
[data-saison="halloween"] .bob { background-image: url("../img/bob/bob-halloween-normal.webp"); }
[data-saison="halloween"] .seitenblatt:has(.cta-band) .bob { background-image: url("../img/bob/bob-halloween-zeigt-hoch.webp"); }
[data-saison="herbst"] .bob { background-image: url("../img/bob/bob-herbst-normal.webp"); }
[data-saison="herbst"] .seitenblatt:has(.cta-band) .bob { background-image: url("../img/bob/bob-herbst-zeigt-hoch.webp"); }
[data-saison="weihnachten"] .bob { background-image: url("../img/bob/bob-weihnachten-normal.webp"); }
[data-saison="weihnachten"] .seitenblatt:has(.cta-band) .bob { background-image: url("../img/bob/bob-weihnachten-zeigt-hoch.webp"); }
[data-saison="silvester"] .bob { background-image: url("../img/bob/bob-silvester-normal.webp"); }
[data-saison="silvester"] .seitenblatt:has(.cta-band) .bob { background-image: url("../img/bob/bob-silvester-zeigt-hoch.webp"); }
[data-saison="ostern"] .bob { background-image: url("../img/bob/bob-ostern-normal.webp"); }
[data-saison="ostern"] .seitenblatt:has(.cta-band) .bob { background-image: url("../img/bob/bob-ostern-zeigt-hoch.webp"); }
@media (min-width: 1000px) {
  /* steht rechts vom großen Bogen auf der Unterkante des Blatts, nicht über dem Fußzeilen-Logo */
  .bob { position: absolute; left: 185px; bottom: -38px; width: 160px; height: 260px; margin: 0; }
}
/* Zweiter Auftritt von Bob oben (nur Desktop, nur Saisons mit eigener Pose).
   Halloween: ein Bild, das Seil kommt von ganz oben bis in seine Faust. Er hängt fest am Fenster und schwingt an der Seilspitze. */
.bob-oben { display: none; }
@media (min-width: 1000px) {
  [data-saison="halloween"] .bob-oben { display: block; position: fixed; top: 0; right: 70px; width: 230px; aspect-ratio: 524 / 1000; z-index: 75;
    pointer-events: none; background: url("../img/bob/bob-halloween-seil.webp") center top / 100% auto no-repeat;
    transform-origin: 42.6% 0; animation: bob-pendel 3.2s ease-in-out infinite alternate; }
}
@keyframes bob-pendel { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .bob-oben { animation: none !important; } }

/* Logo bleibt unverändert, nur der Hut sitzt auf dem Bogen vom G */
[data-saison="halloween"] .logo-hut { left: -2%; top: -24%; width: 13%; aspect-ratio: 504/478;
  background: url("../img/hut-halloween.webp") center / contain no-repeat; }

/* Halloween-Deko (Heiko 14.10.2026): Spinnennetz mit Spinne oben rechts am Blatt, Fledermäuse fliegen ab und zu quer,
   Kürbisse neben Bob und auf dem Acker. Außerhalb von Halloween ist alles ausgeblendet. */
.netz, .fledermaeuse { display: none; }
[data-saison="halloween"] .seitenblatt { position: relative; }   /* auf dem Handy, damit das Netz am Blatt hängt */
[data-saison="halloween"] .netz { display: block; position: absolute; top: 0; right: 0; width: clamp(110px, 14vw, 190px); aspect-ratio: 312 / 360;
  background: url("../img/bob/netz.webp") right top / contain no-repeat; pointer-events: none; z-index: 2; }
/* Spinne hängt am Faden aus der Netzmitte und pendelt langsam */
/* Faden und Spinne über transform statt height (kein Neu-Layout je Bild): Faden staucht per scaleY, Spinne fährt per translateY mit */
.netz i { position: absolute; right: 30%; top: 22%; width: 1px; height: 140px;
  transform-origin: 50% 0; animation: spinne 4.5s ease-in-out infinite alternate; }
.netz i::before { content: ""; position: absolute; inset: 0; background: rgba(90, 100, 105, .55); transform-origin: top; animation: spinne-faden 4.5s ease-in-out infinite alternate; }
.netz i::after { content: ""; position: absolute; left: -21px; top: 0; width: 42px; aspect-ratio: 166 / 120; transform: translateY(140px);
  background: url("../img/bob/spinne.webp") center top / contain no-repeat; animation: spinne-tier 4.5s ease-in-out infinite alternate; }
@keyframes spinne { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes spinne-faden { from { transform: scaleY(.7857); } to { transform: none; } }
@keyframes spinne-tier { from { transform: translateY(110px); } to { transform: translateY(140px); } }
[data-saison="halloween"] .fledermaeuse { display: block; position: fixed; inset: 0; z-index: 74; pointer-events: none; overflow: hidden; }
/* Je Fledermaus ein Flug von rechts nach links, danach lange Pause (ca. alle 20 s) */
.fledermaeuse i { position: absolute; right: -120px; top: 40%; width: 80px; aspect-ratio: 278 / 150; opacity: 0;
  background: url("../img/bob/fledermaus-flug.webp") 0 0 / 400% 100% no-repeat;
  animation: flug 30s linear infinite, fluegel .45s steps(4) infinite; }
/* Bildstreifen: Flügel oben, Mitte, unten, Mitte */
@keyframes fluegel { to { background-position: 133.333% 0; } }
.fledermaeuse i:nth-child(2) { top: 52%; width: 58px; animation-delay: 1.8s, .15s; }
.fledermaeuse i:nth-child(3) { top: 32%; width: 48px; animation-delay: 3.2s, .3s; }
@keyframes flug {
  0% { transform: translate(0, 0); opacity: 1; }
  14% { transform: translate(-40vw, -30px); }
  28% { transform: translate(-80vw, 20px); }
  38% { transform: translate(calc(-100vw - 240px), -10px); opacity: 1; }
  38.1%, 100% { transform: translate(calc(-100vw - 240px), -10px); opacity: 0; }
}
/* Kürbisse stehen rechts neben Bob */
[data-saison="halloween"] .bob::after { content: ""; position: absolute; left: 88%; bottom: 0; width: 120px; aspect-ratio: 452 / 200;
  background: url("../img/bob/kuerbisse.webp") left bottom / contain no-repeat; }
/* und ein paar auf dem Acker der Startseite; die Traktoren fahren dahinter durch */
[data-saison="halloween"] .feldfahrt::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--acker) - 4px); height: 34px; pointer-events: none;
  background: url("../img/bob/kuerbisse.webp") 18% 100% / auto 100% no-repeat, url("../img/bob/kuerbisse.webp") 56% 100% / auto 100% no-repeat,
              url("../img/bob/kuerbisse.webp") 88% 100% / auto 100% no-repeat; }
/* Zweite Spinne seilt sich links im freien Rand neben dem Inhalt ab (nur breite Bildschirme, sonst läge sie über dem Text) */
.abseil { display: none; }
@media (min-width: 1300px) {
  [data-saison="halloween"] .abseil { display: block; position: fixed; top: 0; z-index: 71; pointer-events: none;
    left: calc(var(--leiste) + (100vw - var(--leiste) - min(var(--breite), 100vw - var(--leiste) - clamp(40px, 6vw, 96px))) / 4); }
}
/* wie beim Netz: Faden per scaleY, Spinne per translateY – gleiche Zeiten, darum bleiben beide aneinander */
.abseil i { position: absolute; left: 0; top: 0; width: 1px; height: 520px; }
.abseil i::before { content: ""; position: absolute; inset: 0; background: rgba(90, 100, 105, .55); transform-origin: top; animation: abseilen-faden 24s ease-in-out infinite; }
.abseil i::after { content: ""; position: absolute; left: -18px; top: 0; width: 36px; aspect-ratio: 166 / 120;
  background: url("../img/bob/spinne.webp") center top / contain no-repeat; animation: abseilen 24s ease-in-out infinite; }
@keyframes abseilen-faden { 0%, 4% { transform: scaleY(0); } 32% { transform: none; } 36% { transform: scaleY(.9615); } 40%, 58% { transform: scaleY(.9846); } 86%, 100% { transform: scaleY(0); } }
@keyframes abseilen { 0%, 4% { transform: translateY(0); } 32% { transform: translateY(520px); } 36% { transform: translateY(500px); } 40%, 58% { transform: translateY(512px); } 86%, 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .fledermaeuse, .abseil { display: none !important; } .netz i, .netz i::before, .netz i::after { animation: none; } }

/* Standard (Heiko 14.10.2026): Bob liegt auf dem Desktop im großen Bogen unten links am Blatt wie in einer Halfpipe und winkt */
@media (min-width: 1000px) {
  [data-saison="standard"] .bob { left: 40px; bottom: 0; width: 318px; height: 200px; transform: none; transform-origin: left bottom;
    background-image: url("../img/bob/bob-standard-liegend.webp"); }
  /* Mit grünem Kasten zeigt Bob darauf, sonst (Rechtstexte usw.) liegt er winkend da (Heiko 14.10.2026) */
  [data-saison="standard"] .seitenblatt:has(.cta-band) .bob { background-image: url("../img/bob/bob-standard-liegend-zeigt.webp"); }
}

/* Bob als Wegweiser (Heiko 14.10.2026): Bob unten links zeigt (Saisons) bzw. winkt (Standard) zum grünen Kasten darüber,
   die Sprechblase erscheint nur auf Seiten mit diesem Kasten und nur am Rechner. */
.bob .blase { display: none; }
@media (min-width: 1000px) {
  .seitenblatt:has(.cta-band) .bob .blase { display: block; position: absolute; left: calc(100% + 8px); top: 18%; white-space: nowrap;
    background: #fff; color: var(--tinte); font-weight: 700; font-size: .92rem; padding: 10px 16px; border-radius: 20px;
    border: 1.5px solid rgba(15, 37, 48, .12); box-shadow: 0 8px 20px rgba(15, 37, 48, .12); }
  /* Zipfel links, zeigt zu Bob */
  .seitenblatt:has(.cta-band) .bob .blase::after { content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; background: #fff;
    border-left: 1.5px solid rgba(15, 37, 48, .12); border-bottom: 1.5px solid rgba(15, 37, 48, .12);
    transform: translateY(-50%) rotate(45deg) skew(8deg, 8deg); border-bottom-left-radius: 4px; }
  /* liegender Bob: Blase direkt über dem Kopf, Zipfel nach unten zum Mund */
  [data-saison="standard"] .seitenblatt:has(.cta-band) { padding-bottom: 170px; }   /* Platz für die Blase zwischen Kasten und Bob */
  [data-saison="standard"] .seitenblatt:has(.cta-band) .bob .blase { left: 12%; top: auto; bottom: calc(100% + 6px); }
  [data-saison="standard"] .seitenblatt:has(.cta-band) .bob .blase::after { left: 34px; top: auto; bottom: -9px;
    border-left: 0; border-right: 1.5px solid rgba(15, 37, 48, .12); transform: rotate(45deg) skew(8deg, 8deg); border-bottom-left-radius: 0; border-bottom-right-radius: 4px; }
}

/* Weiche Seitenwechsel (Heiko 14.10.2026): Kopfzeile, Seitenleiste und WhatsApp-Knopf bleiben stehen,
   der Inhalt blendet aus und gleitet von unten ein. Browser ohne Unterstützung wechseln wie bisher. */
@view-transition { navigation: auto; }
.kopfzeile { view-transition-name: kopf; }
.leiste { view-transition-name: leiste; }
.whatsapp { view-transition-name: wa; }
::view-transition-group(kopf), ::view-transition-group(leiste), ::view-transition-group(wa) { animation: none; }
::view-transition-old(root) { animation: seite-raus .15s cubic-bezier(.22, 1, .36, 1) both; }
::view-transition-new(root) { animation: seite-rein .25s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes seite-raus { to { opacity: 0; } }
@keyframes seite-rein { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Produkt-Tafel unter „Produkte" (Heiko 14.10.2026): nur mit Maus und breitem Bildschirm, im Kopf ohne Pfeil */
.produkt-tafel { display: none; }
.nav-klapp { display: contents; }
@media (hover: hover) and (min-width: 1261px) {
  .nav-klapp { display: flex; align-items: center; position: relative; }      /* gleiche Höhe wie die anderen Menüpunkte */
  .produkt-tafel { display: grid; grid-template-columns: repeat(3, 150px); gap: 8px; position: absolute; left: 50%; top: 100%;
    padding: 10px; margin-top: 12px; background: var(--weiss); border-radius: 18px; box-shadow: 0 14px 40px rgba(15, 37, 48, .14);
    opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .15s cubic-bezier(.22, 1, .36, 1), transform .15s cubic-bezier(.22, 1, .36, 1), visibility 0s .15s; z-index: 5; }
  .produkt-tafel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* Brücke, damit die Maus nicht abreißt */
  .nav-klapp:hover .produkt-tafel, .nav-klapp:focus-within .produkt-tafel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s cubic-bezier(.22, 1, .36, 1) 80ms, transform .25s cubic-bezier(.22, 1, .36, 1) 80ms, visibility 0s 80ms; }
  .nav .produkt-karte { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; color: var(--tinte); text-decoration: none; transition: background .2s; }
  .nav .produkt-karte:hover { background: var(--flaeche); }
  .nav .produkt-karte::after { display: none; }
  .produkt-karte img { height: 22px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
  .produkt-karte span { font-size: .76rem; line-height: 1.35; color: #5d6c74; font-weight: 400; }
}

/* Fehlerseite (Heiko 14.10.2026): Bob sucht mit der Lupe, im Saison-Kostüm; der Bob unten am Blatt entfällt dort */
.bob-sucht { width: 180px; height: 240px; margin: 0 auto 8px; background: url("../img/bob/bob-standard-sucht.webp") center bottom / contain no-repeat; }
[data-saison="ostern"] .bob-sucht { background-image: url("../img/bob/bob-ostern-sucht.webp"); }
[data-saison="herbst"] .bob-sucht { background-image: url("../img/bob/bob-herbst-sucht.webp"); }
[data-saison="halloween"] .bob-sucht { background-image: url("../img/bob/bob-halloween-sucht-zaehne.webp"); }
[data-saison="weihnachten"] .bob-sucht { background-image: url("../img/bob/bob-weihnachten-sucht.webp"); }
[data-saison="silvester"] .bob-sucht { background-image: url("../img/bob/bob-silvester-sucht.webp"); }
.seitenblatt:has(.nicht-gefunden) .bob { display: none; }

/* Nach dem Absenden: Bob jubelt über der Erfolgsmeldung, im Saison-Kostüm */
.form-status.ok { text-align: center; }
.form-status.ok::before { content: ""; display: block; height: 150px; margin-bottom: 8px; background: url("../img/bob/bob-standard-jubelt.webp") center bottom / contain no-repeat; }
[data-saison="ostern"] .form-status.ok::before { background-image: url("../img/bob/bob-ostern-jubelt.webp"); }
[data-saison="herbst"] .form-status.ok::before { background-image: url("../img/bob/bob-herbst-jubelt.webp"); }
[data-saison="halloween"] .form-status.ok::before { background-image: url("../img/bob/bob-halloween-jubelt-zaehne.webp"); }
[data-saison="weihnachten"] .form-status.ok::before { background-image: url("../img/bob/bob-weihnachten-jubelt.webp"); }
[data-saison="silvester"] .form-status.ok::before { background-image: url("../img/bob/bob-silvester-jubelt.webp"); }

/* Lesefortschritt: feine Linie im Farbverlauf an der Unterkante der Kopfzeile */
.kopfzeile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--verlauf); pointer-events: none;
  transform: scaleX(var(--lesen, 0)); transform-origin: left center; }

/* „Nach oben"-Bob (Heiko 14.10.2026): erscheint über dem WhatsApp-Knopf, zeigt nach oben, Saison-Kostüm */
.nach-oben { position: fixed; right: 14px; bottom: 82px; z-index: 80; width: 64px; height: 96px; border: 0; padding: 0; cursor: pointer;
  background: url("../img/bob/bob-standard-nach-oben.webp") center bottom / contain no-repeat; opacity: 0; pointer-events: none;
  transform: translateY(14px); transition: opacity .25s, transform .25s; }
[data-saison="ostern"] .nach-oben { background-image: url("../img/bob/bob-ostern-nach-oben.webp"); }
[data-saison="herbst"] .nach-oben { background-image: url("../img/bob/bob-herbst-nach-oben.webp"); }
[data-saison="halloween"] .nach-oben { background-image: url("../img/bob/bob-halloween-nach-oben.webp"); }
[data-saison="weihnachten"] .nach-oben { background-image: url("../img/bob/bob-weihnachten-nach-oben.webp"); }
[data-saison="silvester"] .nach-oben { background-image: url("../img/bob/bob-silvester-nach-oben.webp"); }
.nach-oben.zeigen { opacity: 1; pointer-events: auto; transform: none; }
.nach-oben.zeigen:hover { animation: hopsen .5s ease; }
.nach-oben:focus-visible { outline: 2px solid var(--blau, #006ca2); outline-offset: 4px; border-radius: 12px; }

/* Kleine Bewegungen: Hochladen-Pfeil hüpft beim Darüberfahren, WhatsApp-Knopf wackelt einmal nach 20 Sekunden */
[data-bodenprobe]:hover svg { animation: hopsen .5s ease; }
@keyframes hopsen { 0%, 100% { transform: none; } 40% { transform: translateY(-5px); } 70% { transform: translateY(1px); } }
.whatsapp { animation: wackeln .9s ease 20s 1; }
@keyframes wackeln { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg) scale(1.06); } 40% { transform: rotate(10deg) scale(1.06); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { [data-bodenprobe]:hover svg, .whatsapp, .nach-oben.zeigen:hover { animation: none; } }

/* Fragen durchsuchen */
.faq-suche { position: relative; margin: 30px 0 4px; }
.faq-suche input { width: 100%; padding: 16px 22px 16px 96px; border-radius: 18px; border: 1.5px solid var(--linie); font: inherit; background: #fff; }
/* Mini-Bob mit Lupe im Suchfeld, Saison-Kostüm */
.faq-bob { position: absolute; left: 14px; bottom: 3px; width: 70px; height: 88px; z-index: 1; pointer-events: none;   /* ca. ein Drittel schaut oben heraus */
  background: url("../img/bob/bob-standard-sucht.webp") center bottom / contain no-repeat; }
[data-saison="ostern"] .faq-bob { background-image: url("../img/bob/bob-ostern-sucht.webp"); }
[data-saison="herbst"] .faq-bob { background-image: url("../img/bob/bob-herbst-sucht.webp"); }
[data-saison="halloween"] .faq-bob { background-image: url("../img/bob/bob-halloween-sucht-zaehne.webp"); }
[data-saison="weihnachten"] .faq-bob { background-image: url("../img/bob/bob-weihnachten-sucht.webp"); }
[data-saison="silvester"] .faq-bob { background-image: url("../img/bob/bob-silvester-sucht.webp"); }

.faq-suche input:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(114, 160, 69, .18); }
.faq-leer { margin: 10px 4px 0; color: #5d6c74; }

/* Symbole zeichnen sich (Heiko 14.10.2026): main.js setzt pathLength=1 und die Klasse, data-reveal schaltet „sichtbar" */
.icon svg.zeichnen :is(path, line, polyline, circle, rect, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5, 0, .2, 1) .25s; }
.sichtbar .icon svg.zeichnen :is(path, line, polyline, circle, rect, ellipse) { stroke-dashoffset: 0; }

/* Handy: schmaler fester Knopf unten, links neben dem WhatsApp-Knopf */
.handy-leiste { display: none; }
@media (max-width: 860px) {
  .handy-leiste { display: block; position: fixed; left: 12px; right: 84px; bottom: 18px; z-index: 79; opacity: 0; pointer-events: none;
    transform: translateY(20px); transition: opacity .25s, transform .25s; }
  .handy-leiste.zeigen { opacity: 1; pointer-events: auto; transform: none; }
  .handy-leiste .btn { width: 100%; justify-content: center; min-height: 56px; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
  .nach-oben { bottom: 86px; }
}

/* Feldfotos zoomen beim Scrollen ganz langsam hinein (nur Browser mit Scroll-Animationen, sonst unverändert) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vergleich img { animation: fahrt linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes fahrt { from { transform: scale(1); } to { transform: scale(1.09); } }