/* --------------------------------------------------------------------------
   BRÜCKE ZWISCHEN base.css UND site-kit.css
   Der Starter bringt sein eigenes Abstands- und Breitensystem mit
   (.section--pt-normal, .container--normal, --abstand-*). Es hat dieselbe
   Spezifität wie unsere Regeln und lädt danach — es würde also gewinnen und
   die Abstände der Originalseite verändern.

   Statt eines der beiden Systeme zu entfernen, werden die Variablen des
   Starters auf unsere Werte gelegt. Ergebnis: Die Panel-Optionen „kleiner /
   normaler / großer Abstand" bleiben benutzbar, und „normal" trifft genau
   das, was die statische Seite hatte.
   -------------------------------------------------------------------------- */
:root{
  --abstand-klein:  var(--space-12);   /* entspricht .section--tight */
  --abstand-normal: var(--space-16);   /* entspricht .section */
  --abstand-gross:  var(--space-24);
}
@media (min-width:768px){
  :root{
    --abstand-klein:  var(--space-16);
    --abstand-normal: var(--space-24);
    --abstand-gross:  var(--space-32);
  }
}

/* Der Starter setzt an jeder Section zusätzlich section--<blocktyp>. Bei uns
   heißen die Farbfelder anders (section--subtle, --warm, --brand-soft,
   --invert) und werden je Block als zusätzliche Klasse durchgegeben. Damit
   kein Blocktyp-Name versehentlich als Farbfeld gelesen wird, bleibt hier
   nichts zu tun — die Namensräume überschneiden sich nicht. */

/* --------------------------------------------------------------------------
   FARBFELDER DES PANELS AUF UNSERE PALETTE
   Der Einstellungs-Tab bietet „Hell / Dunkel / Primärfarbe / Akzentfarbe" und
   setzt daraus .section--bg-*. Die Starter-Regeln greifen auf --farbe-hell und
   Verwandte zu, die es hier nicht gibt — ohne diese Zuordnung wären die
   Farbfelder im Panel wirkungslos oder grau.
   Die Werte sind genau die, die die statische Seite als section--subtle,
   --warm, --brand-soft und --invert benutzt hat.
   -------------------------------------------------------------------------- */
.section--bg-hell{background:var(--color-bg-subtle);}
/* Primär- und Akzentfarbe sind bei uns helle Flächen. Der Starter setzt für
   beide `color:#fff`, weil seine Flächen kräftig sind. Ohne die Schriftfarbe
   hier erbten Überschriften das Weiß und standen fast unsichtbar auf dem
   hellen Grund, gefunden am 14. September 2026 in „Aktuell im Hofladen" und
   „Ein Familienbetrieb in vierter Generation". Eyebrow, Einleitung und Knöpfe
   fiel es nicht auf, weil sie eigene Farben mitbringen. */
.section--bg-primaer{background:var(--color-bg-brand-soft);color:var(--color-text);}
.section--bg-akzent{background:var(--color-bg-warm);color:var(--color-text);}
.section--bg-dunkel{
  background:var(--color-bg-invert);color:var(--color-text-invert);
}
.section--bg-dunkel .muted,
.section--bg-dunkel .lead{color:var(--color-text-invert-muted);}
.section--bg-dunkel .eyebrow{color:var(--color-text-invert-muted);}

/* --------------------------------------------------------------------------
   AUFMACHER
   Der Aufmacher bringt Höhe und Polsterung selbst mit. Die Abstands-Klassen
   des Starters (.section--pt-normal und Verwandte) haben dieselbe Spezifität
   und würden ihn auseinanderziehen. Zwei Klassen im Selektor genügen, um sie
   zu überstimmen — ohne !important.
   -------------------------------------------------------------------------- */
.page-hero--photo.section{padding-block:var(--space-16) var(--space-10);}
.hero.section{padding-block:0;}
/* Der Aufmacher setzt seinen Container selbst; der Rahmen von section-open
   darf ihn nicht zusätzlich begrenzen. */
.page-hero .section__inner,
.hero .section__inner{max-width:none;padding-inline:0;}

/* --------------------------------------------------------------------------
   VIDEO IM FOTO-HERO
   base.css formatiert nur `.page-hero__bg img`. Seit der Aufmacher auch auf
   halber Höhe ein Video tragen kann, braucht das Video dieselbe Regel —
   sonst steht es in seiner Rohgröße im Rahmen.
   -------------------------------------------------------------------------- */
.page-hero__bg video{width:100%;height:100%;object-fit:cover;display:block;}
/* Ohne Bewegung bleibt das Standbild stehen, wie beim großen Hero auch. */
@media (prefers-reduced-motion:reduce){ .page-hero__bg video{display:none;} }

/* --------------------------------------------------------------------------
   SICHERHEITSNETZ FÜR .reveal
   base.css blendet .reveal mit opacity:0 aus und verlässt sich darauf, dass
   JavaScript die Klasse is-visible nachträgt. Der Preis dafür ist hoch: Geht
   irgendwo im Skript etwas schief, ist der Inhalt nicht unanimiert, sondern
   unsichtbar. Genau das ist in dieser Installation zweimal passiert.

   Deshalb umgedreht: Sichtbar ist der Grundzustand. Ausgeblendet wird nur,
   wenn das Skript nachweislich läuft — es setzt dafür die Klasse „js" an
   <html>, bevor irgendetwas anderes passiert.

   Ohne JavaScript, bei einem Skriptfehler oder wenn der Browser die Datei
   blockiert, steht der Inhalt einfach da. Das ist der richtige Ausfallweg
   für eine Kundenwebsite.
   -------------------------------------------------------------------------- */
.reveal{opacity:1;transform:none;}
html.js .reveal:not(.is-visible){opacity:0;transform:translateY(18px);}
html.js .reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   LOGOLEISTE
   Der einzige Block, für den es in der statischen Seite kein Vorbild gibt —
   der Prototyp hatte keine Partnerlogos. Deshalb hier gebaut, mit denselben
   Abständen und Farben wie der Rest.
   -------------------------------------------------------------------------- */
.logoleiste{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-10) var(--space-16);
}
.logoleiste img{max-height:52px;width:auto;}
.logoleiste--grau img{
  filter:grayscale(1);opacity:.65;
  transition:filter var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}
.logoleiste--grau li:hover img{filter:none;opacity:1;}

/* --------------------------------------------------------------------------
   COOKIE-HINWEIS ALS LEISTE
   Der Starter setzt ihn als Kasten unten rechts. Auf einem 1280x720-Bildschirm
   deckte der genau die rechte Mitte des Aufmachers ab — dort sitzt der Stoerer.
   Als flache Leiste am unteren Rand bleibt der Aufmacher frei; verdeckt wird
   nur ein Streifen, und der auch nur bis zum ersten Klick.
   -------------------------------------------------------------------------- */
.consent--bar{inset-inline:0;bottom:0;max-width:none;}
.consent--bar .consent__inner{
  max-width:var(--container);margin-inline:auto;
  border-radius:0;
  padding:var(--space-5) var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);
  box-shadow:0 -6px 30px rgba(6,38,23,.16);
}
.consent--bar .consent__titel{font-size:var(--fs-16);margin:0;flex:0 0 auto;}
.consent--bar .consent__text{flex:1 1 22rem;font-size:var(--fs-14);color:var(--color-text-secondary);}
.consent--bar .consent__text p{margin:0;}
.consent--bar .consent__buttons{margin-top:0;flex:0 0 auto;}
.consent--bar .consent__kategorien{flex:1 1 100%;}
.consent--bar .consent__links{flex:1 1 100%;margin:0;font-size:var(--fs-13);}
/* Die Knoepfe des Starters tragen eigene Klassen — auf unsere Knopfform legen. */
.consent .btn--primaer{background:var(--color-accent);color:var(--white);}
.consent .btn--sekundaer{background:var(--color-bg-subtle);color:var(--color-text);border:1px solid var(--color-border);}
.consent .btn--text{background:transparent;color:var(--color-text-muted);border:0;text-decoration:underline;}
@media (max-width:759px){
  .consent--bar .consent__inner{padding:var(--space-4) var(--gutter);}
  .consent--bar .consent__buttons{flex:1 1 100%;}
}

/* --------------------------------------------------------------------------
   FLIESSTEXT AUS DEM WRITER-FELD (.prose)
   Impressum, Datenschutz und Produktbeschreibungen kommen als HTML aus dem
   Panel. Gestaltet war die Klasse bis zum 14. September 2026 nicht, die
   Rechtstexte liefen ohne Abstände und in zu kleiner Schrift zusammen.
   -------------------------------------------------------------------------- */
.prose{font-size:var(--fs-16);line-height:1.7;color:var(--color-text-secondary);}
.prose > * + *{margin-top:var(--space-4);}
.prose h2{
  margin-top:var(--space-12);font-size:var(--fs-24);line-height:1.3;
  font-weight:600;letter-spacing:-.012em;color:var(--color-text);
}
.prose h3{margin-top:var(--space-8);font-size:var(--fs-18);line-height:1.35;font-weight:600;color:var(--color-text);}
.prose h2 + *,.prose h3 + *{margin-top:var(--space-3);}
.prose > :first-child{margin-top:0;}
.prose strong{color:var(--color-text);font-weight:600;}
.prose a{color:var(--color-brand);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;}
.prose ul,.prose ol{padding-left:var(--space-6);}
.prose ul{list-style:disc;}
.prose ol{list-style:decimal;}
.prose li + li{margin-top:var(--space-2);}
.prose li > p{margin:0;}
/* Die Seitenüberschrift der Rechtstexte bekommt Abstand zum ersten Abschnitt. */
.section .container--schmal > h1{margin-bottom:var(--space-8);font-size:var(--fs-36);line-height:1.2;font-weight:600;letter-spacing:-.015em;}

/* --------------------------------------------------------------------------
   FEHLERSEITE 404 MIT GANS → templates/error.php, assets/js/gans.js
   Große Zahl im Logo-Grün, Text, Knopf. Die Gans läuft auf einer eigenen
   Ebene über die ganze Fläche der Seite.
   -------------------------------------------------------------------------- */
:root{
  --logo-orangerot:#D04C3B;   /* Orangerot aus dem Logo von 2023, für Schnabel und Füße */
}
/* Die Seite füllt mindestens das Fenster, damit die Gans Platz hat. */
.fehler404{
  position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:calc(100svh - var(--header-height));
}
.fehler404__inhalt{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center;}
/* Kein background-clip:text: Der schneidet die Glyphe an der Kante ihres
   Kastens ab, bei Kanit mit enger Laufweite fehlte der letzten 4 ein Rand. */
.fehler404__zahl{
  margin:0;padding-inline:.04em;font-size:clamp(6.5rem,4rem + 12vw,13rem);line-height:.9;font-weight:700;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--green-700);
}
.fehler404__titel{max-width:32ch;margin:0;text-wrap:balance;}
.fehler404__text{max-width:52ch;margin:0 0 var(--space-3);color:var(--color-text-secondary);}

.fehler404__buehne{position:absolute;inset:0;z-index:var(--z-raised);pointer-events:none;}
/* Die Gans pickt ab und zu gegen den Knopf. Jeder Treffer schubst ihn kurz
   von ihr weg, --stoss gibt die Richtung (1 nach rechts, -1 nach links). */
.fehler404 .btn.ist-angepickt{animation:knopf-gepickt .3s cubic-bezier(.3,.7,.4,1);}
@keyframes knopf-gepickt{
  0%{transform:none;}
  30%{transform:translateX(calc(var(--stoss,1) * 4px)) rotate(calc(var(--stoss,1) * 1.5deg));}
  65%{transform:translateX(calc(var(--stoss,1) * -1.5px));}
  100%{transform:none;}
}

/* Ohne JavaScript steht die Gans unten rechts. Mit JavaScript (.ist-aktiv)
   setzt assets/js/gans.js Position, Größe und jede Gelenkstellung Bild für
   Bild, deshalb gibt es hier keine Keyframes. */
.gans{position:absolute;right:6%;bottom:var(--space-4);width:clamp(120px,13vw,170px);transform-origin:50% 100%;}
.fehler404__buehne.ist-aktiv .gans{left:0;top:0;right:auto;bottom:auto;will-change:transform;}
.gans__svg{display:block;width:100%;height:auto;overflow:visible;}

.gans__fell{fill:var(--white);stroke:var(--color-text);stroke-width:2.4;stroke-linejoin:round;}
.gans__fell--flaeche{stroke:none;}
.gans__kontur{fill:none;stroke:var(--color-text);stroke-width:2.4;stroke-linecap:round;}
.gans__bauch{fill:var(--sand-300);opacity:.45;}
.gans__fluegel-flaeche{fill:var(--white);stroke:var(--color-text);stroke-width:2.2;stroke-linejoin:round;}
.gans__feder{fill:none;stroke:var(--sand-300);stroke-width:2.2;stroke-linecap:round;}
.gans__feder--kante{stroke:var(--color-text);stroke-width:1.6;opacity:.35;}
.gans__schnabel{fill:var(--logo-orangerot);stroke:var(--color-text);stroke-width:2;stroke-linejoin:round;}
.gans__detail{fill:none;stroke:var(--color-text);stroke-width:1.6;stroke-linecap:round;opacity:.7;}
.gans__pupille{fill:var(--color-text);}
.gans__glanz{fill:var(--white);}
.gans__lauf{fill:none;stroke:var(--logo-orangerot);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;}
.gans__fuss{fill:var(--logo-orangerot);stroke:var(--color-text);stroke-width:1.6;stroke-linejoin:round;}
/* Das Bein auf der abgewandten Seite liegt im Schatten, das gibt Tiefe. */
.gans__bein--hinten .gans__lauf{stroke:color-mix(in srgb,var(--logo-orangerot) 78%,#000);}
.gans__bein--hinten .gans__fuss{fill:color-mix(in srgb,var(--logo-orangerot) 78%,#000);}
.gans__schatten{fill:var(--color-text);opacity:.12;}