/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1786620826
Updated: 2026-08-13 11:33:46

*/

/* ============================================================
   Koeckerling - eigene Ergaenzungen
   Alles, was Elementor nicht dauerhaft speichern kann, gehoert hierher.
   Elementors Custom-CSS-Feld verwirft Eingaben beim Neuladen.
   ============================================================ */

/* --- Bewegung zuruecknehmen, wenn das Betriebssystem es verlangt ---
   Elementors Einblend-Animationen und Motion Effects fragen
   prefers-reduced-motion nicht von sich aus ab. Ohne diesen Block
   bleiben Inhalte bei reduzierter Bewegung sogar unsichtbar,
   weil .elementor-invisible nie zurueckgesetzt wird. */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .animated {
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Leserhythmus im uebernommenen Fliesstext ---
   Die Inhaltsseiten kommen aus dem WXR-Import und bringen nur
   Ueberschriften, Absaetze und Listen mit. Elementor gestaltet
   davon nichts. Diese Regeln geben ihnen Luft. */
.elementor-widget-theme-post-content h2 {
  margin: 2.2em 0 .5em;
  line-height: 1.25;
}
.elementor-widget-theme-post-content h2:first-child { margin-top: 0; }
.elementor-widget-theme-post-content h3 {
  margin: 1.8em 0 .4em;
  line-height: 1.3;
}
.elementor-widget-theme-post-content p {
  margin: 0 0 1.15em;
  line-height: 1.72;
  max-width: 68ch;          /* lesbare Zeilenlaenge */
}
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.3em;
  line-height: 1.72;
  max-width: 68ch;
}
.elementor-widget-theme-post-content li { margin-bottom: .4em; }

/* Redaktionshinweise sichtbar als solche kennzeichnen,
   damit bei der Abnahme niemand Platzhalter fuer fertigen Text haelt. */
.elementor-widget-theme-post-content em:only-child,
.elementor-widget-theme-post-content p > em:only-child {
  display: block;
  background: #FDF0D8;
  border-left: 3px solid #F6A606;
  color: #854F0B;
  padding: 14px 18px;
  border-radius: 4px;
  font-style: italic;
}

/* Artikeltabellen aus dem Sortiment lesbar halten */
.elementor-widget-theme-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: .95em;
}
.elementor-widget-theme-post-content th,
.elementor-widget-theme-post-content td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #EBF1EF;
}
.elementor-widget-theme-post-content th {
  background: #E0EFEC;
  font-weight: 700;
}
.elementor-widget-theme-post-content tbody tr:hover { background: #F6F9F8; }

/* Auf schmalen Geraeten darf die Tabelle scrollen statt zu brechen */
@media (max-width: 640px) {
  .elementor-widget-theme-post-content table { display: block; overflow-x: auto; }
}

/* --- Sicherheitsnetz: Inhalt darf nie unsichtbar bleiben ---
   Elementor setzt vor einer Einblend-Animation .elementor-invisible
   (visibility:hidden) und nimmt die Klasse per JavaScript wieder weg.
   Loest die Mechanik nicht aus — weil ein Skript fehlt, der Cache eine
   alte Seite liefert oder JavaScript blockiert ist —, bleibt der Inhalt
   dauerhaft verborgen. Das ist auf einer Firmenseite inakzeptabel.
   Sichtbarkeit ist deshalb nicht verhandelbar; die Animation selbst
   laeuft weiter, sobald Elementor sie ausloest. */
.elementor-invisible {
  visibility: visible !important;
}

/* ============================================================
   Gemuese-Linienskizzen
   Das CD verlangt "Obst-/Gemuese-Skizzen im Logo-Linienstil" als
   Bildsprache. Sie liegen als Inline-SVG in HTML-Widgets, damit
   sich die Linien selbst zeichnen koennen — als Hintergrundbild
   ginge das nicht.
   ============================================================ */

/* Das direkte Elternelement wird zur Buehne.
   Bewusst mit Nachfahren-Selektor statt Kind-Selektor: Elementor 4
   rendert Widgets OHNE die frueher uebliche .elementor-widget-container-
   Ebene, aeltere Fassungen mit. Beides muss greifen. */
/* NUR HTML-Widgets. Ohne diese Einschraenkung trifft die Regel auch den
   Inhalts-Container der Seitenvorlage, sobald eine Skizze IM SEITENINHALT
   steht — der wird dann absolut positioniert und faellt mit fester Hoehe
   aus dem Layout (gemessen: 128 px statt 3094 px). */
:has(> .elementor-widget-html > .kf-skizze) {
  position: relative;
  overflow: hidden;
}
.elementor-widget-html:has(> .kf-skizze) {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;   /* nie ueber Text oder Buttons liegen */
  z-index: 0;
}
:has(> .elementor-widget-html > .kf-skizze) > .elementor-widget:not(.elementor-widget-html),
:has(> .elementor-widget-html > .kf-skizze) > .e-con {
  position: relative;
  z-index: 1;             /* Inhalt bleibt vorn */
}

.kf-skizze {
  position: absolute;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .13;           /* Textur, nicht Motiv */
  overflow: visible;
}
.kf-skizze--klein  { opacity: .10; }

/* Die Linien zeichnen sich einmal selbst. Laenge wird per
   pathLength=1 normiert, dann genuegt eine Zahl fuer alle Pfade. */
.kf-skizze path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: kf-malen 2.6s ease forwards;
}
.kf-skizze path:nth-child(2){ animation-delay:.25s }
.kf-skizze path:nth-child(3){ animation-delay:.5s }
.kf-skizze path:nth-child(4){ animation-delay:.75s }
.kf-skizze path:nth-child(5){ animation-delay:1s }
@keyframes kf-malen { to { stroke-dashoffset: 0 } }

@media (prefers-reduced-motion: reduce) {
  .kf-skizze path { animation: none; stroke-dashoffset: 0 }
}

/* Auf dem Handy bleiben sie sichtbar, aber kleiner und leiser.
   Ganz ausblenden nimmt der Seite genau den Charakter, der sie
   unverwechselbar macht. */
@media (max-width: 767px) {
  .kf-skizze { width:190px !important; height:190px !important; opacity:.11; }
  .kf-skizze--klein { width:150px !important; height:150px !important; }
  .kf-skizze--dunkel { opacity:.06; }
}

/* --- Skizzen auf hellen Flaechen --- */
.kf-skizze--dunkel { stroke:#134C41; opacity:.07; }
.kf-skizze--mango  { stroke:#F6A606; opacity:.18; }

/* --- Kundengruppen-Karten heben sich beim Ueberfahren an --- */
@media (hover: hover) {
  .e-con.e-child:has(> .elementor-widget-heading + .elementor-widget-text-editor) {
    transition: transform .28s ease, box-shadow .28s ease;
  }
  .e-con.e-child:has(> .elementor-widget-heading + .elementor-widget-text-editor):hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(19,76,65,.16);
  }
}

/* --- Pfeil in den Links wandert beim Ueberfahren --- */
.elementor-widget-button .elementor-button-text { display:inline-block; transition: transform .2s ease; }
@media (hover: hover) {
  .elementor-widget-button a:hover .elementor-button-text { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .e-con.e-child:hover { transform: none !important; }
  .elementor-widget-button a:hover .elementor-button-text { transform: none !important; }
}

/* ============================================================
   Wechselndes Hero-Bild
   Das Motiv dreht sich herein, wie ein Teller, der aufgesetzt
   wird. Vorbild: pahmeyer.com. Kein Video, keine Bibliothek —
   vier Fotos, die einander abloesen.
   ============================================================ */
/* Das Widget muss die Spaltenbreite annehmen. Sonst schrumpft es in der
   zentrierten Flex-Spalte auf Inhaltsbreite — und width:100% am Wechsler
   bezieht sich dann auf null, das Bild verschwindet. */
.elementor-widget:has(.kf-wechsel) { width:100%; align-self:stretch; }

.kf-wechsel { position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin-inline:auto; }
/* .elementor img aus Elementors frontend.css setzt border-radius:0 bei
   gleicher Spezifitaet und laedt spaeter — deshalb hier eine Stufe hoeher. */
.elementor .kf-wechsel img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
  opacity:0; transform:rotate(-14deg) scale(.94);
  transition:opacity .9s ease, transform 1.1s cubic-bezier(.22,.9,.28,1);
  will-change:opacity, transform;
}
.elementor .kf-wechsel img.kf-aktiv { opacity:1; transform:rotate(0deg) scale(1); }

.kf-wechsel__punkte {
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  display:flex; gap:8px;
}
.kf-wechsel__punkte button {
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.35); cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.kf-wechsel__punkte button[aria-current="true"] { background:#F6A606; transform:scale(1.35); }
.kf-wechsel__punkte button:focus-visible { outline:2px solid #fff; outline-offset:3px; }

@media (prefers-reduced-motion: reduce) {
  .elementor .kf-wechsel img { transition:opacity .3s ease; transform:none !important; }
}

/* --- Kopfzeile darf nicht umbrechen ---
   Seit der Job-Link ueber dem Werksverkauf-Knopf steht, braucht die
   rechte Seite mehr Platz und drueckt die Navigation zusammen. Ohne
   diese Regeln fallen die Menuepunkte auf zwei Zeilen. */
.elementor-location-header .elementor-widget-nav-menu { flex: 0 0 auto; }
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {
  flex-wrap: nowrap;
}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a {
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a {
    padding-inline: 8px;
  }
}

/* --- Kopfzeile auf dem Handy ---
   Ohne diese Regeln staffeln sich Logo, Menue und Knopfstapel
   untereinander: 331 px Kopf auf einem 812 px hohen Bildschirm.
   Alles kommt in eine Reihe, der Job-Link entfaellt hier — er steckt
   ohnehin im Menue unter Karriere. */
@media (max-width: 767px){
  .elementor-location-header .e-con-inner{
    flex-direction:row !important; flex-wrap:nowrap;
    align-items:center; gap:10px;
  }
  .elementor-location-header .elementor-widget-image{ flex:0 0 auto; }
  .elementor-location-header .elementor-widget-image img{ width:132px !important; height:auto; }
  /* flex-basis 0 statt auto: sonst behaelt der Block seine volle
     Breite von 327 px, passt neben das Logo nicht mehr und bricht um. */
  .elementor-location-header .e-con-inner > .e-con{
    flex:1 1 0 !important; min-width:0; width:auto !important;
    flex-direction:row !important;
    justify-content:flex-end; align-items:center; gap:10px;
  }
  .elementor-location-header .e-con-inner > .e-con > .e-con{
    flex-direction:row !important; align-items:center; width:auto;
  }
  .elementor-location-header .e-con-inner > .e-con > .e-con > .elementor-widget-button:first-child{
    display:none;
  }
  .elementor-location-header .elementor-widget-button .elementor-button{
    padding-block:9px; padding-inline:14px; font-size:13px;
  }
}

/* --- Kopf endgueltig einzeilig auf dem Handy ---
   Der aeussere Container stand auf flex-wrap:wrap, dadurch rutschten
   Logo und Bedienelemente trotz Reihen-Ausrichtung untereinander. */
@media (max-width: 767px){
  .elementor-location-header .e-con-inner{
    flex-wrap:nowrap !important;
    padding-block:10px;
  }
  .elementor-location-header .e-con-inner > .e-con,
  .elementor-location-header .e-con-inner > .e-con > .e-con{
    flex-wrap:nowrap !important;
  }
  .elementor-location-header .elementor-widget-image img{ width:112px !important; }
  .elementor-location-header .elementor-widget-button .elementor-button{
    padding-block:8px; padding-inline:12px; font-size:12.5px; white-space:nowrap;
  }
  .elementor-location-header .elementor-menu-toggle{ margin:0; }
}

/* --- Rand und Badge auf dem Handy ---
   Der Werksverkauf-Knopf stiess bisher genau an die Bildschirmkante,
   das liest sich wie abgeschnitten. Und die Badge-Pille brach auf
   zwei Zeilen um — eine Pille mit voller Rundung sieht zweizeilig
   kaputt aus. */
@media (max-width: 767px){
  .elementor-location-header .e-con-inner{ padding-inline:14px; }
  .elementor-location-header .elementor-widget-button .elementor-button{
    padding-block:8px; padding-inline:13px; font-size:12px;
  }

  /* Badge im Hero: eine Zeile statt zwei */
  .elementor-location-single .elementor-widget-button:first-child .elementor-button,
  .elementor-widget-button .elementor-button-text{ line-height:1.35; }
  [class*="elementor-element"] .elementor-button[href=""],
  .kf-badge .elementor-button{ white-space:nowrap; }
}

/* --- Seitenrand der Kopfzeile erzwingen ---
   Elementor setzt die Container-Polsterung ueber eine eigene Regel mit
   hoeherer Spezifitaet; ohne !important klebt der Knopf am Displayrand. */
@media (max-width: 767px){
  .elementor-location-header > .e-con,
  .elementor-location-header > .e-con > .e-con-inner{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* ============================================================
   SORTIMENT — Warengruppenseiten
   Muster, angelegt am 13.08.2026 an /sortiment/salatmischungen/.
   Gilt fuer alle zwoelf Gruppen — die Seiten brauchen nur die Klassen.
   Palette streng aus dem CD: Petrol-Rampe + genau EIN Akzent (Mango),
   keine Verlaeufe.
   ============================================================ */

.kf-sort-lead{ font-size:clamp(1.12rem,.6rem + .85vw,1.3rem); line-height:1.62;
  color:#0A2E28; margin-bottom:2.2rem; }

/* Drei Merkmale */
.kf-sort-merkmale{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px; margin:0 0 2.8rem; }
.kf-sort-merkmal{ background:#E0EFEC; border-radius:18px; padding:22px 22px 24px; }
.kf-sort-merkmal em{ display:block; font-style:normal; font-size:.76rem; letter-spacing:.09em;
  text-transform:uppercase; color:#237A6D; margin-bottom:.4rem; }
.kf-sort-merkmal b{ display:block; font-size:1.4rem; line-height:1.2; color:#134C41;
  margin-bottom:.5rem; }
.kf-sort-merkmal span{ display:block; font-size:.95rem; line-height:1.55; color:#0A2E28; }

/* Aus der 860-px-Lesebreite der Seitenvorlage ausbrechen */
.kf-sort-breit{ width:min(1180px,92vw); margin-left:50%; transform:translateX(-50%); }

/* Belegbild mit Bildunterschrift */
.kf-sort-beleg{ margin-top:0; margin-bottom:3rem; }  /* NICHT die Kurzform margin: —
   die setzt das margin-left:50% aus .kf-sort-breit zurueck, und translateX(-50%)
   schiebt die Figur dann aus dem Fenster (gemessen: left -220px). */
.elementor .kf-sort-beleg img{ width:100%; display:block; border-radius:22px;
  aspect-ratio:5/2; object-fit:cover; height:auto; }
.kf-sort-beleg figcaption{ margin-top:.75rem; font-size:.9rem; line-height:1.55;
  color:#237A6D; max-width:64ch; font-style:normal; }

/* Bildraster der Mischungen */
.kf-sort-raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:26px; margin:1.8rem 0 0; }
/* overflow:hidden rundet das Bild mit — umgeht .elementor img{border-radius:0},
   das bei gleicher Spezifitaet spaeter laedt und sonst gewinnt. */
.kf-sort-karte{ margin:0; background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 1px 2px rgba(10,46,40,.05), 0 10px 24px rgba(10,46,40,.07),
             0 30px 60px rgba(10,46,40,.06);
  transition:transform .4s cubic-bezier(.19,.86,.24,1), box-shadow .4s ease; }
.elementor .kf-sort-karte img{ display:block; width:100%; aspect-ratio:4/3;
  object-fit:cover; transition:transform .7s cubic-bezier(.19,.86,.24,1); }
.kf-sort-karte figcaption{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:17px 20px 19px; font-style:normal; }  /* Theme setzt figcaption
     kursiv — bei Produktnamen falsch. */
.kf-sort-name{ font-weight:500; font-size:1.05rem; color:#134C41; line-height:1.3;
  letter-spacing:.005em; }
.kf-sort-nr{ font-size:.72rem; color:#237A6D; font-variant-numeric:tabular-nums;
  white-space:nowrap; background:#E0EFEC; padding:3px 9px; border-radius:999px; }
@media (hover:hover){
  .kf-sort-karte:hover{ transform:translateY(-7px);
    box-shadow:0 2px 4px rgba(10,46,40,.07), 0 18px 36px rgba(10,46,40,.12),
               0 44px 80px rgba(10,46,40,.10); }
  .kf-sort-karte:hover img{ transform:scale(1.06); }
}

/* Abschlussband: Petrol-Buehne, genau ein Akzent (Mango-CTA) */
/* Lag mit 860 px in der Lesebreite, waehrend die Buehne darueber 1180 px
   breit ist — die beiden fluchteten nicht, das Band wirkte aufgesetzt.
   Jetzt gleiche Breite. Der innere Bogen ist raus: die Bogenkante ist das
   Motiv der SEITE, in einer Flaeche wiederholt wird sie zu Laerm. */
.kf-sort-abschluss{ background:#134C41; border-radius:26px;
  padding:46px 48px 50px;
  width:min(1180px,92vw); margin-left:50%; margin-top:2.8rem; margin-bottom:0;
  transform:translateX(-50%);
  position:relative; overflow:hidden; }
/* Gespiegelte Bogenkante: oben in der Seitenvorlage woelbt sich Weiss nach OBEN in
   das Petrol-Band, hier woelbt es sich nach UNTEN hinein. Gleiches Motiv, andere
   Richtung — die Seite schliesst mit der Form, mit der sie beginnt. */

.kf-sort-abschluss h2{ color:#fff; margin-top:0; }
.kf-sort-abschluss p{ color:rgba(255,255,255,.86); }
.kf-sort-knopf{ display:inline-block; background:#F6A606; color:#412402;
  padding:13px 26px; border-radius:999px; font-weight:500; text-decoration:none;
  transition:transform .25s ease, filter .25s ease; }
.kf-sort-knopf:hover,.kf-sort-knopf:focus{ filter:brightness(1.06);
  transform:translateY(-2px); color:#412402; }
.kf-sort-link{ display:inline-block; margin-left:18px; color:#8AC7BC; text-decoration:none; }
.kf-sort-link:hover,.kf-sort-link:focus{ color:#fff; }

@media (max-width:640px){
  .kf-sort-breit{ width:100%; margin-left:0; transform:none; }
  .kf-sort-abschluss{ padding:30px 22px 34px; width:100%; margin-left:0;
    transform:none; border-radius:20px; }
  .kf-sort-link{ margin-left:0; display:block; margin-top:14px; }
}

@media (prefers-reduced-motion:reduce){
  .kf-sort-karte, .elementor .kf-sort-karte img, .kf-sort-knopf{ transition:none !important; }
  .kf-sort-karte:hover, .elementor .kf-sort-karte:hover img,
  .kf-sort-knopf:hover{ transform:none !important; }
}

/* ------------------------------------------------------------
   Kopf: Werksverkauf-Knopf lief auf dem Handy aus dem Fenster
   Gemessen am 13.08.2026 bei 375 px: Seitenbreite 432 statt 375.
   Ursache: der Knopf-Container durfte schrumpfen (auf 33 px), der
   Knopf braucht aber 121 px und trat aus seinem eigenen Rahmen.
   Platz ist da (rechter Block 167 px) — er war nur falsch verteilt.
   Betraf JEDE Seite, nicht nur das Sortiment.   kf-kopf-knopf-ueberlauf
   ------------------------------------------------------------ */
@media (max-width: 767px){
  .elementor-location-header .elementor-element-8a6f57b{ flex:0 0 auto !important; }
  .elementor-location-header .elementor-button.elementor-size-sm{
    padding-left:14px; padding-right:14px; white-space:nowrap; }
}

/* ------------------------------------------------------------
   Bogenkante bis an den Rand   kf-bogen-randlos
   Elementors Shape-Divider haengt in .e-con-inner. Der ist gedeckelt
   (max-width 1240) und hat overflow:hidden — der Bogen kam deshalb bei
   KEINER Breite an den Rand: gemessen 180 px Fehlbetrag je Seite bei
   1600 px, 24 px bei 390 px. Sichtbar als gruene Zwickel in den Ecken.
   Loesung: Bogen auf den AEUSSEREN Container zeichnen (volle Breite,
   overflow sichtbar), Originalform ausblenden.
   ------------------------------------------------------------ */
.e-con:has(> .e-con-inner > .elementor-shape-bottom){
  position:relative;
  /* Luft, damit die steigende Kante die Brotkrume nicht anschneidet:
     die Kurve ist links am tiefsten, und dort steht die Krume. */
  padding-bottom:clamp(10px, 2.2vw, 46px);
}
.e-con > .e-con-inner > .elementor-shape-bottom{ display:none; }
.e-con:has(> .e-con-inner > .elementor-shape-bottom)::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(52px, 6vw, 104px);
  /* 17.08.2026: Die symmetrische Kuppel (Variante 2) ist ersetzt durch die
     GESPIEGELTE Agenturkurve aus der Preisblatt-Fusszone. Damit tragen
     Kopf und Fuss dieselbe Form, das Motiv kommt wieder.
     Der fruehere Einwand gegen eine aufsteigende Kurve galt einer FREI
     ERFUNDENEN Form, die manss-foodservice zu aehnlich war. Diese hier
     stammt aus der eigenen Agenturvorlage, ausgelesen aus dem PDF.
     Vorgaengerpfad, falls zurueckgedreht werden soll:
     M0,100C140,44 320,6 500,6C680,6 860,44 1000,100Z auf viewBox 0 0 1000 100 */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20560.089844%20595.276%20281.800156'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate(595.276,1401.979688)%20scale(-1,-1)'%3E%3Cpath%20d='M%20933.34375%20349.070312%20C%20934.605469%20323.71875%20932.804688%20298.515625%20928.335938%20272.8125%20C%20911.808594%20177.769531%20843.738281%2088.738281%20765.824219%2036.039062%20C%20699.238281%20-8.984375%20647.699219%20-21.121094%20574.222656%20-44.582031%20C%20544.257812%20-54.148438%20513.285156%20-61.0625%20483.429688%20-70.730469%20C%20385%20-102.582031%20287.375%20-146.84375%20184.089844%20-158.257812%20C%20147.445312%20-162.300781%20111.351562%20-164.257812%2074.605469%20-160.613281%20C%2042.222656%20-157.398438%20-2.730469%20-145.585938%20-33.304688%20-133.539062%20C%20-38.789062%20-131.382812%20-43.617188%20-127.394531%20-45.835938%20-126.429688%20C%20-64.71875%20-118.210938%20-81.214844%20-110.425781%20-98.921875%20-99.71875%20C%20-110.855469%20-92.5%20-122.410156%20-85.160156%20-133.558594%20-76.714844%20C%20-169.511719%20-49.53125%20-193.601562%20-23.0625%20-220.238281%2013.214844%20C%20-232.15625%2029.445312%20-237.839844%2037.222656%20-248.199219%2055.09375%20C%20-273.703125%2099.054688%20-288.046875%20126.066406%20-306.890625%20194.320312%20C%20-325.730469%20262.582031%20-318.566406%20387.484375%20-295.867188%20462.175781%20C%20-273.171875%20536.882812%20-183.316406%20669.984375%20-81.960938%20721.601562%20C%20-37.089844%20744.457031%2014.976562%20760.695312%2065.007812%20766%20C%20198.488281%20780.164062%20318.632812%20730.652344%20446.425781%20703.101562%20C%20553.460938%20680.027344%20659.910156%20676.5%20757.316406%20619.6875%20C%20777.121094%20608.132812%20794.976562%20595.574219%20812.539062%20580.710938%20C%20838.878906%20558.433594%20857.195312%20538.347656%20876.960938%20509.757812%20C%20889.832031%20491.132812%20901.691406%20472.234375%20910.324219%20451.148438%20C%20917.984375%20432.445312%20924.957031%20410.136719%20928.578125%20390.253906%20C%20931.097656%20376.429688%20932.664062%20362.726562%20933.34375%20349.070312'%20fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 100%;
  background-repeat:no-repeat;
  pointer-events:none;
}

/* ------------------------------------------------------------
   Sortiment-Showcase: die Produkte bekommen eine Buehne
   ------------------------------------------------------------ */
.kf-sort-buehne{ background:#E0EFEC; border-radius:28px;
  padding:46px 40px 52px; margin:2.6rem 0 2.2rem; }
.kf-sort-buehne > h2{ margin-top:0; }
.kf-sort-buehne > p{ max-width:62ch; }
@media (max-width:640px){ .kf-sort-buehne{ padding:30px 20px 34px; border-radius:20px; } }

/* ------------------------------------------------------------
   Logo mit mehr Kraft — 10 Prozent groesser (MW, 13.08.)
   Groessen kommen aus Elementors Widget-Einstellungen, daher !important.
   ------------------------------------------------------------ */
/* Der Logo-Container durfte schrumpfen (flex:0 1 auto) und wurde vom
   Layout auf 151 px gedrueckt; max-width:100% kappte das Bild dann mit.
   Erst flex-shrink:0 laesst die 177 px wirklich stehen. */
.elementor-location-header .kf-logo{ flex:0 0 auto !important; }
.elementor-location-header .kf-logo img{ width:177px !important; max-width:none !important;
  height:auto !important; }
@media (max-width:767px){
  .elementor-location-header .kf-logo img{ width:123px !important; }
}

/* ------------------------------------------------------------
   Freisteller-Block: Produkt gross, Text daneben   kf-frei
   Vorbild aus dem Wettbewerb (MW). WICHTIG: --weiss nur bei Fotos,
   die wirklich auf weissem Grund liegen (gemessen: Sticks-Serie bei
   249-255). Die Salat-Serie liegt auf 218er Grau - dort wuerde
   multiply die ganze Flaeche eintrueben, daher ohne die Klasse.
   ------------------------------------------------------------ */
.kf-frei{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,60px); align-items:center; margin:3.2rem 0; }
.kf-frei__bild{ margin:0; }
.elementor .kf-frei__bild img{ width:100%; height:auto; display:block; border-radius:22px; }
/* Studioweiss verschmilzt mit der Seite — der Freisteller-Eindruck ohne
   Bildbearbeitung. Nur fuer Aufnahmen auf echtem Weiss. */
.elementor .kf-frei--weiss .kf-frei__bild img{ mix-blend-mode:multiply;
  border-radius:0; }
.kf-frei__text h2{ margin-top:0; }
.kf-frei__text p:last-child{ margin-bottom:0; }
.kf-frei--gedreht .kf-frei__bild{ order:2; }
@media (max-width:720px){
  .kf-frei{ grid-template-columns:1fr; gap:22px; }
  .kf-frei--gedreht .kf-frei__bild{ order:0; }
}

/* ------------------------------------------------------------
   Skizzen auch in den Sortiment-Baenken (mehr Varianz, MW)
   ------------------------------------------------------------ */
.kf-sort-buehne{ position:relative; overflow:hidden; }
.kf-sort-abschluss > .kf-skizze, .kf-sort-buehne > .kf-skizze{ z-index:0; }
.kf-sort-abschluss > *:not(.kf-skizze),
.kf-sort-buehne > *:not(.kf-skizze){ position:relative; z-index:1; }
/* dunkle Variante fuer helle Flaechen */
.kf-skizze--dunkel{ stroke:#134C41; opacity:.10; }

/* ------------------------------------------------------------
   Platzhalter im Raster, wo noch keine Fotos vorliegen.
   Bewusst als LEERSTELLE erkennbar — kein Symbolbild, das echte
   Ware vortaeuscht. Namen und Artikel stimmen bereits.
   ------------------------------------------------------------ */
.kf-sort-karte--platzhalter{ box-shadow:none; border:1px dashed #8AC7BC; background:#F4FAF8; }
.kf-sort-platz{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.kf-sort-platz span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:#237A6D; opacity:.75; }
.kf-sort-karte--platzhalter:hover{ transform:none; box-shadow:none; }
.kf-sort-hinweis{ background:#FDF0D8; border-radius:12px; padding:12px 16px;
  font-size:.92rem; color:#412402; margin:0 0 1.4rem; }

/* ------------------------------------------------------------
   Warengruppen-Karten (Sortiment-Uebersicht, Fuer Profis)
   Verlinkte Variante der Sortimentskarte — ganze Kachel klickbar.
   ------------------------------------------------------------ */
.kf-gruppen{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:26px; margin:1.8rem 0 0; }
/* .elementor a setzt box-shadow:none und gewinnt gegen eine reine Klasse
   (Klasse+Element schlaegt Klasse). Deshalb .elementor davor — dieselbe
   Falle wie bei .elementor img{border-radius:0}. */
.elementor .kf-gruppe{ display:block; text-decoration:none; background:#fff; border-radius:22px;
  overflow:hidden; box-shadow:0 1px 2px rgba(10,46,40,.05), 0 10px 24px rgba(10,46,40,.07),
  0 30px 60px rgba(10,46,40,.06);
  transition:transform .4s cubic-bezier(.19,.86,.24,1), box-shadow .4s ease; }
.elementor .kf-gruppe img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .7s cubic-bezier(.19,.86,.24,1); }
/* MUSS display:block sein. Als <span> blieb er inline, seine Polsterung
   zaehlte nicht zur Kartenhoehe — die Karte war 337 px, der Inhalt brauchte
   367, und overflow:hidden schnitt den Rest ab. */
.kf-gruppe__text{ display:block; padding:18px 20px 22px; }
.kf-gruppe__name{ display:block; font-weight:600; font-size:1.06rem; color:#134C41;
  line-height:1.3; margin-bottom:5px; }
.kf-gruppe__zeile{ display:block; font-size:.9rem; line-height:1.5; color:#237A6D; }
.kf-gruppe__leer{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:#F4FAF8; border-bottom:1px dashed #8AC7BC; }
.kf-gruppe__leer span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:#237A6D; opacity:.75; }
@media (hover:hover){
  .elementor .kf-gruppe:hover{ transform:translateY(-7px);
    box-shadow:0 2px 4px rgba(10,46,40,.07), 0 18px 36px rgba(10,46,40,.12),
               0 44px 80px rgba(10,46,40,.10); }
  .kf-gruppe:hover img{ transform:scale(1.06); }
}
.kf-gruppe:focus-visible{ outline:3px solid #F6A606; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .kf-gruppe, .elementor .kf-gruppe img{ transition:none !important; }
  .kf-gruppe:hover, .kf-gruppe:hover img{ transform:none !important; }
}

/* Bildband ueber die volle Lesebreite, fuer Unternehmens- und Qualitaetsseiten */
.kf-band{ margin:2.6rem 0; }
.elementor .kf-band img{ width:100%; display:block; border-radius:22px;
  aspect-ratio:21/9; object-fit:cover; height:auto; }
.kf-band figcaption{ margin-top:.75rem; font-size:.9rem; line-height:1.55;
  color:#237A6D; max-width:64ch; font-style:normal; }
/* Zwei Bilder nebeneinander */
.kf-paar{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:2.4rem 0; }
.kf-paar figure{ margin:0; }
.elementor .kf-paar img{ width:100%; display:block; border-radius:18px;
  aspect-ratio:3/2; object-fit:cover; }
.kf-paar figcaption{ margin-top:.6rem; font-size:.86rem; color:#237A6D; font-style:normal; }
@media (max-width:640px){ .kf-paar{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   Piktogramm-Kacheln (Fuer Profis)
   Neu gezeichnet im Logo-Linienstil — die Piktogramme der Altseite
   liegen bei 85 px und sind fuer heutige Bildschirme unbrauchbar.
   ------------------------------------------------------------ */
.kf-gruppen--drei{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.kf-pikt{ display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; background:#134C41; }
.kf-piktogramm{ width:52%; height:auto; stroke:#FFFFFF; fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; opacity:.92; overflow:visible; }
.kf-piktogramm path{ stroke-dasharray:1; stroke-dashoffset:1;
  animation:kf-malen 2.2s ease forwards; }
.kf-piktogramm path:nth-child(2){ animation-delay:.2s }
.kf-piktogramm path:nth-child(3){ animation-delay:.4s }
.kf-piktogramm path:nth-child(4){ animation-delay:.6s }
@media (hover:hover){ .kf-gruppe--pikt:hover .kf-piktogramm{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .kf-piktogramm path{ animation:none; stroke-dashoffset:0 }
}

/* Zertifizierungs-Zeichen nebeneinander (Qualitaet) */
.kf-zeichen{ display:flex; flex-wrap:wrap; align-items:center; gap:34px;
  background:#E0EFEC; border-radius:20px; padding:26px 30px; margin:1.4rem 0 2.6rem; }
.elementor .kf-zeichen img{ height:74px; width:auto; border-radius:0; }
@media (max-width:520px){ .kf-zeichen{ gap:22px; padding:20px 22px; }
  .elementor .kf-zeichen img{ height:58px; } }

/* Skizzen, die im Seiteninhalt liegen (Sortiment- und Profi-Seiten):
   Buehne ist dort die eigene Bank, nicht das Elementor-Widget.  kf-skizze-im-inhalt */
.kf-sort-buehne > .kf-skizze,
.kf-sort-abschluss > .kf-skizze{ position:absolute; z-index:0; }

/* WordPress' Absatz-Automatik macht aus Zeilenumbruechen zwischen INLINE-
   Elementen <br>-Tags. Im Grid zaehlen die als Zelle und reissen jede
   zweite Spalte leer. Bei <figure> passiert das nicht (Blockelement).
   kf-br-schutz */
.kf-gruppen > br, .kf-sort-raster > br, .kf-zeichen > br{ display:none; }

/* ------------------------------------------------------------
   Personenblock mit Zitat (Ansprechpartner, Unternehmen)
   ------------------------------------------------------------ */
.kf-person{ display:grid; grid-template-columns:132px 1fr; gap:26px; align-items:center;
  background:#E0EFEC; border-radius:22px; padding:28px 30px; margin:2.4rem 0; }
.elementor .kf-person img{ width:132px; height:132px; border-radius:50%;
  object-fit:cover; display:block; }
.kf-person blockquote{ margin:0; border:0; padding:0; }
.kf-person blockquote p{ margin:0 0 .6rem; font-size:1.08rem; line-height:1.6;
  color:#0A2E28; }
.kf-person cite{ font-style:normal; font-size:.9rem; color:#237A6D; }
@media (max-width:560px){ .kf-person{ grid-template-columns:1fr; text-align:left;
  padding:24px 22px; } }

/* Tabellen in Inhaltsseiten (Oeffnungszeiten) */
.elementor-widget-theme-post-content table{ width:auto; border-collapse:collapse;
  margin:1rem 0 2rem; }
.elementor-widget-theme-post-content td{ padding:9px 26px 9px 0;
  border-bottom:1px solid #E0EFEC; }
.elementor-widget-theme-post-content td:last-child{ font-variant-numeric:tabular-nums;
  color:#134C41; font-weight:500; }

/* Innenabstaende im Abschlussband  kf-band-innen */
.kf-sort-abschluss h2{ margin:0 0 .6rem; }
.kf-sort-abschluss p{ margin:0 0 1rem; max-width:64ch; }
.kf-sort-abschluss p:last-child{ margin-bottom:0; margin-top:1.8rem; }

/* ------------------------------------------------------------
   Abschlussband: zweispaltig und Ueberschrift sichtbar
   kf-band-zweispaltig
   Die Ueberschrift stand auf Petrol AUF Petrol (gemessen rgb(19,76,65)
   auf #134C41) — eine Theme-Regel schlug die reine Klassenregel.
   Und das Band war einspaltig bei 1180 px Breite, die rechte Haelfte
   blieb leer. Jetzt Text links, Handlung rechts.
   ------------------------------------------------------------ */
.elementor .kf-sort-abschluss h2{ color:#FFFFFF; }
.kf-sort-abschluss{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; column-gap:56px; row-gap:0; }
.kf-sort-abschluss > .kf-skizze{ position:absolute; }
.kf-sort-abschluss > p:empty{ display:none; }
.kf-sort-abschluss > h2, .kf-sort-abschluss > p{ grid-column:1; }
.kf-sort-abschluss > p:last-child{ grid-column:2; grid-row:1 / -1;
  align-self:center; margin:0; display:flex; flex-direction:column;
  align-items:flex-start; gap:14px; }
.kf-sort-abschluss .kf-sort-link{ margin-left:0; }
@media (max-width:860px){
  .kf-sort-abschluss{ grid-template-columns:1fr; row-gap:0; }
  .kf-sort-abschluss > p:last-child{ grid-column:1; grid-row:auto; margin-top:1.6rem; }
}

/* Zweitlink und Knopf brauchen dieselbe Spezifitaets-Stufe wie die
   Ueberschrift — sonst gewinnt die Theme-Linkfarbe und der Text steht
   Petrol auf Petrol.  kf-linkfarbe-fix */
.elementor .kf-sort-abschluss .kf-sort-link{ color:#8AC7BC; text-decoration:none; }
.elementor .kf-sort-abschluss .kf-sort-link:hover,
.elementor .kf-sort-abschluss .kf-sort-link:focus{ color:#FFFFFF; }
.elementor .kf-sort-abschluss .kf-sort-knopf{ color:#412402; text-decoration:none; }
.elementor .kf-sort-abschluss p{ color:rgba(255,255,255,.86); }

/* Alle Rasterreihen gleich hoch — sonst wandert die Textkante je Reihe
   und das Raster wirkt unruhig.  kf-gleiche-reihen */
.kf-gruppen{ grid-auto-rows:1fr; }
.kf-gruppe{ display:flex; flex-direction:column; }
.kf-gruppe__text{ flex:1 1 auto; }

/* ------------------------------------------------------------
   Kontraste nachgezogen   kf-kontrast-fix
   Gemessen nach WCAG: Petrol-600 #237A6D trug kleine Schrift nicht.
   Kleinlabels und Artikelnummern lagen bei 4.3:1 (gefordert 4.5),
   Bildunterschriften bei 5.2, der Zweitlink auf Petrol bei 5.1.
   Loesung bleibt in der CD-Rampe: 600 -> 800 auf hellem Grund,
   300 -> 100 auf dunklem Grund. Leise bleiben die Elemente ueber
   Groesse und Laufweite, nicht ueber ausgewaschene Farbe.
   ------------------------------------------------------------ */
.kf-sort-merkmal em{ color:#134C41; }
.kf-sort-nr{ color:#134C41; }
.kf-sort-beleg figcaption,
.kf-band figcaption,
.kf-paar figcaption{ color:#134C41; }
.kf-gruppe__zeile{ color:#134C41; }
.kf-sort-platz span,
.kf-gruppe__leer span{ color:#134C41; opacity:.8; }
.elementor .kf-sort-abschluss .kf-sort-link{ color:#E0EFEC; }
/* Brotkrumen der Seitenvorlage: Trenner waren zu blass */
.elementor-location-single .e-con:first-of-type .breadcrumb span,
.elementor-location-single .e-con:first-of-type #breadcrumbs span{ color:#E0EFEC; }

/* ------------------------------------------------------------
   Mobilmenue lag im Textfluss   kf-mobilmenue-fix
   Das zugeklappte Dropdown war 124 x 0 px mit position:static —
   vertikal zu, aber die BREITE belegte es weiter. Der rechte Block
   ist nur 171 px breit, seine Kinder brauchten zusammen 255 px, und
   weil beide nicht schrumpfen duerfen, lief das Menue nach links
   ueber das Logo (Logo endete bei 155, Burger begann bei 148).
   Absolut positioniert nimmt es keine Breite mehr ein; beim Oeffnen
   legt es sich ueber den Inhalt, was auf dem Handy ohnehin richtig ist.
   ------------------------------------------------------------ */
@media (max-width: 767px){
  /* Elementor setzt selbst position:relative auf das Menue-Widget. Bleibt das
     stehen, verankert sich das Dropdown am 33 px breiten Burger und ragt
     links aus dem Fenster. Deshalb static erzwingen und den Kopfbereich
     zum Anker machen. */
  .elementor-location-header .elementor-element-dc60a6e{ position:static !important; }
  /* Breite bewusst unabhaengig vom Anker: rechts buendig, Breite gedeckelt
     auf Fensterbreite minus Rand. Damit sitzt es richtig, egal welches
     Elternelement Elementor gerade positioniert. */
  .elementor-location-header .elementor-nav-menu--dropdown{
    position:absolute; top:100%; left:auto; right:0;
    width:min(320px, calc(100vw - 32px)); z-index:120; }
  /* KEIN position:relative am Menue-Widget — sonst verankert sich das
     Dropdown am 33 px schmalen Burger und ragt links aus dem Fenster
     (gemessen: left -73px). Anker ist der Kopfbereich. */
  .elementor-location-header .e-con-inner{ position:relative; }
  /* Burger sitzt jetzt rechts neben dem Knopf, mit Luft zum Logo */
  .elementor-location-header .elementor-menu-toggle{ margin-left:auto; }
}

/* Mobilmenue lief auf Elementor-Grau statt auf dem CD:
   aktiver Eintrag rgb(63,68,75), Text rgb(51,55,61) — beides Fremdfarben.
   kf-mobilmenue-cd */
@media (max-width: 767px){
  .elementor-location-header .elementor-nav-menu--dropdown{
    background:#FFFFFF; border-radius:0 0 18px 18px; overflow:hidden;
    box-shadow:0 18px 44px rgba(10,46,40,.16); }
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item{
    color:#134C41 !important; font-weight:500; }
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active,
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item:hover,
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item:focus{
    background-color:#E0EFEC !important; color:#134C41 !important; }
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active{
    box-shadow:inset 3px 0 0 #F6A606; }
}

/* ------------------------------------------------------------
   Kopf laeuft mit   kf-kopf-mitlaufend
   Der Kopf stand auf position:static — beim Scrollen verschwand er
   samt Burger, das Menue war nur ganz oben erreichbar. Auf einer Seite
   mit 4000+ px Laenge ist das der haeufigste Grund, warum Besucher
   nicht weiterklicken.
   ------------------------------------------------------------ */
.elementor-location-header{
  position:sticky; top:0; z-index:200;
  background:#FFFFFF;
  box-shadow:0 1px 0 rgba(10,46,40,.07); }
body.admin-bar .elementor-location-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .elementor-location-header{ top:46px; } }

/* Abdunkelnder Grund hinter dem offenen Mobilmenue, damit es sich klar
   vom Inhalt abhebt. */
@media (max-width:767px){
  body:has(.elementor-menu-toggle[aria-expanded="true"])::after{
    content:""; position:fixed; inset:0; background:rgba(10,46,40,.45);
    z-index:150; pointer-events:none; }
  .elementor-location-header{ z-index:200; }
  .elementor-location-header .elementor-nav-menu--dropdown{ z-index:210; }
}

/* ============================================================
   SEELE UND ENERGIE — Entwurfsbausteine   kf-seele
   Bewusst kraeftiger als der Rest: grosse Bilder, grosse Saetze,
   Ueberlappungen statt Kaestchen nebeneinander.
   ============================================================ */
.kf-moment{ position:relative; margin:3.2rem 0 4.6rem; }
.kf-moment--gross{ width:min(1180px,92vw); margin-left:50%; transform:translateX(-50%); }
.elementor .kf-moment img{ width:100%; display:block; border-radius:26px;
  aspect-ratio:16/7; object-fit:cover; }
.kf-moment__text{ position:absolute; left:clamp(14px,4%,48px); bottom:-30px;
  background:#134C41; border-radius:22px; padding:26px 30px 28px;
  max-width:min(520px,80%); box-shadow:0 24px 54px rgba(10,46,40,.30); }
.kf-moment__auge{ display:block; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:#F6A606; margin-bottom:.55rem; }
.kf-moment__satz{ font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.22; font-weight:600;
  color:#134C41; margin:0; text-wrap:balance; letter-spacing:-.01em; }
.kf-moment__text .kf-moment__satz{ color:#FFFFFF; }

/* Damals und heute */
.kf-damals{ width:min(1180px,92vw); margin-left:50%; transform:translateX(-50%);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:26px 30px;
  align-items:start; margin-top:3rem; margin-bottom:3.4rem; }
.kf-damals__bild{ margin:0; }
.kf-damals__bild:first-of-type{ transform:translateY(34px); }
.elementor .kf-damals__bild img{ width:100%; display:block; border-radius:20px;
  aspect-ratio:4/3; object-fit:cover; }
.kf-damals__bild figcaption{ margin-top:.7rem; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:#134C41; font-style:normal; }
.kf-damals__text{ grid-column:1 / -1; max-width:64ch; margin-top:2.4rem; }
.kf-damals__text p:last-child{ margin-bottom:0; }

/* Menschen */
/* ACHTUNG margin-Kurzform: sie wuerde margin-left:50% zuruecksetzen und den
   Block aus dem Fenster schieben (gemessen: left -307px). Nur Langform. */
/* ⚠️ Zentrierung OHNE transform (27.08.2026 korrigiert).
   Vorher stand hier margin-left:50% + translateX(-50%). Sobald das
   Raster die Auftauch-Animation bekam, ueberschrieb deren transform
   die Zentrierung, und der ganze Block rutschte um seine halbe Breite
   nach rechts aus dem Bild. Mit margin-left:calc() bleibt transform
   frei fuer Animationen. */
.kf-menschen{ width:min(1000px,92vw);
  margin-left:calc(50% - min(1000px,92vw) / 2); margin-right:0;
  margin-top:3rem; margin-bottom:3.6rem;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.kf-menschen figure{ margin:0; }
.kf-menschen figure:nth-child(2){ transform:translateY(32px); }
.elementor .kf-menschen img{ width:100%; display:block; border-radius:20px;
  aspect-ratio:3/4; object-fit:cover; }

@media (max-width:760px){
  .kf-moment--gross, .kf-damals{ width:100%; margin-left:0; transform:none; }
  .kf-menschen{ width:100%; margin-left:0; }
  .elementor .kf-moment img{ aspect-ratio:4/3; }
  .kf-moment__text{ position:static; max-width:none; margin-top:-46px;
    margin-left:14px; margin-right:14px; }
  .kf-damals{ grid-template-columns:1fr; }
  .kf-damals__bild:first-of-type{ transform:none; }
  /* MW 27.08.: immer drei nebeneinander, auch auf dem Handy. */
  .kf-menschen{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .kf-menschen figure:nth-child(2){ transform:none; }

}
@media (prefers-reduced-motion:reduce){
  .kf-damals__bild:first-of-type, .kf-menschen figure:nth-child(2){ transform:none; }
}

/* ============================================================
   WELLENBAENDER UND KOERNUNG   kf-wellen
   Aufgegriffen vom Etiketten-CD (11488_KOE_CD_Etikett_R02).
   Dort liegen ueber der Grundfarbe organische Sweeps in helleren und
   dunkleren Toenen. Die zunaechst ergaenzte Koernung per feTurbulence
   wurde wieder entfernt: der Browser wies das SVG als ungueltig ab. Aus dem PDF gemessen:
   Grundton #084840, Band #083028 — das sind exakt die beiden
   dunkelsten Stufen der bestehenden Petrol-Rampe (800 und 900).
   Deshalb KEIN neuer Farbwert noetig, und die CD-Regel 'keine
   Verlaeufe' bleibt gewahrt: es sind zwei flache Toene in Formen,
   kein Gradient.
   ============================================================ */
/* Elementor belegt ::before an Containern fuer seine Hintergrund-Ueberlagerung
   und schaltet sie ueber --background-overlay frei. Steht die Variable auf
   none (Standard), wird content:none gesetzt und das Pseudo-Element entsteht
   gar nicht — eigene ::before-Regeln laufen dort ins Leere. Deshalb Elementors
   eigenen Schalter benutzen statt dagegen anzuschreiben. */
.elementor-element-213ad7f,
.elementor-element-92cda42{ --background-overlay:''; position:relative; }
.kf-sort-abschluss{ position:relative; }
.elementor-element-213ad7f::before,
.elementor-element-92cda42::before,
.kf-sort-abschluss::before{
  content:"" !important; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0,96 C240,26 540,182 1200,64 L1200,400 L0,400 Z' fill='%23237A6D' opacity='.30'/%3E%3Cpath d='M0,196 C300,126 640,258 1200,150 L1200,400 L0,400 Z' fill='%230A2E28' opacity='.55'/%3E%3Cpath d='M0,320 C420,256 820,352 1200,286 L1200,400 L0,400 Z' fill='%23237A6D' opacity='.22'/%3E%3C/svg%3E");
  /* 100% 100% statt cover: das Wellen-SVG traegt preserveAspectRatio=none
     und ist auf Streckung ausgelegt. Mit cover wurde es beschnitten und
     die obere Welle fiel aus dem Bild. */
  background-size:100% 100%;
  background-position:center center;
  background-repeat:no-repeat;
}
/* Inhalt bleibt ueber der Textur */
.elementor-element-213ad7f > .e-con-inner,
.elementor-element-92cda42 > .e-con-inner{ position:relative; z-index:1; }
.kf-sort-abschluss > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion:no-preference){ }

/* ===== 14.08. Feinschliff nach Breitenpruefung ===================== */

/* Lange deutsche Komposita brechen lassen, statt aus der Seite zu laufen.
   Ohne das sprengt z. B. eine H2 "Verbraucherstreitbeilegung" bei 390 px
   die Seitenbreite und erzeugt seitliches Scrollen. */
.elementor h1, .elementor h2, .elementor h3, .elementor h4,
.elementor h5, .elementor h6{ overflow-wrap:break-word; hyphens:auto; }

/* Breite Tabellen bekommen einen eigenen Schiebekasten, damit nicht die
   ganze Seite waagerecht scrollt. Inhalt dafuer in <div class="kf-tabelle">. */
.kf-tabelle{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kf-tabelle table{ min-width:32rem; }
/* Am Handy (bis 600 px) stapelt die Tabelle zu Karten. Die Mindestbreite darf dort
   nicht gelten, sonst lief /datenschutz/ bei 390 px um 137 px seitlich ueber (12.10.2026). */
@media (max-width:600px){ .kf-tabelle table{ min-width:0; } }

/* Kundengruppen-Karten der Startseite: der Verweis sitzt unten buendig,
   egal wie lang der Text darueber ist. dae721e ist die Reihe der drei Karten. */
.elementor .elementor-element-dae721e > .e-con > .elementor-widget-button{
  margin-top:auto;
}

/* ===== Unternehmensseite: Rhythmus und Bewegung ==================== */

/* Auftauchen beim Scrollen. Bewusst als Opt-in geschrieben: ohne
   Bewegungserlaubnis UND ohne Browser-Unterstuetzung steht der Inhalt
   einfach da. Es gibt keinen Zustand, in dem etwas unsichtbar bleibt. */
@keyframes kf-auftauchen{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
@keyframes kf-linie{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .kf-auf{ animation: none; } /* 02.10.2026 abgeschaltet (E5) */
    /* Versatz statt Verzoegerung: bei Scroll-Zeitleisten wirkt kein delay */
    .kf-auf--b{ animation-range:entry 6% cover 32%; }
    .kf-auf--c{ animation-range:entry 6% cover 40%; }
    .kf-zeit::before{
      animation:kf-linie linear both;
      animation-timeline:view();
      animation-range:entry 25% cover 75%;
    }
  }
}

/* --- Zeitstrahl --- */
.kf-zeit{ list-style:none; margin:2.2rem 0 0; padding:0; position:relative; }
.kf-zeit::before{
  content:""; position:absolute; left:11px; top:.7rem; bottom:.7rem; width:2px;
  background:#8AC7BC; transform-origin:top;
}
.kf-zeit > li{ position:relative; padding:0 0 2rem 3.1rem; }
.kf-zeit > li:last-child{ padding-bottom:0; }
.kf-zeit > li::before{
  content:""; position:absolute; left:4px; top:.5rem; width:16px; height:16px;
  border-radius:50%; background:#134C41; box-shadow:0 0 0 4px #fff;
}
/* Genau ein Akzent auf der Flaeche: die Gegenwart */
.kf-zeit > li:last-child::before{ background:#F6A606; }
.kf-zeit b{
  display:block; color:#134C41; font-size:1.4rem; line-height:1.2;
  font-weight:700; letter-spacing:.005em;
}
.kf-zeit span{ display:block; margin-top:.4rem; }

/* --- Haltungskarten --- */
.kf-haltungen{
  display:grid; gap:1.1rem; margin:1.9rem 0;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
}
.kf-haltung{ background:#E0EFEC; border-radius:14px; padding:1.25rem 1.35rem; }
.kf-haltung b{
  display:block; color:#134C41; font-size:1.08rem; margin-bottom:.45rem;
  line-height:1.25;
}

/* Hochformatige Produktaufnahmen brauchen ein stehendes Bildfenster.
   Der 3:2-Ausschnitt schneidet eine von oben fotografierte Schale sonst
   oben und unten an. Opt-in ueber .kf-paar--hoch am Paar. */
.elementor .kf-paar--hoch img{ aspect-ratio:4/5; }

/* --- Der Frische-Weg: fuenf Stationen als Pfad ---------------------
   Wechselseitig gesetzt, damit der Blick den Weg entlanglaeuft.
   .elementor davor, sonst setzt Elementors img-Regel die Rundung zurueck. */
.kf-weg{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; gap:2.4rem; }
.kf-weg > li{ display:grid; gap:1rem 1.8rem; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.kf-weg > li:nth-child(even) > figure{ order:2; }
.kf-weg figure{ margin:0; position:relative; }
.elementor .kf-weg img{ width:100%; display:block; border-radius:18px;
  aspect-ratio:4/3; object-fit:cover; }
.kf-weg .nr{ position:absolute; left:14px; top:14px;
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border-radius:50%; background:#134C41; color:#fff;
  font-weight:700; font-size:1.05rem; font-style:normal; }
/* Genau ein Akzent: das Ende des Wegs */
.kf-weg > li:last-child .nr{ background:#F6A606; color:#0A2E28; }
.kf-weg h3{ margin:0 0 .5rem; color:#134C41; }
.kf-weg p{ margin:0; }
@media (max-width:700px){
  .kf-weg > li{ grid-template-columns:1fr; }
  .kf-weg > li:nth-child(even) > figure{ order:0; }
}

.kf-weg .nr{ display:grid; place-items:center; }

/* Der Pfad ist kein Fliesstext: die 64ch-Lesebreite gilt hier nicht,
   sonst schrumpfen die Bilder auf die halbe Buehnenbreite. */
.elementor .kf-weg{ max-width:none; padding-left:0; }

/* --- Kurzbewerbungsformular ----------------------------------------
   Elementor liefert graue Standardfelder mit 3-px-Ecken und ohne
   Spaltenabstand. Auf der getoenten Buehne sieht das aus wie ein
   fremdes Plugin. Hier bekommt es die Handschrift des Hauses:
   weisse Felder auf Petrol-100, Mango-Pille als Absender. */

.kf-sort-buehne .elementor-form-fields-wrapper{ gap:20px 22px; }
.kf-sort-buehne .elementor-form-fields-wrapper > .elementor-column.elementor-col-50{
  width:calc(50% - 11px);
}

.kf-sort-buehne .elementor-field-group > label{
  display:block; margin-bottom:.45rem; color:#134C41;
  font-size:.95rem; font-weight:600; letter-spacing:.01em;
}
.kf-sort-buehne .elementor-mark-required{ color:#237A6D; }

.elementor .kf-sort-buehne .elementor-field-textual{
  background:#fff; border:1px solid #C4DED7; border-radius:14px;
  padding:13px 16px; min-height:52px; font-size:1rem; color:#0A2E28;
  box-shadow:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.elementor .kf-sort-buehne textarea.elementor-field-textual{
  min-height:132px; line-height:1.55;
}
.kf-sort-buehne .elementor-field-textual::placeholder{ color:#6D8A83; opacity:1; }
.elementor .kf-sort-buehne .elementor-field-textual:focus{
  border-color:#237A6D; box-shadow:0 0 0 3px rgba(35,122,109,.20); outline:none;
}

/* Auswahlfeld: eigener Pfeil, sonst bleibt der graue Systemknubbel */
.elementor .kf-sort-buehne select.elementor-field-textual{
  appearance:none; -webkit-appearance:none; padding-right:46px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23134C41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center;
}

/* Absender wie die uebrigen Knoepfe im Haus */
.kf-sort-buehne .elementor-field-type-submit{ margin-top:.4rem; }
.elementor .kf-sort-buehne .elementor-form .elementor-button[type="submit"]{
  width:auto; background:#F6A606; color:#412402; border:0;
  border-radius:999px; padding:14px 30px; min-height:0;
  font-weight:500; font-size:1rem; letter-spacing:.005em;
  transition:transform .25s ease, filter .25s ease;
}
.elementor .kf-sort-buehne .elementor-form .elementor-button[type="submit"]:hover,
.elementor .kf-sort-buehne .elementor-form .elementor-button[type="submit"]:focus{
  background:#F6A606; color:#412402; filter:brightness(1.06);
  transform:translateY(-2px);
}

.kf-sort-buehne .elementor-message{ border-radius:14px; padding:12px 16px; }

@media (max-width:640px){
  .kf-sort-buehne .elementor-form-fields-wrapper > .elementor-column.elementor-col-50{
    width:100%;
  }
}

/* Absender nicht strecken */
/* Elementor gibt dem Absende-Knopf flex-basis:100% und streckt ihn damit
   ueber die ganze Formularbreite. Nicht an width drehen, das greift nicht
   gegen flex-basis. */
.elementor .kf-sort-buehne .elementor-form .elementor-button[type="submit"]{
  flex:0 0 auto; width:auto;
}
.kf-sort-buehne .e-form__buttons{ justify-content:flex-start; }

/* Nur ein Pfeil im Auswahlfeld */
/* Elementor legt einen eigenen Pfeil als div ueber das Feld
   (.select-caret-down-wrapper). Mein Hintergrundbild kam dazu, es standen
   zwei Pfeile da. Also deren Pfeil einfaerben und meinen weglassen. */
.elementor .kf-sort-buehne select.elementor-field-textual{ background-image:none; }
.kf-sort-buehne .elementor-select-wrapper .select-caret-down-wrapper{
  right:18px; color:#134C41; width:14px;
}
.kf-sort-buehne .elementor-select-wrapper .select-caret-down-wrapper svg{
  width:14px; height:14px; fill:#134C41;
}

/* --- Fusszone: die Kurve aus der Agenturvorlage --------------------
   Dieselbe Form wie auf den Preisblaettern, aus dem PDF ausgelesen und
   nicht nachgezeichnet. Sie liegt als weisse Deckform ueber dem Petrol
   der Fusszeile und schneidet daraus die geschwungene Kante, genau wie
   im Druck. Quelle: 00_Marke/Fusszone_Agentur_freigestellt.svg
   Die Koernung des Druckfiles bleibt weg: sie braucht 300 dpi und
   bringt am Bildschirm nichts. */
.elementor-location-footer > .e-con{
  position:relative;
  padding-top:clamp(86px, 17vw, 262px) !important;
}
.elementor-location-footer > .e-con::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:clamp(78px, 16vw, 244px);
  background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 560.089844 595.276 281.800156' preserveAspectRatio='none'><path d='M 933.34375 349.070312 C 934.605469 323.71875 932.804688 298.515625 928.335938 272.8125 C 911.808594 177.769531 843.738281 88.738281 765.824219 36.039062 C 699.238281 -8.984375 647.699219 -21.121094 574.222656 -44.582031 C 544.257812 -54.148438 513.285156 -61.0625 483.429688 -70.730469 C 385 -102.582031 287.375 -146.84375 184.089844 -158.257812 C 147.445312 -162.300781 111.351562 -164.257812 74.605469 -160.613281 C 42.222656 -157.398438 -2.730469 -145.585938 -33.304688 -133.539062 C -38.789062 -131.382812 -43.617188 -127.394531 -45.835938 -126.429688 C -64.71875 -118.210938 -81.214844 -110.425781 -98.921875 -99.71875 C -110.855469 -92.5 -122.410156 -85.160156 -133.558594 -76.714844 C -169.511719 -49.53125 -193.601562 -23.0625 -220.238281 13.214844 C -232.15625 29.445312 -237.839844 37.222656 -248.199219 55.09375 C -273.703125 99.054688 -288.046875 126.066406 -306.890625 194.320312 C -325.730469 262.582031 -318.566406 387.484375 -295.867188 462.175781 C -273.171875 536.882812 -183.316406 669.984375 -81.960938 721.601562 C -37.089844 744.457031 14.976562 760.695312 65.007812 766 C 198.488281 780.164062 318.632812 730.652344 446.425781 703.101562 C 553.460938 680.027344 659.910156 676.5 757.316406 619.6875 C 777.121094 608.132812 794.976562 595.574219 812.539062 580.710938 C 838.878906 558.433594 857.195312 538.347656 876.960938 509.757812 C 889.832031 491.132812 901.691406 472.234375 910.324219 451.148438 C 917.984375 432.445312 924.957031 410.136719 928.578125 390.253906 C 931.097656 376.429688 932.664062 362.726562 933.34375 349.070312' fill='%23fff'/></svg>") no-repeat 0 0;
  background-size:100% 100%;
  pointer-events:none;
}
.elementor-location-footer > .e-con > *{ position:relative; z-index:1; }

/* --- Kundengruppen-Karten: farbige Oberkante -------------------
   Aus der Design-Skizze, Abschnitt 5: eine Farbe je Kundengruppe.
   Bewusst nur eine 4-px-Kante und keine Flaeche (MW: "es soll nicht zu
   bunt werden"). Die Karte bleibt weiss, der Akzent sitzt oben.
   Es sind dieselben drei Farben wie die organischen Flaechen der
   Agentur-Fusszone: dort bleiben sie Print, hier arbeiten sie als Akzent.
   Bis heute war Mango die einzige Farbe auf der Seite, sky und apple
   kamen nirgends vor.
   ACHTUNG: ::after, nicht ::before. Bei .e-con ist ::before von
   Elementors Hintergrund-Overlay belegt (content: var(--background-overlay),
   Variable leer) - eine eigene Regel dort rendert nie. */
.elementor-element-890d165::after,
.elementor-element-e176005::after,
.elementor-element-85d7bd5::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  border-radius:10px 10px 0 0; pointer-events:none;
}
.elementor-element-890d165::after{ background:#64B667; } /* Foodservice-Grosshandel */
.elementor-element-e176005::after{ background:#4B89C3; } /* Lebensmittelindustrie */
.elementor-element-85d7bd5::after{ background:#F6A606; } /* LEH-Verbaende */

/* --- Umbrueche und Lesbarkeit -------------------------------------
   Gemessen am 17.08.2026: Ueberschriften brachen mit einem einzelnen
   Wort in der letzten Zeile ("Vom eigenen Acker bis auf Ihre / Rampe"),
   Absaetze endeten mit Waisenwoertern.
   balance verteilt die Zeilen einer Ueberschrift gleichmaessig,
   pretty verhindert das allein stehende letzte Wort im Fliesstext.
   Beides faellt in aelteren Browsern stillschweigend auf normal zurueck. */
h1, h2, h3,
.elementor-heading-title,
.kf-sort-abschluss h2,
.kf-weg h3,
.kf-haltung b{
  text-wrap:balance;
}
p, li, figcaption,
.kf-sort-merkmal span,
.kf-zeit span{
  text-wrap:pretty;
}

/* Deutsche Komposita brauchen auf schmalen Schirmen Trennung, sonst
   reisst "Gemeinschaftsverpflegung" die Zeile auseinander.
   lang="de" steht am html-Element, die Trennmuster greifen also. */
@media (max-width:640px){
  p, li, .kf-sort-merkmal span, .kf-haltung, .kf-zeit span{
    hyphens:auto; -webkit-hyphens:auto;
  }
}

/* Was nie umbrechen darf: Zahl und Einheit, Datumsspannen, Rufnummern. */
.kf-nowrap{ white-space:nowrap; }

/* ============================================================
   Startseiten-Hero: Bewegtbild aus der eigenen Produktion
   Angelegt 25.08.2026. Spezifikation: Vault 34_Startseite_Ultrafrische_Spec
   Das <video> wird per JS aus der functions.php in den Hero-Container
   gehaengt, weil .e-con-inner auf Inhaltsbreite begrenzt ist und clippt.
   ============================================================ */
.elementor-250 .elementor-element-92cda42{
  --kf-p:0;
  --kf-t:clamp(0,calc((var(--kf-p) - .45) * 1.85),1);
  --kf-schleier-start:.72;
  --kf-parallax:14vh;
  --kf-zoom:.06;
}
.kf-hero-film-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.kf-hero-film{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;
  transform:translate3d(0,calc(var(--kf-p) * var(--kf-parallax)),0)
            scale(calc(1 + var(--kf-p) * var(--kf-zoom)));
  will-change:transform}
.kf-hero-schleier{position:absolute;inset:0;
  opacity:calc(var(--kf-schleier-start) + (.92 - var(--kf-schleier-start)) * var(--kf-p));
  background:linear-gradient(100deg,
    #0A2E28 0%,
    rgba(10,46,40,.92) 30%,
    rgba(19,76,65,.58) 62%,
    rgba(19,76,65,.30) 100%)}

/* Textspalte steigt und uebergibt an die Kundengruppen darunter */
.elementor-250 .kf-film-an .elementor-element-5646379,
.elementor-250 .elementor-element-92cda42.kf-film-an .elementor-element-5646379{
  transform:translate3d(0,calc(var(--kf-t) * -60px),0);
  opacity:calc(1 - var(--kf-t));
  will-change:transform,opacity}

/* Schrift muss ueber Bewegtbild tragen */
.elementor-250 .kf-film-an .elementor-element-bdb40ac .elementor-heading-title{
  text-shadow:0 2px 26px rgba(10,46,40,.55)}
.elementor-250 .kf-film-an .elementor-element-19cce54{
  text-shadow:0 1px 16px rgba(10,46,40,.6)}

/* Hoehe zurueckgeben: ohne den Wechsler schrumpfte der Hero von 719 auf 575 px.
   --kf-mindesthoehe steuert das an einer Stelle. */
.elementor-250 .kf-film-an > .e-con-inner{
  min-height:var(--kf-mindesthoehe,clamp(560px,74vh,760px));
  display:flex;flex-direction:column;justify-content:center}

/* 3D-Wechsler aus, solange der Film laeuft.
   Zum Zurueckholen: diese beiden Regeln loeschen. */
.elementor-250 .kf-film-an .elementor-element-084b34a{display:none}
.elementor-250 .kf-film-an .elementor-element-5646379{width:100%;max-width:none}

@media (max-width:860px){
  .elementor-250 .elementor-element-92cda42{
    --kf-schleier-start:.70; --kf-parallax:8vh; --kf-zoom:0}
}
@media (prefers-reduced-motion:reduce){
  .kf-hero-film{display:none}
  .elementor-250 .kf-film-an .elementor-element-5646379{transform:none;opacity:1}
  .kf-hero-schleier{opacity:var(--kf-schleier-start)}
}

/* kf-hero-neutral 02.10.2026 (MW: "das Gruene etwas weiter rausnehmen ... oder den Verlauf anders loesen").
   Startseite: kein gruener Schleier mehr ueber dem ganzen Film, sondern ein fast neutraler
   dunkler Verlauf nur hinter dem Text. Rechts zeigt der Film seine echten Farben.
   Die Wellenbaender (Etiketten-CD) entfallen nur im Startseiten-Hero, auf den Seitenkoepfen bleiben sie. */
.elementor-250 .elementor-element-92cda42::before{ content:none !important; }
.elementor-250 .kf-hero-schleier{ opacity:1;
  background:
    linear-gradient(90deg, rgba(6,20,17,.66) 0%, rgba(6,20,17,.52) 40%, rgba(6,20,17,.2) 62%, rgba(6,20,17,0) 82%),
    linear-gradient(to top, rgba(6,20,17,.38) 0%, rgba(6,20,17,0) 32%); } /* Kontrast am Videobild gemessen: Fliesstext mind. 10,6:1, Belegzeile 10,0:1 */
@media (max-width: 860px){
  .elementor-250 .kf-hero-schleier{ background: linear-gradient(to top, rgba(6,20,17,.86) 0%, rgba(6,20,17,.62) 55%, rgba(6,20,17,.38) 100%); }
}
.elementor-250 .elementor-element-bdb40ac .elementor-heading-title{ text-shadow: 0 2px 30px rgba(0,0,0,.28); letter-spacing:-.015em; }

/* kf-seitenkopf-bild 02.10.2026 (MW: "den Stil der Startseite jetzt auf allen Seiten durchziehen").
Vorlage 500 (alle Unterseiten): das Beitragsbild der Seite fuellt den Seitenkopf, darueber derselbe
neutrale Verlauf wie im Startseiten-Hero statt der Wellenbaender. Grosse Ueberschrift.
Seiten ohne Beitragsbild (Pro Bio, Anfrage, Automaten, Impressum, Datenschutz) behalten
reines Petrol 800 ohne Abdunklung und einen niedrigeren Kopf. */
.elementor-500 .elementor-element-213ad7f::before{
background-image:
linear-gradient(90deg, rgba(6,20,17,.74) 0%, rgba(6,20,17,.55) 42%, rgba(6,20,17,.18) 72%, rgba(6,20,17,.05) 100%),
linear-gradient(to top, rgba(6,20,17,.5) 0%, rgba(6,20,17,0) 50%) !important; }
.page-id-1725 .elementor-500 .elementor-element-213ad7f::before,
.page-id-1764 .elementor-500 .elementor-element-213ad7f::before,
.page-id-142 .elementor-500 .elementor-element-213ad7f::before,
.page-id-235 .elementor-500 .elementor-element-213ad7f::before,
.page-id-236 .elementor-500 .elementor-element-213ad7f::before{ background-image:none !important; }
.page-id-1725 .elementor-500 .elementor-element-213ad7f,
.page-id-1764 .elementor-500 .elementor-element-213ad7f,
.page-id-142 .elementor-500 .elementor-element-213ad7f,
.page-id-235 .elementor-500 .elementor-element-213ad7f,
.page-id-236 .elementor-500 .elementor-element-213ad7f{ --min-height:320px !important; }
.elementor-500 .elementor-element-f24a177 .elementor-heading-title{ letter-spacing:-.015em; text-shadow:0 2px 30px rgba(0,0,0,.28); max-width:16ch; }
.elementor-500 .elementor-element-2c3d1b3{ text-shadow:0 1px 12px rgba(0,0,0,.35); }
/* Fliesstext in der breiten Inhaltsspalte (1240 px wie auf der Startseite) lesbar halten */
.elementor-500 .elementor-element-83c66a9 .elementor-widget-text-editor p{ max-width:68ch; }
/* Inhaltsbreite wie auf der Startseite: Container ohne eigene Breite nehmen 1240 statt 1140 px */
.elementor-500 .elementor-element-83c66a9 .e-con{ --container-max-width:1240px; }
/* Zwischenueberschriften so gross wie auf der Startseite */
.elementor-500 .elementor-element-83c66a9 h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.012em; }
/* kf-navigation 02.10.2026 (MW: "die Navigation klarer machen").
Menue neu gegliedert: Sortiment, Fuer Profis, Unternehmen, In der Region, Karriere, Kontakt.
Aufklappmenues: groessere Schrift in Petrol, klare Flaeche mit Schatten, Hover-Flaeche.
"Sortiment anfragen" ist der Handlungspunkt im Sortiment-Menue und traegt Mango. */
.elementor-element-dc60a6e .elementor-nav-menu--main .sub-menu{
min-width:250px !important; padding:8px !important; background:#fff !important;
border:1px solid #D5E6E2; border-radius:10px; box-shadow:0 16px 40px rgba(10,46,40,.16); }
.elementor-element-dc60a6e .elementor-nav-menu--main .sub-menu a.elementor-sub-item{
font-size:15px !important; font-weight:500 !important; color:#134C41 !important;
padding:10px 14px !important; border-radius:6px; line-height:1.3; }
.elementor-element-dc60a6e .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
.elementor-element-dc60a6e .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus-visible,
.elementor-element-dc60a6e .elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active{
background:#E0EFEC !important; color:#0A2E28 !important; }
.elementor-element-dc60a6e .elementor-nav-menu--main .sub-menu a.elementor-sub-item[href$="/sortiment/anfrage/"]{
margin-top:6px; border-top:1px solid #E0EFEC; border-radius:0 0 6px 6px; font-weight:700 !important; color:#0A2E28 !important; }
.elementor-element-dc60a6e .elementor-nav-menu--main .sub-menu a.elementor-sub-item[href$="/sortiment/anfrage/"]::after{
content:" \2192"; color:#F6A606; font-weight:700; }
/* Handymenue: groessere Tippflaechen, klare Trennung, Unterpunkte eingerueckt */
.elementor-element-dc60a6e nav.elementor-nav-menu--dropdown{ box-shadow:0 18px 40px rgba(10,46,40,.18); border-radius:0 0 12px 12px; overflow-x:hidden; }
/* MW 02.10.: "Sortiment anfragen ist am Smartphone nicht zu sehen". Das offene Menue haengt in der fixierten
Kopfzeile; ist es hoeher als der Bildschirm, muss es in sich scrollen. overflow:hidden hatte das verhindert. */
.elementor-element-dc60a6e .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown{ max-height:calc(100dvh - 110px) !important; overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.elementor-element-dc60a6e nav.elementor-nav-menu--dropdown a.elementor-item{
font-size:18px !important; font-weight:600 !important; color:#134C41 !important; padding:12px 22px !important; border-bottom:1px solid #E0EFEC; }
.elementor-element-dc60a6e nav.elementor-nav-menu--dropdown a.elementor-sub-item{
font-size:16px !important; font-weight:500 !important; color:#134C41 !important; padding:10px 22px 10px 38px !important; border-bottom:1px solid #F0F6F4; background:#F7FBFA; }
.elementor-element-dc60a6e nav.elementor-nav-menu--dropdown a.elementor-item-active{ color:#0A2E28 !important; box-shadow:inset 4px 0 0 #F6A606; }
/* Unterseiten im Rhythmus der Startseite: Mintflaechen laufen als Band ueber die volle Breite
(wie "Vom eigenen Acker"), der Abschlusskasten ist ein ruhiger Petrol-Kasten ohne Wellen
(wie "So beginnt die Zusammenarbeit"). box-shadow + clip-path verbreitern nur den Hintergrund,
das Layout und die Seitenbreite bleiben unberuehrt. */
.elementor-500 .kf-sort-buehne{ border-radius:0 !important; box-shadow:0 0 0 100vmax #E0EFEC; clip-path:inset(0 -100vmax); }
.elementor-500 .kf-sort-abschluss::before{ content:none !important; }
.elementor-500 .kf-sort-abschluss{ border-radius:14px !important; }
/* kf-hero-bereiche 02.10.2026: Bereichsanzeige im Startbild-Film (Kartoffeln, Salate, Obst, Feinkost).
Story-Striche, die mit dem Film mitlaufen; jeder Abschnitt fuehrt zur Sortimentsseite.
Skript: kf_hero_film_ausgeben() in functions.php. Auf schmalen Schirmen ausgeblendet. */
.kf-hero-bereiche{ position:absolute; z-index:3; bottom:clamp(120px, 9vw, 170px); right:32px; /* MW 02.10.: "weiter an den Rand setzen" */
display:flex; gap:14px; padding:12px 16px 11px; border-radius:10px;
background:rgba(6,20,17,.42); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.kf-hero-bereiche .kf-hb{ display:flex; flex-direction:column; gap:8px; width:132px; text-decoration:none !important;
color:rgba(255,255,255,.66) !important; font-size:14px; font-weight:600; line-height:1.25; transition:color .3s; }
.kf-hero-bereiche .kf-hb-spur{ display:block; height:3px; border-radius:2px; background:rgba(255,255,255,.25); overflow:hidden; }
.kf-hero-bereiche .kf-hb-fuell{ display:block; height:100%; width:0; background:#fff; }
.kf-hero-bereiche .kf-hb.ist-aktiv,
.kf-hero-bereiche .kf-hb:hover,
.kf-hero-bereiche .kf-hb:focus-visible{ color:#fff !important; }
.kf-hero-bereiche:not(.kf-hb-laeuft) .kf-hb-fuell{ width:100%; background:rgba(255,255,255,.5); }
@media (max-width: 1024px){ .kf-hero-bereiche{ display:none; } }
/* kf-baender 02.10.2026 (MW: "den Stil der Startseite auf allen Seiten durchziehen", "ja go").
Bausteine der Startseite fuer Unterseiten, im Text-Widget nutzbar:
  section.kf-farbband.kf-farbband--petrol  Farbband ueber die volle Breite (wie "Vier Bereiche")
  .kf-kacheln > a.kf-kachel        Fotokacheln mit Name und Zeile, --kf-kacheln setzt die Spaltenzahl
  .kf-teamraster                   ein grosses, zwei kleine Bilder mit Bildtext (wie "Die Menschen hinter der Ware")
box-shadow + clip-path verbreitern nur den Hintergrund, die Seitenbreite bleibt. */
.kf-farbband{ position:relative; margin:72px 0; padding:80px 0; background:var(--kf-farbband-farbe); box-shadow:0 0 0 100vmax var(--kf-farbband-farbe); clip-path:inset(0 -100vmax); }
.kf-farbband--petrol{ --kf-farbband-farbe:#134C41; color:#fff; }
.kf-farbband--mint{ --kf-farbband-farbe:#E0EFEC; }
.elementor .kf-farbband--petrol h2{ color:#fff !important; margin-top:0; }
.kf-farbband--petrol > p{ color:rgba(224,239,236,.9) !important; max-width:60ch; font-size:1.08rem; }
.kf-farbband--petrol .kf-sort-link{ color:#E0EFEC !important; }
.kf-farbband--petrol .kf-sort-link:hover{ color:#fff !important; }
.kf-farbband > :last-child{ margin-bottom:0; }
.kf-kacheln{ display:grid; grid-template-columns:repeat(var(--kf-kacheln,4),minmax(0,1fr)); gap:22px; margin:2rem 0 2.4rem; }
.elementor .kf-kachel{ display:block; text-decoration:none !important; color:#fff !important; }
.kf-kachel-bild{ display:block; overflow:hidden; border-radius:12px; }
.kf-kachel-bild img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:0 !important; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.elementor .kf-kachel:hover .kf-kachel-bild img{ transform:scale(1.04); }
.kf-kachel-name{ display:block; margin-top:14px; font-size:1.25rem; font-weight:700; line-height:1.2; color:#fff; }
.elementor .kf-kachel:hover .kf-kachel-name{ color:#F6A606; }
.kf-kachel-zeile{ display:block; margin-top:4px; font-size:.98rem; line-height:1.45; color:rgba(224,239,236,.82); }
.kf-farbband--petrol .kf-haltungen{ margin-top:2rem; }
.kf-farbband--petrol .kf-haltung{ background:#fff !important; color:#33373d; border:0 !important; }
.kf-farbband--petrol .kf-haltung b{ color:#134C41; }
.kf-farbband--petrol .kf-zeichen{ display:inline-flex !important; width:auto !important; background:#fff !important; border-radius:12px !important; padding:18px 24px !important; margin:1rem 0 1.4rem !important; }
.kf-farbband--petrol .kf-zeichen img{ height:72px !important; width:auto !important; }
.kf-teamraster{ display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:360px 360px; gap:20px; margin:2rem 0 3rem; }
.kf-teamraster figure{ margin:0; position:relative; overflow:hidden; border-radius:12px; }
.kf-teamraster figure:first-child{ grid-row:1 / span 2; }
.kf-teamraster img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0 !important; }
.kf-teamraster figcaption{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:48px 20px 16px; background:linear-gradient(to top,rgba(10,46,40,.88),rgba(10,46,40,0)); color:#fff !important; font-size:1rem; line-height:1.4; font-weight:500; font-style:normal; }
@media (min-width:901px){ .kf-sort-merkmale--vier{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
@media (max-width:900px){
.kf-farbband{ margin:48px 0; padding:56px 0; }
.kf-kacheln{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.kf-teamraster{ grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:12px; }
.kf-teamraster figure:first-child{ grid-column:1 / span 2; grid-row:auto; }
.kf-teamraster figure:first-child img{ aspect-ratio:4/3; height:auto; }
.kf-teamraster figure img{ aspect-ratio:3/4; height:auto; }
.kf-teamraster figcaption{ padding:36px 12px 10px; font-size:.88rem; }
}
/* kf-knopf-hover 02.10.2026 (MW: "der Hover-Effekt funktioniert hier nicht").
Das Anheben der Knoepfe ist seit E5 per transform:none abgeschaltet, uebrig blieb nur
brightness(1.06), praktisch unsichtbar. Jetzt: dunkleres Mango mit leichtem Schatten,
Textlinks werden unterstrichen. Gilt fuer alle .kf-sort-knopf und .kf-sort-link. */
.kf-sort-knopf{ transition:background-color .2s ease, box-shadow .2s ease, color .2s ease !important; }
.kf-sort-knopf:hover,
.kf-sort-knopf:focus-visible{ background-color:#134C41 !important; color:#fff !important; box-shadow:0 6px 18px rgba(10,46,40,.25); filter:none !important; }
/* MW 02.10.: "der Hover ist gelb, aendere diesen auf gruen". Auf Petrol-Flaechen Petrol 600, damit der Knopf sichtbar bleibt. */
.kf-farbband--petrol .kf-sort-knopf:hover, .kf-farbband--petrol .kf-sort-knopf:focus-visible,
.kf-sort-abschluss .kf-sort-knopf:hover, .kf-sort-abschluss .kf-sort-knopf:focus-visible,
.kf-startsort .kf-sort-knopf:hover, .kf-startsort .kf-sort-knopf:focus-visible{ background-color:#237A6D !important; color:#fff !important; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.kf-sort-link:hover,
.kf-sort-link:focus-visible{ text-decoration:underline !important; text-underline-offset:3px; }
/* ===== Ende Startseiten-Hero Bewegtbild ===== */

/* ============================================================
   Fahrt ueber die Waschlinie - scrollgesteuertes Video
   Angelegt 25.08.2026. Spezifikation: Vault 34_Startseite_Ultrafrische_Spec
   Sitzt auf der Startseite nach dem Abschnitt "Vom eigenen Acker
   bis auf Ihre Rampe". Wird per JS aus der functions.php eingehaengt.
   Anders als der Hero arbeitet dieser Abschnitt BEWUSST mit sticky:
   das ist beim Scrubbing die uebliche und erwartete Mechanik.
   ============================================================ */
.kf-fahrt{position:relative;height:260vh;background:#0A2E28}
.kf-fahrt-buehne{position:sticky;top:var(--kf-kopf,0px);
  height:calc(100svh - var(--kf-kopf,0px));overflow:hidden;
  display:flex;align-items:flex-end}
.kf-fahrt-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#0A2E28}
.kf-fahrt-verlauf{position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(10,46,40,.88),rgba(10,46,40,0))}
.kf-fahrt-text{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  padding:0 24px 56px;color:#fff;pointer-events:none}
.kf-fahrt-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#F6A606;font-weight:500;margin:0 0 12px}
.kf-fahrt-text p.kf-fahrt-satz{margin:0;font-weight:500;line-height:1.22;
  font-size:clamp(22px,3.2vw,40px);max-width:16ch;
  text-shadow:0 2px 22px rgba(10,46,40,.55)}
.kf-fahrt-fortschritt{position:absolute;left:0;bottom:0;height:3px;background:#F6A606;
  width:calc(var(--kf-f,0) * 100%);z-index:3}

@media (max-width:860px){
  .kf-fahrt{height:220vh}
  .kf-fahrt-text{padding:0 20px 42px}
}
@media (prefers-reduced-motion:reduce){
  .kf-fahrt{height:auto}
  .kf-fahrt-buehne{position:static;height:auto;min-height:56vh}
  .kf-fahrt-film{position:relative;height:auto;aspect-ratio:16/9}
  .kf-fahrt-fortschritt{display:none}
}
/* ===== Ende Fahrt ueber die Waschlinie ===== */

/* ============================================================
   Sortiment-Bildplatten: Bewegtbild als Parallax-Hintergrund
   Angelegt 25.08.2026, zweite Fassung. MW: "ohne text im video,
   das video dann als parallax im hintergrund mitscrollen lassen".
   Spezifikation: Vault 34_Startseite_Ultrafrische_Spec Abschnitt 8e.

   Keine Schrift, kein Schleier - das Bild steht fuer sich. Die
   Ueberschriften der Seite ("Ready Cuts", "Produkte A-Z") folgen
   ohnehin direkt darunter und tragen die Aussage.

   Der Film ist hoeher als sein Rahmen und wandert beim Scrollen
   gegenlaeufig darin. --kf-pp kommt aus dem Skript (0 bis 1).
   ============================================================ */
.kf-platte{--kf-pp:.5;
  position:relative;margin:56px calc(50% - 50vw);width:100vw;
  background:#0A2E28;overflow:hidden;
  height:clamp(300px,38vw,470px)}
.kf-platte-film{position:absolute;left:0;width:100%;
  top:-11%;height:122%;object-fit:cover;
  transform:translate3d(0,calc((var(--kf-pp) - .5) * -13%),0);
  will-change:transform}

@media (max-width:860px){
  .kf-platte{margin:40px calc(50% - 50vw);height:clamp(230px,52vw,320px)}
  /* Parallax gedaempft, spart Rechenzeit auf schwachen Geraeten */
  .kf-platte-film{top:-7%;height:114%;
    transform:translate3d(0,calc((var(--kf-pp) - .5) * -8%),0)}
}
@media (prefers-reduced-motion:reduce){
  .kf-platte-film{transform:none;top:0;height:100%}
}
/* ===== Ende Sortiment-Bildplatten ===== */



/* ============================================================
   Fusszone nach dem Druck-CD (25.08.2026)
   MW: 'koennen wir den footer noch naeher an dieses design
   angleichen, wirkt sehr dunkel' - Vorlage: Fusszone.svg.

   Der Fuss war ein massiver Block: 713 px hoch, durchgehend
   Petrol-900 #0A2E28, davon 232 px leeres Polster oben, harte
   waagerechte Oberkante. Drei Aenderungen, alle aus der Vorlage:
     1) Grundton auf Petrol-800 #134C41 wie im Druckbogen
     2) Organische Schwungkante statt harter Linie. Der Verlauf
        ist aus Fusszone.svg AUSGELESEN, nicht nachempfunden:
        je Spalte der oberste Petrol-Pixel, geglaettet, rechte
        20 % extrapoliert - dort verfaelscht die blaue Flaeche
        die Messung.
     3) Die drei Akzentflaechen: Apfelgruen, Mango, Blau.

   Alles auf ::after des Fuss-Containers. ::before ist von
   Elementor belegt (Background-Overlay) und bleibt unberuehrt.
   ============================================================ */
/* Elementors Stylesheet laedt NACH dem Child-Theme - bei gleicher
   Spezifitaet gewinnt es. Nur diese beiden Werte brauchen deshalb
   !important, alles andere setzt sich normal durch. */
body .elementor-241 .elementor-element-8d729f9{
  background-color:#134C41 !important;
  padding-top:clamp(104px,12vw,164px) !important;
  position:relative;overflow:hidden}
body .elementor-241 .elementor-element-8d729f9::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0,87.9C45,87.9 45,96.1 91,96.1C136,96.1 136,100.0 182,100.0C227,100.0 227,97.6 273,97.6C318,97.6 318,90.0 364,90.0C409,90.0 409,78.6 455,78.6C500,78.6 500,64.9 545,64.9C591,64.9 591,50.5 636,50.5C682,50.5 682,37.1 727,37.1C773,37.1 773,25.4 818,25.4C864,25.4 864,12.7 909,12.7C955,12.7 955,0.0 1000,0.0L1000,0L0,0Z' fill='%23ffffff'/></svg>") no-repeat left top/100% clamp(56px,7vw,104px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M52 2C80 4 97 28 95 55C93 81 71 98 44 96C18 94 3 70 5 43C7 19 27 0 52 2Z' fill='%234B89C3'/></svg>") no-repeat right -40px top 6px/190px 150px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M50 2C74 2 98 22 97 50C96 78 74 98 48 97C22 96 2 74 3 48C4 22 26 2 50 2Z' fill='%2364B667'/></svg>") no-repeat left -58px bottom -78px/164px 150px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M46 3C72 0 98 24 98 52C98 79 74 99 46 97C19 95 1 72 3 44C5 18 22 5 46 3Z' fill='%23F6A606'/></svg>") no-repeat left 21% bottom -66px/104px 96px}
body .elementor-241 .elementor-element-8d729f9 > .e-con-inner{
  position:relative;z-index:1}

@media (max-width:860px){
  body .elementor-241 .elementor-element-8d729f9{
    padding-top:clamp(72px,16vw,120px) !important}
  body .elementor-241 .elementor-element-8d729f9::after{
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0,87.9C45,87.9 45,96.1 91,96.1C136,96.1 136,100.0 182,100.0C227,100.0 227,97.6 273,97.6C318,97.6 318,90.0 364,90.0C409,90.0 409,78.6 455,78.6C500,78.6 500,64.9 545,64.9C591,64.9 591,50.5 636,50.5C682,50.5 682,37.1 727,37.1C773,37.1 773,25.4 818,25.4C864,25.4 864,12.7 909,12.7C955,12.7 955,0.0 1000,0.0L1000,0L0,0Z' fill='%23ffffff'/></svg>") no-repeat left top/100% clamp(40px,10vw,68px),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M50 2C74 2 98 22 97 50C96 78 74 98 48 97C22 96 2 74 3 48C4 22 26 2 50 2Z' fill='%2364B667'/></svg>") no-repeat left -64px bottom -84px/150px 138px,
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M46 3C72 0 98 24 98 52C98 79 74 99 46 97C19 95 1 72 3 44C5 18 22 5 46 3Z' fill='%23F6A606'/></svg>") no-repeat left 62% bottom -70px/92px 86px}
}
/* ===== Ende Fusszone ===== */


/* ============================================================
   Mobiles Menue: Burger sichtbar machen (25.08.2026)
   MW: 'das hamburger menue mobile ist nicht gut erkennbar
   durch den kontrast'.

   Der Burger lief auf Elementors Grundeinstellung:
     Farbe  #33373D  - Elementor-Grau, nicht Marke
     Symbol 22 px    - klein
     Flaeche rgba(0,0,0,.05) - truebes Grau, macht es matschig
     Schaltflaeche 33 px - unter den 44 px, die als Mindestmass
                          fuer Fingerbedienung gelten

   Jetzt Petrol, groesser, ohne Graufilm, mit klarem Tastfeld.
   !important, weil Elementors Stylesheet nach dem Child-Theme
   laedt - siehe Fusszone-Block.
   ============================================================ */
/* 🛑 display NICHT global setzen. Elementor blendet den Burger
   oberhalb von 1024 px mit display:none aus; eine globale Regel
   hier schlaegt das und der Burger stand neben dem vollen Menue.
   Deshalb sitzt die Anzeige unten in der Medienabfrage. */
body .elementor-location-header .elementor-menu-toggle{
  color:#134C41 !important;
  background-color:transparent !important;
  width:44px;height:44px;
  border-radius:8px;
  transition:background-color .15s ease}
@media (max-width:1024px){
  body .elementor-location-header .elementor-menu-toggle{
    display:flex;align-items:center;justify-content:center}
}
body .elementor-location-header .elementor-menu-toggle svg,
body .elementor-location-header .elementor-menu-toggle i{
  width:27px;height:27px;font-size:27px;fill:currentColor}
body .elementor-location-header .elementor-menu-toggle:hover{
  background-color:#E0EFEC !important}
/* Sichtbarer Tastaturfokus - vorher gab es keinen */
body .elementor-location-header .elementor-menu-toggle:focus-visible{
  background-color:#E0EFEC !important;
  outline:2px solid #F6A606;outline-offset:2px}
/* Geoeffneter Zustand: Schliessen-Symbol gleich behandeln */
body .elementor-location-header .elementor-menu-toggle.elementor-active{
  background-color:#E0EFEC !important}
/* ===== Ende Mobiles Menue ===== */


/* ============================================================
   Burger im FUSS sichtbar machen (25.08.2026)
   MW: 'beim burger menue meine ich den kontrast im footer in
   der mobile ansicht'.

   Der Fuss hat ein zweites Menue-Widget (f2baef1, 'Rechtliches'),
   das mobil ebenfalls zum Burger einklappt. Es lief auf derselben
   Elementor-Grundeinstellung #33373D - nur steht es hier auf dem
   Petrol-Fuss statt auf weissem Grund.

   Gemessen: Kontrast 1,22 : 1. Der Mindestwert fuer Bedienelemente
   liegt bei 3 : 1. Praktisch unsichtbar.
   Jetzt Weiss auf Petrol: 9,8 : 1.
   ============================================================ */
body .elementor-location-footer .elementor-menu-toggle{
  color:#FFFFFF !important;
  background-color:transparent !important;
  width:44px;height:44px;
  border-radius:8px;
  transition:background-color .15s ease}
body .elementor-location-footer .elementor-menu-toggle svg,
body .elementor-location-footer .elementor-menu-toggle i{
  width:27px;height:27px;font-size:27px;fill:currentColor}
body .elementor-location-footer .elementor-menu-toggle:hover,
body .elementor-location-footer .elementor-menu-toggle.elementor-active{
  background-color:rgba(255,255,255,.14) !important}
body .elementor-location-footer .elementor-menu-toggle:focus-visible{
  background-color:rgba(255,255,255,.14) !important;
  outline:2px solid #F6A606;outline-offset:2px}
/* Die aufgeklappte Liste steht ebenfalls auf Petrol */
body .elementor-location-footer .elementor-nav-menu--dropdown a{
  color:#FFFFFF !important}

/* ------------------------------------------------------------
   Fuss-Menue bleibt offen (25.08.2026)
   MW: 'kann ruhig direkt offen sichtbar sein, muss kein burger
   menue sein sondern kann direkt verlinkt werden'.

   Dahinter stehen Kontakt, Impressum, Datenschutz und Qualitaet.
   Das DDG verlangt, dass das Impressum leicht erkennbar und
   unmittelbar erreichbar ist - hinter einem unbeschrifteten
   Symbol war es das nicht.

   Elementor blendet mobil die Hauptliste aus und zeigt den
   Burger. Hier genau umgekehrt.
   ------------------------------------------------------------ */
@media (max-width:1024px){
  body .elementor-location-footer .elementor-menu-toggle{display:none !important}
  body .elementor-location-footer .elementor-nav-menu--main{display:block !important}
  body .elementor-location-footer .elementor-nav-menu--dropdown{display:none !important}
  body .elementor-location-footer .elementor-nav-menu--main .elementor-nav-menu a{
    color:#FFFFFF !important;padding-left:0;padding-right:0}
}
/* ===== Ende Burger im Fuss ===== */


/* ============================================================
   Qualitaet: Schneidanlage als Bewegtbild (25.08.2026)
   Der Clip liegt ueber dem Standbild derselben Anlage in
   figure.kf-band. Das Bild bleibt darunter stehen und traegt
   den Alt-Text. Erst wenn das Video spielen kann, blendet es
   sich darueber. Eingehaengt von kf_qualitaet_schneidfilm()
   in functions.php, nur auf Seite 130.
   ============================================================ */
.kf-band--film{ position:relative; }
.kf-band--film .kf-band-film{
  position:absolute; top:0; left:0; width:100%; height:auto;
  aspect-ratio:21/9; object-fit:cover; display:block;
  border-radius:22px; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .6s ease;
}
.kf-band--film.kf-film-da .kf-band-film{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .kf-band--film .kf-band-film{ display:none; }
}


/* ============================================================
   Ansprechpartner: Ihre Ansprechpartner (26.08.2026)
   Rollenkarten auf Seite 131. Bild, Rolle, Name. Kein Satz zur
   Taetigkeit mehr (MW 26.08.) — die Zuordnung macht die Rolle.

   ERWEITERN: eine Karte kopieren und drei Dinge aendern —
   Bild-URL, Rolle, Name. Wer noch kein Portrait hat, bekommt
   statt <img> ein <span class="kf-team-bild kf-team-bild--leer">
   mit den Initialen. Das Raster ordnet sich von selbst neu.
   ============================================================ */
.kf-team{ display:grid; gap:20px; margin:2rem 0 1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } /* hoechstens drei nebeneinander, auch wenn Karten dazukommen */
.kf-team-karte{ background:#E0EFEC; border-radius:22px; padding:26px 22px 24px;
  text-align:center; }

/* Bild und Leerstelle teilen sich die Masse, damit die Karten
   auch gemischt auf einer Linie sitzen. */
.kf-team-karte .kf-team-bild{ display:block; width:120px; height:120px;
  margin:0 auto .9rem; border-radius:999px; object-fit:cover; }
.kf-team-karte .kf-team-bild--leer{ display:flex; align-items:center;
  justify-content:center; background:#C4DED7; color:#134C41;
  font-size:1.6rem; font-weight:700; letter-spacing:.04em; }

.kf-team-karte .kf-team-rolle{ display:block; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#237A6D; margin-bottom:.35rem; }
/* minmax(0,…) und der Wortumbruch verhindern, dass ein langer Name
   die Spalte aufzieht. Ohne beides sprengt "Jerome Thielemeyer" bei
   390 px das Raster um 10 px. Gilt fuer jede spaeter ergaenzte Karte. */
.kf-team-karte .kf-team-name{ display:block; font-size:1.12rem; font-weight:700;
  color:#134C41; line-height:1.25; overflow-wrap:anywhere; }
.kf-team-weg{ font-size:.95rem; line-height:1.6; color:#134C41; margin:0 0 2.4rem; }
.elementor .kf-team-weg a{ color:#134C41; text-decoration:underline; }
@media (max-width:640px){
  .kf-team{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .kf-team-karte{ padding:20px 14px 18px; }
  .kf-team-karte .kf-team-bild{ width:92px; height:92px; }
}


/* ============================================================
   Formular-Absender: Textfarbe auch am inneren span (25.08.2026)
   Elementor 4 legt den Beschriftungstext in ein eigenes span und
   faerbt es weiss. Die CD-Regel am Knopf allein bleibt wirkungslos,
   der Absender stand dadurch weiss auf Mango. Kennung: kf-knopftext-erben
   ============================================================ */
.elementor .kf-sort-buehne .elementor-form .elementor-button[type="submit"] span,
.elementor .kf-sort-buehne .elementor-form .elementor-button[type="submit"] .elementor-button-text{
  color:#412402;
}



/* ============================================================
   Bildbaender: Standbild vollflaechig mit Parallax   kf-bildband
   Angelegt 27.08.2026 mit den neuen Betriebsaufnahmen.
   Gleiche Buehne wie die Film-Platten (.kf-platte), nur mit einem
   Bild statt eines Videos: kein Ladegewicht, laeuft ueberall.

   --kf-pp kommt aus dem Skript und laeuft von 0 (Band kommt unten
   herein) bis 1 (Band geht oben hinaus). Das Bild ist hoeher als
   sein Rahmen und wandert gegenlaeufig darin.

   Mit .kf-bildband--zoom kommt eine langsame Annaeherung dazu
   (Ken Burns). Sparsam einsetzen, sonst wird die Seite unruhig.
   ============================================================ */
.kf-bildband{ --kf-pp:.5;
  position:relative; margin:56px calc(50% - 50vw); width:100vw;
  background:#0A2E28; overflow:hidden;
  height:clamp(280px,36vw,440px); }
.elementor .kf-bildband img{ position:absolute; left:0;
  width:100%; top:-11%; height:122%;
  object-fit:cover; border-radius:0; display:block;
  transform:translate3d(0,calc((var(--kf-pp) - .5) * -74px),0);
  will-change:transform; }
.elementor .kf-bildband--zoom img{
  transform:translate3d(0,calc((var(--kf-pp) - .5) * -74px),0)
            scale(calc(1.04 + var(--kf-pp) * .06)); }

/* Ein leiser Verlauf am unteren Rand traegt die Kante zum Text hin.
   Ohne ihn stoesst das Bild hart auf die Seitenfarbe. */
.kf-bildband::after{ content:''; position:absolute; inset:auto 0 0 0;
  height:38%; pointer-events:none;
  background:linear-gradient(to top, rgba(10,46,40,.34), rgba(10,46,40,0)); }

/* Bildunterschrift im Band, unten links, nur wo sie etwas erklaert. */
.kf-bildband figcaption{ position:absolute; left:0; right:0; bottom:0;
  margin:0; padding:14px clamp(16px,6vw,72px);
  color:#FFFFFF; font-size:.9rem; line-height:1.4; z-index:2;
  text-shadow:0 1px 12px rgba(10,46,40,.55); }

@media (max-width:760px){
  .kf-bildband{ height:clamp(200px,52vw,300px); margin:38px calc(50% - 50vw); }
  .kf-bildband figcaption{ font-size:.82rem; padding:12px 18px; }
}
@media (prefers-reduced-motion:reduce){
  .elementor .kf-bildband img{ top:0; height:100%; transform:none; }
  .elementor .kf-bildband--zoom img{ transform:none; }
}



/* ============================================================
   Bewegung fuer die ganze Seite   kf-lebendig      27.08.2026
   Auftrag: "belebe die seite ... hochwertig, frisch, dynamisch".

   Zwei Dinge, beide zurueckhaltend:
   1. Bildgruppen tauchen beim Scrollen auf. Die Animation dafuer
      (kf-auftauchen) gab es schon, sie lag aber nur als Opt-in auf
      der Unternehmensseite. Hier wird sie auf die wiederkehrenden
      Bausteine gelegt, damit die Seite eine Handschrift bekommt.
   2. Bilder in klickbaren Karten kommen bei Hover leise naeher.

   Beides ist an @supports und prefers-reduced-motion gebunden:
   ohne Bewegungserlaubnis oder Browser-Unterstuetzung steht alles
   ruhig da. Es gibt keinen Zustand, in dem etwas unsichtbar bleibt.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .elementor .kf-paar,
    .elementor .kf-menschen,
    .elementor .kf-band,
    .elementor .kf-bildband,
    .elementor .kf-sort-beleg,
    .elementor .kf-gruppen,
    .elementor .kf-zeichen{
      /* 02.10.2026 abgeschaltet (E5; MW: "das Bild unter Unternehmen ist nicht wirklich klar") */ animation: none;
    }
  }
}

/* Hover: das Bild kommt leise naeher, der Rahmen bleibt stehen.
   Setzt overflow:hidden am Rahmen voraus - Elementor setzt an
   .elementor img ohnehin border-radius:0, die Rundung traegt der
   Rahmen. Nur fuer Zeigergeraete, damit auf dem Handy nichts
   haengen bleibt. */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .elementor .kf-gruppe{ overflow: hidden; }
  .elementor .kf-gruppe img,
  .elementor .kf-paar figure img,
  .elementor .kf-menschen figure img{
    transition: transform .55s cubic-bezier(.2,.6,.2,1);
  }
  .elementor .kf-gruppe:hover img,
  .elementor .kf-paar figure:not(:has(figcaption)):hover img,
  .elementor .kf-menschen figure:not(:has(figcaption)):hover img{
    transform: scale(1.045);
  }
  /* Der Rahmen schneidet den Zoom sauber ab.
     ⚠️ NUR bei Bildern ohne Unterschrift: Steht eine figcaption in der
     figure, liegt sie mit im gerundeten, beschnittenen Bereich - der
     erste Buchstabe wurde dadurch von der Ecke angeschnitten
     ("'Jnsere Packlinie", gemeldet 27.08.2026). Mit Unterschrift bleibt
     die figure offen und der Zoom entfaellt. */
  .elementor .kf-paar figure:not(:has(figcaption)),
  .elementor .kf-menschen figure:not(:has(figcaption)){
    overflow: hidden; border-radius: 20px;
  }
}



/* ============================================================
   Startseiten-Variante: Schleier etwas kraeftiger  27.08.2026
   Kennung: kf-variante-schleier

   Der Sonnenaufgang im Kartoffelfeld ist deutlich heller als die
   Schaelanlage der Startseite. Mit dem Standardschleier (.55) geht
   die Zeile "Familienbetrieb mit eigenem Anbau" darin unter -
   sie ist Petrol-hell auf hellem Morgenlicht. Nur auf dieser Seite
   etwas mehr Schleier, damit Badge und Absatz tragen.
   ============================================================ */
.elementor-1098 .elementor-element-92cda42{
  --kf-schleier-start:.66;
}
@media (max-width:860px){
  .elementor-1098 .elementor-element-92cda42{
    --kf-schleier-start:.76;
  }
}

/* ============================================================
   Ruhezustand fuer scrollgesteuerte Abschnitte
   Angelegt 07.09.2026. Befund: Vault 36_Website_Wow_Ideen_2026-09-06,
   Umsetzung: Block 3 aus 37_Livegang_Plan_2_Wochen.

   Grundsatz: Die Seite muss sich auch ohne Scrollen lesen lassen.
   Die Einblendungen des Frische-Wegs greifen deshalb erst, wenn sich
   JavaScript ueber die Klasse .kf-anim am <html> angemeldet hat. Faellt
   das Skript aus, liefert der Cache eine alte Seite oder rendert ein
   Dienst die Seite ohne Scroll (Vorschaubilder, Druck), stehen die
   Stationen sichtbar da statt auf opacity 0.
   ============================================================ */
html:not(.kf-anim) .kfw-karte { opacity: 1; transform: none; }
html:not(.kf-anim) .kfw-st { opacity: 1; }
html:not(.kf-anim) .kfw-laeufer { display: none; }

/* Mitfahren: auf dem Telefon wird ueber eine Bildschirmhoehe gepinnt,
   nicht ueber 1,3. Buehne ist 100svh minus Kopf, dazu eine Hoehe
   Scrollweg — mehr traegt das Bild auf dem Telefon nicht. */
@media (max-width:860px){
  .kf-fahrt { height: 190vh; }
}

/* Ohne Skript gibt es kein Scrubbing. Dann traegt die Bühne auch keine
   Scrollstrecke: Film als normales Standbild, Sektion so hoch wie ihr
   Inhalt. Gleiche Haltung wie im reduced-motion-Block weiter oben. */
html:not(.kf-anim) .kf-fahrt { height: auto; }
html:not(.kf-anim) .kf-fahrt-buehne { position: static; height: auto; min-height: 56vh; }
html:not(.kf-anim) .kf-fahrt-film { position: relative; height: auto; aspect-ratio: 16/9; }
html:not(.kf-anim) .kf-fahrt-fortschritt { display: none; }
/* ===== Ende Ruhezustand ===== */

/* ============================================================
   Vollbreite ohne Scrollleisten-Ueberlauf (07.09.2026)
   100vw zaehlt die Scrollleiste mit, clientWidth nicht. Auf dem
   Desktop mit schmalem Fenster ragen die Baender dadurch acht
   Pixel nach rechts heraus und die Seite laesst sich seitlich
   schieben. --kf-vw traegt die echte Breite, gesetzt aus dem
   Kopf-Skript in der functions.php. Faellt sie aus, gilt 100vw
   wie bisher.
   ============================================================ */
.kf-platte, .kf-bildband {
  width: var(--kf-vw, 100vw);
  margin-left: calc(50% - var(--kf-vw, 100vw) / 2);
  margin-right: calc(50% - var(--kf-vw, 100vw) / 2);
}

/* Dieselbe Rechnung fuer die Zeitleiste des Frische-Wegs. Ihre Regeln
   stehen im HTML-Widget der Seite und laden spaeter, deshalb hier eine
   Stufe hoeher mit html davor. */
html .kfw, html .kfw-held {
  /* Elementor haelt den Ausbruch mit .elementor-249 .elementor-element-a61f1cf .kfw
     fest, das sind vier Klassen. Statt diese Kette nachzubauen und damit an eine
     Widget-ID zu binden, steht hier ausnahmsweise !important. */
  width: var(--kf-vw, 100vw) !important;
  margin-left: calc(50% - var(--kf-vw, 100vw) / 2) !important;
  margin-right: calc(50% - var(--kf-vw, 100vw) / 2) !important;
}

/* ============================================================
   Frische-Weg: Bild je Station (07.09.2026)
   Die fuenf Karten trugen nur Text. Das Bild sitzt oben in der
   Karte, im gleichen Ausschnitt wie die Baender auf den
   Warengruppenseiten.
   ============================================================ */
.kfw-karte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 14px;
}

/* ============================================================
   404-Wegweiser (07.09.2026)
   Sitzt unter dem duerren Theme-Text. Der zweite Absatz ist der
   Hinweis auf die Landmaschinenfabrik und darf ruhig leiser sein.
   ============================================================ */
.kf-404 {
  max-width: 640px;
  margin: 8px auto 56px;
  padding: 0 24px;
  font-size: 17px;
  line-height: 1.6;
}
.kf-404 p { margin: 0 0 14px; }
.kf-404 a { color: #0A2E28; text-decoration: underline; text-underline-offset: 3px; }
.kf-404 .kf-404-nachbar {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #D8E5E1;
  font-size: 15px;
  color: #4A5654;
}

/* Wegweiser zur Landmaschinenfabrik, unten auf Karriere und Kontakt.
   Leiser als der Fliesstext: Wer ihn braucht, findet ihn; wer nicht,
   liest darueber hinweg. */
.kf-nachbar {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid #D8E5E1;
  font-size: 14px;
  line-height: 1.55;
  color: #4A5654;
}

/* ============================================================
   Frische-Automaten: Live-Bestand (07.09.2026)
   Eine Karte je Automat. Der Punkt links traegt die Aussage,
   die Zahl daneben die Begruendung.
   ============================================================ */
.kf-automaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 28px 0 8px;
}
.kf-automat {
  background: #fff;
  border: 1px solid #D8E5E1;
  border-radius: 14px;
  padding: 22px 24px;
}
.kf-automat-ort {
  margin: 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4A5654;
}
.elementor .kf-automat-name {
  margin: 6px 0 2px;
  font-size: 21px;
  line-height: 1.25;
  color: #0A2E28;
}
.kf-automat-adresse { margin: 0; font-size: 15px; color: #4A5654; }
.kf-automat-zahl {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 6px;
  font-size: 17px;
  font-weight: 500;
  color: #0A2E28;
}
.kf-punkt {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #C6DAD4;
}
.kf-automat--voll .kf-punkt { background: #2F7D57; }
.kf-automat--teils .kf-punkt { background: #F6A606; }
.kf-automat--leer .kf-punkt { background: #C6DAD4; }
.kf-automat-zeile { margin: 0 0 4px; font-size: 14px; color: #4A5654; }
.kf-automat-stand { color: #7A8785; }

/* Streifen auf der Startseite: gleicher Innenabstand wie der Inhalt,
   damit er nicht wie ein Fremdkoerper unter dem Petrol-Block haengt. */
.kf-automaten-start {
  max-width: min(1000px, 92vw);
  margin: 44px auto 8px;
}
.kf-automaten-kopf {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4A5654;
}
.kf-automaten-start .kf-automaten { margin-top: 14px; }

/* ============================================================
   Social-Profile in der Fusszeile (08.09.2026)
   Die Symbole sind Masken statt Bilder: So erben sie die
   Schriftfarbe der Fusszeile und bleiben bei jedem Hintergrund
   lesbar. Inline-SVG ginge auch, aber TinyMCE wirft es aus dem
   Textwidget wieder heraus -- am 08.09. ausprobiert.
   Beide Adressen stehen auch im Organization-Schema (sameAs).
   ============================================================ */
.kf-social {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
}
.elementor .kf-social a {
  /* Ohne das erben die Links die Elementor-Linkfarbe -- und die ist
     dasselbe Petrol wie der Grund der Fusszeile. Am 08.09. waren die
     Symbole deshalb unsichtbar. inherit nimmt die helle Schriftfarbe
     der Fusszeile, und die Masken folgen ueber currentColor mit. */
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.elementor .kf-social a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kf-social a::before {
  content: "";
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.kf-social a[href*="instagram"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM17.5 6a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM17.5 6a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");
}
.kf-social a[href*="linkedin"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5zM3 9.5h4v11H3zm7 0h3.8v1.5h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.75v5.7h-4v-5.05c0-1.2-.02-2.75-1.7-2.75-1.7 0-1.96 1.3-1.96 2.66v5.14h-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5zM3 9.5h4v11H3zm7 0h3.8v1.5h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.75v5.7h-4v-5.05c0-1.2-.02-2.75-1.7-2.75-1.7 0-1.96 1.3-1.96 2.66v5.14h-4z'/%3E%3C/svg%3E");
}

/* Zwei Wege aus der Fusszeile heraus (08.09.2026): direkt zur
   Vorbestellung und zum Bestand der Automaten. Gleiche Farbe wie der
   uebrige Fusstext, sonst verschwinden sie im Petrol wie zuvor die
   Social-Symbole. */
.kf-fuss-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}
.elementor .kf-fuss-links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28);
  align-self: flex-start;
  padding-bottom: 2px;
}
.elementor .kf-fuss-links a:hover { border-bottom-color: #F6A606; }
.kf-fuss-links a::after { content: " \2192"; }

/* Bewegtbild in den Stationskarten des Frische-Wegs */
.kfw-karte video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: 10px; margin: 0 0 14px; background: #0A2E28; }

/* Google-Bewertung als Zeile */
.kf-bewertung { display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem .8rem;
  margin:1.6rem 0; padding:.85rem 1.15rem; border:1px solid #E0EFEC; border-radius:12px;
  background:#F6FAF9; color:#134C41; font-size:.95rem; line-height:1.5; }
.kf-bewertung__wert { font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.kf-bewertung__text { color:#134C41; }
.kf-bewertung a { color:#134C41; text-decoration:none; border-bottom:1px solid #F6A606; }
.kf-bewertung a:hover { border-bottom-color:#134C41; }
.kf-bewertung__stand { color:#237A6D; font-size:.8rem; }

/* Vier Kennzahlen: zwei mal zwei statt drei plus eins */
.kf-sort-merkmale--vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* Beitraege unter Aktuelles */
.kf-beitrag-datum { margin:0 0 .4rem; font-size:.76rem; letter-spacing:.09em;
  text-transform:uppercase; color:#237A6D; }
.kf-beitrag + .kf-beitrag { margin-top:3.2rem; padding-top:3.2rem; border-top:1px solid #E0EFEC; }

/* Kennzeichnung KI-erzeugter Inhalte nach EU-KI-Verordnung.
   02.10.2026 (GF ueber MW): kleiner, ohne Pille. Ein kleines "KI"-Zeichen plus Text,
   gut lesbar, aber zurueckhaltend. */
.kf-ki-hinweis { display:inline-flex; align-items:center; gap:.3rem; margin:.5rem 0 0;
  padding:0; border:0; border-radius:0; background:none; color:#237A6D;
  font-size:.7rem; line-height:1.3; letter-spacing:.01em; }
.kf-ki-hinweis::before { content:"KI"; font-weight:700; font-size:.6rem; letter-spacing:.05em;
  border:1px solid currentColor; padding:0 3px; border-radius:3px; background:none; color:inherit; }
.kf-band .kf-ki-hinweis, .kf-bildband .kf-ki-hinweis { margin-top:.4rem; }

/* KI-Kennzeichnung als Ueberlagerung auf Bild oder Film */
.kf-ki-lage { position: relative; }
.kf-ki-hinweis--ecke {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  margin: 0; padding: 2px 6px; border-radius: 4px;
  background: rgba(10,46,40,.55); color: rgba(255,255,255,.94);
  font-size: 10.5px; backdrop-filter: blur(4px);
}
.kf-ki-hinweis--ecke::before { color: #fff; }
@media (max-width: 600px) {
  .kf-ki-hinweis--ecke { right: 8px; bottom: 8px; font-size: 10px; }
}

/* Im Hero sitzt der Hinweis oben: der weisse Abschluss ueberdeckt die untere Ecke. */
.kf-hero-film-wrap .kf-ki-hinweis--ecke { top: 16px; bottom: auto; }


/* Hero-Fliesstext: Zeilenlaenge begrenzen. Der Schleier ist rechts bewusst duenn,
   damit das Bild durchkommt - Text darf deshalb nicht bis dorthin laufen.
   Gemessen: volle Breite 4,05:1, so 4,90:1 (WCAG AA verlangt 4,5).
   Nebeneffekt: rund 80 statt 140 Zeichen je Zeile. */
.elementor .kf-film-an .e-con-inner .elementor-widget-text-editor.elementor-widget-text-editor { max-width: 720px; }
.elementor .kf-film-an .e-con-inner .elementor-widget-text-editor.elementor-widget-text-editor,
.elementor .kf-film-an .e-con-inner .elementor-widget-text-editor.elementor-widget-text-editor p { color: #fff; }


/* Sprungziel des Hero-Knopfs. Die Kopfzeile ist sticky und 126 px hoch,
   ohne Abstand landet die Ueberschrift darunter. */
#frische-erleben { scroll-margin-top: 150px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Rezeptideen: Karten aus dem eigenen Sortiment */
.kf-saison { margin: 2.2rem 0 1rem; }
.kf-saison-pillen { display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 2.4rem; padding:0; list-style:none; }
.kf-saison-pillen li { padding:.34rem .85rem; border:1px solid #E0EFEC; border-radius:999px; background:#fff; color:#134C41; font-size:.86rem; line-height:1.4; }

.kf-rezepte { display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin:1.4rem 0 2.6rem; }
.kf-rezept { background:#F6FAF9; border:1px solid #E0EFEC; border-radius:18px; padding:24px 22px 22px; }
.kf-rezept h3 { margin:0 0 .55rem; font-size:1.12rem; line-height:1.3; color:#134C41; }
.kf-rezept__zeit { display:inline-block; margin:0 0 .75rem; padding:2px 10px; border-radius:999px; background:#E0EFEC; color:#134C41; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.kf-rezept p { margin:0 0 .85rem; font-size:.93rem; line-height:1.55; }
.kf-rezept__aus { margin:0 0 .4rem; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#237A6D; }
.kf-rezept ul { margin:0 0 .95rem; padding-left:1.15rem; font-size:.9rem; line-height:1.5; }
.kf-rezept li { margin-bottom:.22rem; }
.kf-rezept__schritte { margin:0; font-size:.9rem; line-height:1.6; color:#2A4A44; }
.kf-rezept a { color:#134C41; }

/* Rezeptkarten mit Bild */
.kf-rezept img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:12px; margin:0 0 16px; background:#E0EFEC; }
.kf-rezept { padding-top:20px; }


/* Unternehmen: der Erklaerfilm ist knapp eine Minute lang und traegt Text.
   Bei 260vh rauscht er durch (33 px Scrollen je Videosekunde), die Einblendungen
   waeren nicht lesbar. 450vh ergeben rund 75 px je Sekunde. */
.page-id-9 .kf-fahrt { height: 450vh; }
@media (max-width: 782px) { .page-id-9 .kf-fahrt { height: 380vh; } }

/* ============================================================
   Lesbarkeit und Mobilansicht, Durchsicht 28.09.2026 (freigegeben MW)
   ============================================================ */

/* Bildbaender: Unterschrift stand weiss direkt auf dem Foto, der
   Verlauf mit 34 % reichte auf hellen Bildstellen nicht. */
.kf-bildband::after{ height: 58%; background: linear-gradient(to top, rgba(10,46,40,.82), rgba(10,46,40,.42) 52%, rgba(10,46,40,0)); }
.kf-bildband figcaption{ font-style: normal; text-shadow: 0 1px 3px rgba(10,46,40,.7); }
@media (max-width: 760px){
  .kf-bildband figcaption{ font-size: .86rem; line-height: 1.4; padding: 12px 18px 14px; }
}

/* Links im Fliesstext dunkler Abschlusskaesten waren petrol auf petrol
   (z. B. "Anfrageformular" auf /ansprechpartner/) */
.kf-sort-abschluss p:not(:last-child) a{ color: #F6A606; text-decoration: underline; text-underline-offset: 3px; }

/* Rollen auf den Personenkarten wurden mobil abgeschnitten ("PRODUKTENTWICKLUN") */
.kf-team-rolle{ overflow-wrap: anywhere; }
@media (max-width: 600px){
  .kf-team-rolle{ letter-spacing: .05em; font-size: .64rem; white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Zeitstempel der Automaten: Kontrast 3,7 : 1 war zu schwach */
.kf-automat-stand{ color: #134C41; }

/* Ueberschriften: nicht mitten in kurzen Woertern trennen (Roh-ware) */
h1, h2, h3, h4, .elementor-heading-title{ hyphenate-limit-chars: 10 4 4; }
.elementor-location-footer p{ hyphens: manual; }

/* Datenschutz-Tabelle: mobil als Karten statt seitlich abgeschnitten */
@media (max-width: 600px){
  .kf-tabelle{ overflow: visible; }
  .kf-tabelle table, .kf-tabelle tbody, .kf-tabelle tr, .kf-tabelle td{ display: block; width: 100%; }
  .kf-tabelle thead{ display: none; }
  .kf-tabelle tr{ border: 1px solid #D4E3E0; border-radius: 14px; padding: 12px 16px; margin: 0 0 12px; background: #fff; }
  .kf-tabelle td{ border: 0 !important; padding: 3px 0 !important; background: none !important; }
  .kf-tabelle td:first-child{ font-weight: 700; color: #134C41; }
  .kf-tabelle td:nth-child(2)::before{ content: "Aufgabe: "; font-weight: 600; color: #237A6D; }
  .kf-tabelle td:nth-child(3)::before{ content: "Ort der Verarbeitung: "; font-weight: 600; color: #237A6D; }
}

/* Erklaerfilm auf /unternehmen/: Titel und Stationen stehen im Film selbst,
   die Textzeile unten links waere doppelt. Fuer Screenreader bleibt sie da. */
.page-id-9 .kf-fahrt-verlauf{ display: none; }
.page-id-9 .kf-fahrt-text{ position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bildbaender innerhalb von Kaesten (kf-sort-buehne, kf-sort-abschluss,
   kf-beitrag) nicht auf Fensterbreite ziehen. Der Kasten schneidet ab, die
   Unterschrift begann links ausserhalb des sichtbaren Bildes (MW-Screenshot
   28.09., Industrie). Betroffen: Industrie, LEH, Werksvorbestellung,
   Aktuelles (2x), mobil und am Desktop. */
.kf-sort-buehne .kf-bildband,
.kf-sort-abschluss .kf-bildband,
.kf-beitrag .kf-bildband{
  width: auto; margin-left: 0; margin-right: 0; border-radius: 18px;
}

/* Hauptmenue mit sieben Eintraegen (Pro Bio seit 28.09.): zwischen Tablet und
   1300 px wird es eng, der Werksvorbestellungs-Knopf lief bei 1200 px ueber den
   Rand. Etwas weniger Innenabstand genuegt. */
@media (min-width: 1025px) and (max-width: 1300px){
  .elementor-location-header .elementor-nav-menu--main .elementor-item{ padding-left: 8px !important; padding-right: 8px !important; }
}

/* Fusszeile mobil: "Werksvorbestellung Abholzeiten" wurde mitten im Wort getrennt */
@media (max-width: 767px){
  .elementor-location-footer .elementor-heading-title{ font-size: 22px !important; hyphens: manual; -webkit-hyphens: manual; }
}

/* KF-DESIGN Anfang -- erzeugt von website/design/bauen.py, nicht von Hand aendern
   Design "ruhig" fuer alle (MW 12.10.2026: "ja machen", GF hat vorlaeufig
   freigegeben). Quelle: website/design-vorschau/vorschau.css, ohne html.kf-neu.
   Am selben Tag zurueckgenommen, weil schlechter lesbar (MW): Silbentrennung,
   Rand statt Schatten, engere Ueberschriften, Condensed-Ueberzeilen, Startbild-
   Etikett ohne Pille. Die Fusszeile behaelt ihre Zone (KF-FUSSZONE). */
/* --- 1. Dekor raus --------------------------------------------------- */
/* Wellenkanten (Hero, Seitenkoepfe) */
.elementor-shape { display: none !important; }
/* Wellenbaender und weisse Wellenkante im Hero: statt der Wellen ein gerader
   Verlauf unten, damit die Belegzeile lesbar bleibt */
.elementor-element-92cda42::before {
  background: linear-gradient(to top, rgba(10,46,40,.6) 0%, rgba(10,46,40,0) 45%) !important; }
.elementor-element-92cda42::after,
.elementor-element-213ad7f::after,
.kf-sort-abschluss::before { content: none !important; background: none !important; }
/* Gemuese-Skizzen */
.kf-skizze { display: none !important; }
/* Drei Wege: kleinere Ecken, Schatten und farbige Oberkante bleiben (MW 12.10.) */
.elementor-element-890d165,
.elementor-element-e176005,
.elementor-element-85d7bd5 { border-radius: 10px !important; }

/* Karten: kleinere Ecken, Schatten wie vorher */
.kf-sort-karte,
.elementor .kf-gruppe { border-radius: 10px !important; }

/* --- 2. Flaechen statt Kaesten --------------------------------------- */
/* Farbflaechen bleiben (MW 02.10.: "mehr Elemente wie in Bild 3 ... klare farbliche Kontraste"),
   nur die Ecken werden kleiner */
.kf-sort-buehne { border-radius: 14px !important; }
.kf-sort-merkmal { border-radius: 10px !important; }
/* Eigener Anbau / Verarbeitung / Logistik: weisse Kaesten bleiben (MW mag Bild 3) */
/* Grosse Flaechen: Ecken 12 statt 26 bis 28 px */
.kf-sort-abschluss,
.kf-start-b2b,
.kf-merk-hinweis,
.elementor-element-9879a7c { border-radius: 12px !important; }
/* Bilder und Filme: 10 px statt 18 bis 22 px */
.elementor-widget-image img,
.kf-ki-lage, .kf-ki-lage video,
.kf-startleute-bilder img,
.kf-kat-formen img,
.kf-paar img, .kf-band img, .kf-bildband img { border-radius: 10px !important; }
/* Knoepfe: leicht gerundete Rechtecke statt Pillen */
.elementor-button,
.kf-sort-knopf,
.kf-merken,
.kf-merk-weiter,
.elementor .kf-sort-buehne .elementor-form .elementor-button[type="submit"] { border-radius: 6px !important; }
.kf-merk-leiste { border-radius: 10px; }
.kf-chips label span,
.kf-saison-pillen li,
.kf-rezept__zeit { border-radius: 6px !important; }
/* Rezept- und Teamkarten */
.kf-rezept { border-radius: 10px; background: #fff; }

/* --- Mango (MW 12.10.2026) ---------------------------------------------
   "Mango nur noch so sporadisch einzusetzen nimmt der Seite die Lebendigkeit."
   Mango bleibt Akzent wie bisher: auf dunklem Grund (4,9 bis 7:1), als Flaeche
   und fuer alle Handlungen. Nur wo Mango Schrift auf Weiss waere (2,1:1), steht
   Petrol-600: die Ziffern 1, 2, 3 bei Anbau, Verarbeitung und Logistik. */
.elementor-element-b08e341 strong,
.elementor-element-93fef03 strong,
.elementor-element-b5a93da strong { color: #237A6D !important; }
/* KF-DESIGN Ende */

/* kf-ohne-anfrage (09.10.2026, MW: Fuhrpark-Karte "Was anfragen?")
   Bildkarten, die kein Produkt zeigen (Anlage, Band, Fuhrpark), bekommen kein "+ Anfrage". */
.kf-sort-karte.kf-ohne-anfrage .kf-merken{ display:none !important; }

/* KF-FAHRT-TAFEL Anfang -- erzeugt von website/fahrt-tafel/bauen.py, nicht von Hand aendern */
/* Startseite, Salat-Fahrt: Text als Tafel rechts oben (11.10.2026).
   MW: "Dieser Bereich rechts stoert, platziere hier den Text mit einem Element
   geschickt, sodass man die Kisten nicht sieht." Im Querformat-Film stehen
   rechts oben gruene Kisten und ein Edelstahltisch (Bild x 70-100 %, y 0-40 %,
   Sekunde 0,5 bis 4). Die Tafel deckt diese Ecke ab, das Band bleibt frei.
   Die Tafel gibt es nur ab 861 px, darunter laeuft der Hochformat-Film
   (siehe Handy).
   Dazu (MW): dunkler Verlauf oben, auf allen Breiten, und ein Salatblatt als
   Strichzeichnung ueber dem Text, damit die Tafel nicht leer wirkt.
   Handy: Im Hochformat-Film stehen beim Uebergang ins Wasser (4,0-4,5 s) Kisten
   rechts oben. Dort wandert der Text deshalb nach oben in einen kraeftigeren
   Verlauf, der untere Verlauf entfaellt, der Salat bleibt frei. */
body.home .kf-fahrt-buehne::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  height: 26%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 46, 40, .9) 0%,
    rgba(10, 46, 40, .55) 34%, rgba(10, 46, 40, 0) 100%);
}
@media (max-width: 860px) {
  body.home .kf-fahrt-buehne { align-items: flex-start; }
  body.home .kf-fahrt-buehne::before {
    height: 46%;
    background: linear-gradient(to bottom, rgba(10, 46, 40, .92) 0%,
      rgba(10, 46, 40, .72) 45%, rgba(10, 46, 40, 0) 100%);
  }
  body.home .kf-fahrt-verlauf { display: none; }
  body.home .kf-fahrt-text { padding: 28px 20px 0; }
}
@media (min-width: 861px) {
  body.home .kf-fahrt-buehne { align-items: flex-start; }
  body.home .kf-fahrt-verlauf { display: none; }
  body.home .kf-fahrt-text {
    position: absolute; top: 0; right: 0; z-index: 2;
    width: max(32%, 340px); max-width: none; min-height: 68%;
    margin: 0; padding: 56px clamp(24px, 3vw, 48px) clamp(28px, 3.4vw, 52px);
    display: flex; flex-direction: column; justify-content: flex-end;
    background: rgba(19, 76, 65, .96);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom-left-radius: 28px;
    box-shadow: -18px 18px 48px rgba(10, 46, 40, .28);
  }
  body.home .kf-fahrt-text::before {
    content: ""; flex: 1 1 auto; min-height: 64px; max-height: 240px;
    margin-bottom: clamp(14px, 2.6vh, 30px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 18 76 94'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='rotate%28-12 60 64%29'%3E%3Cpath d='M60,94 Q51,95 47,87 Q37,84 36,73 Q29,66 32,56 Q30,47 37,41 Q39,32 48,30 Q53,24 60,26 Q67,24 72,30 Q81,32 83,41 Q90,47 88,56 Q91,66 84,73 Q83,84 73,87 Q69,95 60,94Z'/%3E%3Cpath d='M60 104c0-14 0-34-1-58'/%3E%3Cpath d='M59 76c-6-2-11-7-13-13'/%3E%3Cpath d='M61 76c6-2 11-7 13-13'/%3E%3Cpath d='M59 60c-5-2-8-6-10-11'/%3E%3Cpath d='M61 60c5-2 8-6 10-11'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom / contain;
  }
  body.home .kf-fahrt-text p.kf-fahrt-satz {
    font-size: clamp(24px, 2.5vw, 40px); max-width: 14ch; text-shadow: none;
  }
}
/* KF-FAHRT-TAFEL Ende */

/* KF-FOKUS Anfang (12.10.2026, BFSG, WCAG 2.4.7 und 2.4.1)
   Einheitlicher, gut sichtbarer Tastaturfokus auf hellem und dunklem Grund,
   wie in der Automaten-App: dunkler Ring am Element, weisser Ring darum.
   Einer von beiden hebt sich immer ab. !important, weil Elementor- und
   Hello-Regeln den Fokus sonst teils ausblenden. Das Sprungziel #content
   (gesetzt von kf_hauptbereich() in der functions.php) bekommt keinen Ring,
   sonst laege nach "Zum Inhalt springen" ein Rahmen um die ganze Seite. */
:focus-visible {
  outline: 2px solid #0A2E28 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px #FFFFFF !important;
}
#content[tabindex="-1"]:focus,
#content[tabindex="-1"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* KF-FOKUS Ende */

/* KF-FUSSZONE Anfang -- erzeugt von website/design/bauen.py, nicht von Hand aendern
   Fusszone der Agenturvorlage statt Ellipsen (MW 12.10.2026: "Zeichnungen im Footer
   sind aktuell auch nur Punkte und muessen naeher an die CD-Vorlage"). Oben die Welle
   mit blauer Flaeche und Konturlinie, unten Gruen und Mango mit ihren Linien, beide
   in Originalproportion, ohne Koernung (am Bildschirm unsichtbar). Ersetzt die Ellipsen aus dem Block
   "Fusszone nach dem Druck-CD" und die gestreckte Welle von 25.08. */
body .elementor-location-footer > .e-con,
body .elementor-241 .elementor-element-8d729f9 {
  background-color: #134C41 !important;
  padding-top: calc(100vw * 0.1665 + 28px) !important;
  padding-bottom: calc(100vw * 0.1124 + 12px) !important;
}
body .elementor-location-footer > .e-con::before {
  content: "" !important; position: absolute; left: 0; right: 0; top: 0 !important;
  height: auto !important; aspect-ratio: 595.276 / 122.0;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 668.0 595.276 122.0%22 preserveAspectRatio=%22none%22%3E%3Crect x=%220%22 y=%22560.089844%22 width=%22595.276%22 height=%22281.800156%22 fill=%22%23134C41%22/%3E%3Cpath d=%22M 451.5 618.574219 C 450.386719 622.335938 449.703125 626.175781 449.371094 630.183594 C 448.148438 644.992188 454.316406 660.613281 463.203125 671.101562 C 470.792969 680.066406 477.511719 683.597656 486.859375 689.554688 C 490.671875 691.984375 494.722656 694.050781 498.515625 696.492188 C 511.023438 704.539062 522.957031 714.414062 536.898438 719.554688 C 541.84375 721.378906 546.789062 722.871094 552.035156 723.542969 C 556.65625 724.132812 563.347656 723.851562 568.042969 723.058594 C 568.886719 722.917969 575.5625 721.179688 578.421875 720.160156 C 580.347656 719.472656 582.226562 718.753906 584.089844 717.859375 C 590.09375 714.972656 594.425781 711.796875 599.472656 707.238281 C 601.730469 705.199219 602.808594 704.21875 604.910156 701.882812 C 610.085938 696.132812 614.402344 689.777344 618.230469 682.9375 C 619.21875 679.882812 620.816406 676.964844 621.808594 673.921875 C 622.015625 673.285156 622.210938 672.652344 622.394531 672.03125 C 624.976562 663.324219 625.273438 656.371094 626.203125 652.957031 C 626.347656 649.429688 626.710938 645.902344 626.617188 642.378906 C 626.144531 624.765625 618.664062 607.464844 606.480469 596.359375 C 601.085938 591.4375 594.449219 587.273438 587.6875 584.820312 C 569.652344 578.265625 551.109375 581.710938 532.320312 581.605469 C 516.582031 581.515625 501.648438 578.515625 486 583.808594 C 482.816406 584.886719 479.871094 586.175781 476.878906 587.824219 C 472.390625 590.292969 469.097656 592.699219 465.289062 596.332031 C 462.8125 598.703125 460.460938 601.144531 458.480469 604.023438 C 456.722656 606.574219 454.925781 609.6875 453.6875 612.550781 C 452.824219 614.546875 452.101562 616.546875 451.5 618.574219%22 fill=%22%234B89C3%22/%3E%3Cpath d=%22M -0.00103249 0.00149093 C 9.870334 -1.457312 19.464019 -11.05882 25.025463 -18.372392 C 39.809046 -37.794422 44.596111 -59.16022 37.970876 -83.388871 C 34.517462 -96.021404 29.358852 -108.055554 23.33591 -119.702515 C 15.134541 -113.296296 5.650364 -108.337146 -1.702318 -100.804558 C -11.350757 -90.92537 -19.544304 -78.417989 -20.064467 -64.307098 C -21.667978 -20.844144 -6.505027 -4.335809 -3.239341 -0.135394 C -3.434891 0.146198 -3.685195 0.369125 -0.00103249 0.00149093 Z M -0.00103249 0.00149093 %22 transform=%22matrix(0.998785, 0, 0, -0.998785, 575.188531, 664.95852)%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.475%22 stroke-linecap=%22butt%22/%3E%3Cpath d=%22M 933.34375 349.070312 C 934.605469 323.71875 932.804688 298.515625 928.335938 272.8125 C 911.808594 177.769531 843.738281 88.738281 765.824219 36.039062 C 699.238281 -8.984375 647.699219 -21.121094 574.222656 -44.582031 C 544.257812 -54.148438 513.285156 -61.0625 483.429688 -70.730469 C 385 -102.582031 287.375 -146.84375 184.089844 -158.257812 C 147.445312 -162.300781 111.351562 -164.257812 74.605469 -160.613281 C 42.222656 -157.398438 -2.730469 -145.585938 -33.304688 -133.539062 C -38.789062 -131.382812 -43.617188 -127.394531 -45.835938 -126.429688 C -64.71875 -118.210938 -81.214844 -110.425781 -98.921875 -99.71875 C -110.855469 -92.5 -122.410156 -85.160156 -133.558594 -76.714844 C -169.511719 -49.53125 -193.601562 -23.0625 -220.238281 13.214844 C -232.15625 29.445312 -237.839844 37.222656 -248.199219 55.09375 C -273.703125 99.054688 -288.046875 126.066406 -306.890625 194.320312 C -325.730469 262.582031 -318.566406 387.484375 -295.867188 462.175781 C -273.171875 536.882812 -183.316406 669.984375 -81.960938 721.601562 C -37.089844 744.457031 14.976562 760.695312 65.007812 766 C 198.488281 780.164062 318.632812 730.652344 446.425781 703.101562 C 553.460938 680.027344 659.910156 676.5 757.316406 619.6875 C 777.121094 608.132812 794.976562 595.574219 812.539062 580.710938 C 838.878906 558.433594 857.195312 538.347656 876.960938 509.757812 C 889.832031 491.132812 901.691406 472.234375 910.324219 451.148438 C 917.984375 432.445312 924.957031 410.136719 928.578125 390.253906 C 931.097656 376.429688 932.664062 362.726562 933.34375 349.070312 %22 fill=%22%23ffffff%22/%3E%3C/svg%3E") no-repeat left top / 100% 100% !important;
  pointer-events: none; z-index: 0;
}
body .elementor-241 .elementor-element-8d729f9::after {
  content: "" !important; position: absolute; inset: auto 0 0 0 !important;
  height: auto !important; aspect-ratio: 595.276 / 66.89;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 775.0 595.276 66.89%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M 68.785156 822.019531 C 69.480469 831.285156 68.347656 840.292969 65.117188 849.039062 C 58.667969 866.484375 45.300781 874.609375 26.570312 872.140625 C 2.777344 869 -14.769531 853.785156 -20.011719 830.003906 C -22.765625 817.507812 -15.546875 805.125 -3.207031 801.765625 C 4.585938 799.644531 11.394531 796.183594 17.675781 791.039062 C 21.519531 787.886719 26.285156 785.5 31.015625 783.875 C 40.882812 780.484375 49.46875 783.628906 55.941406 791.410156 C 63.265625 800.210938 67.984375 810.355469 68.785156 822.019531%22 fill=%22%2364B667%22/%3E%3Cpath d=%22M 266.355469 839.121094 C 275.21875 853.390625 289.265625 865.71875 304.417969 877.21875 C 318.558594 887.945312 333.410156 898.398438 345.140625 911.488281 C 367.148438 936.050781 358.878906 966.984375 328.589844 979.902344 C 315.082031 985.660156 301.085938 989.425781 286.332031 989.511719 C 265.011719 989.636719 247.691406 981.03125 234.832031 964.160156 C 214.089844 936.949219 197.4375 907.394531 186.011719 875.078125 C 181.136719 861.292969 179.3125 847.09375 184.660156 832.953125 C 189.960938 818.9375 199.667969 809.558594 214.851562 807.113281 C 230.492188 804.589844 243.59375 809.527344 253.636719 821.859375 C 257.640625 826.78125 261.191406 832.074219 266.355469 839.121094%22 fill=%22%23F6A606%22/%3E%3Cpath d=%22M -0.00126735 0.000704346 C -0.490142 -11.830074 19.534182 2.331661 25.173846 11.553801 C 30.809598 20.775941 33.676362 27.225182 37.88851 26.040149 C 48.025824 23.181207 42.350962 3.798286 43.524262 -3.538752 C 44.697562 -10.8797 70.189467 -9.995814 61.757349 5.753787 C 53.329142 21.503388 46.019481 35.602546 51.142892 37.170857 C 56.270214 38.739169 70.623588 20.92847 83.357807 27.952628 C 96.088115 34.976786 86.88553 46.263935 80.678771 45.200142 C 74.472013 44.13635 64.088305 41.883613 56.563539 45.376137 C 49.034863 48.868661 45.276391 49.744725 38.658977 47.335549 C 38.658977 47.335549 44.423792 67.934791 22.627784 95.159268 C 9.459444 111.608938 -5.535334 104.185859 0.350723 97.071748 C 6.24069 89.953726 20.660551 80.371774 27.80986 64.653461 C 31.001237 57.633214 35.581019 50.800696 33.383037 45.38787 C 32.104139 42.235604 27.829415 43.929067 26.022533 35.559525 C 21.501416 14.659136 0.303791 7.271255 -0.00126735 0.000704346 Z M -0.00126735 0.000704346 %22 transform=%22matrix(0.998785, 0, 0, -0.998785, -30.311234, 836.422578)%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.153%22 stroke-linecap=%22butt%22/%3E%3Cpath d=%22M 0.000688757 -0.000703552 C -9.592997 2.236389 -22.902133 0.906649 -30.583339 -7.052238 C -36.387264 -13.063447 -39.664683 -22.332519 -44.795916 -29.114195 C -47.920806 -33.244212 -54.342669 -42.313823 -54.158852 -47.910465 C -53.928103 -54.797738 -44.659031 -56.158766 -39.265761 -52.998677 C -29.996689 -47.566297 -29.625143 -32.450278 -16.79706 -35.109759 C -5.635064 -37.425072 -2.158184 -42.951316 3.1686 -31.073606 C 9.308871 -17.365548 18.186843 -28.930378 29.118091 -23.239871 C 36.040562 -11.792371 11.307392 -1.909272 0.000688757 -0.000703552 Z M 0.000688757 -0.000703552 %22 transform=%22matrix(0.998785, 0, 0, -0.998785, 225.757125, 794.772735)%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.22%22 stroke-linecap=%22butt%22/%3E%3C/svg%3E") no-repeat left bottom / 100% 100% !important;
  pointer-events: none; z-index: 0;
}
/* Handy: die Zone wird so gezeichnet, als waere die Seite 680 px breit, und
   angeschnitten. Oben bleibt der rechte Teil mit der blauen Flaeche, unten der linke
   mit Gruen und Mango. Sonst schrumpfen Flaechen und Linien auf Briefmarkengroesse. */
@media (max-width: 767px) {
  body .elementor-location-footer > .e-con,
  body .elementor-241 .elementor-element-8d729f9 {
    padding-top: 155px !important;
    padding-bottom: 88px !important;
  }
  body .elementor-location-footer > .e-con::before {
    aspect-ratio: auto; height: 139px !important;
    background-position: right top !important; background-size: 680px 100% !important;
  }
  body .elementor-241 .elementor-element-8d729f9::after {
    aspect-ratio: auto; height: 76px !important;
    background-position: left bottom !important; background-size: 680px 100% !important;
  }
}
/* Ueberschriften der Fusszeile ohne Silbentrennung (12.10.2026). Mit text-wrap:balance
   trennte der Browser zwischen 1025 und 1300 px "Werksvorbestel-lung", obwohl das Wort
   in die Spalte passt. Am Handy galt das schon. */
.elementor-location-footer .elementor-heading-title { hyphens: manual !important; }
/* Verhaeltnisse: oben 0.2049, unten 0.1124 der Breite */
/* KF-FUSSZONE Ende */

/* KF-KOPF Anfang -- erzeugt von website/design/bauen.py, nicht von Hand aendern
   Kraeftigerer Kopf auf grossen Bildschirmen (12.10.2026). Unter 1025 px unveraendert.
   Ab 1288 px passt das 16-px-Menue; den zweiten Knopf blendet Elementor erst ab 1340 px ein. */
@media (min-width: 1025px) {
  .elementor-location-header .elementor-element-dc60a6e .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item { font-weight: 600 !important; }
  /* beide Knoepfe gleich hoch, auch der ohne Rahmen */
  .elementor-location-header .elementor-widget-button .elementor-button { display: inline-flex !important; align-items: center; justify-content: center;
    box-sizing: border-box; min-height: 44px; padding-top: 0 !important; padding-bottom: 0 !important;
    font-weight: 600 !important; line-height: 1 !important; }
}
@media (min-width: 1288px) {
  .elementor-location-header .kf-logo { --kf-logo-b: 124px; }
  .elementor-location-header .elementor-element-dc60a6e .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item { font-size: 16px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .elementor-location-header .elementor-widget-button .elementor-button { padding-left: 18px !important; padding-right: 18px !important; }
  /* Menue mittig zwischen Logo und Knoepfen statt Loch vor den Knoepfen */
  .elementor-location-header .elementor-element-c960999 > .elementor-element-8a6f57b { flex: 0 0 auto !important; width: auto !important; }
  .elementor-location-header .elementor-element-c960999 > .elementor-element-dc60a6e { margin-left: auto; margin-right: auto; }
}
@media (min-width: 1600px) {
  /* der Kopf darf breiter laufen als der Inhalt (1240 px) */
  .elementor-location-header .elementor-element-fa3a9c8 { --content-width: min(1520px, calc(100vw - 128px)) !important; }
  .elementor-location-header .kf-logo { --kf-logo-b: 136px; }
  .elementor-location-header .elementor-element-dc60a6e .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item { font-size: 17px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .elementor-location-header .elementor-widget-button .elementor-button { min-height: 48px; padding-left: 22px !important; padding-right: 22px !important; font-size: 16px !important; }
}
/* KF-KOPF Ende */

/* KF-SEITENKOPF Anfang -- erzeugt von website/design/bauen.py, nicht von Hand aendern
   Seitenkopf der Unterseiten (Vorlage 500) in der Sprache des Startbilds (12.10.2026,
   MW: "Der Header-Bereich ist nur auf der Startseite wirklich attraktiv, auf den
   anderen wirkt er, bis auf die Fotos, relativ lieblos"). Der dunkle Verlauf kommt
   zurueck (KF-DESIGN hatte ihn mit den Wellen abgeschaltet), der Pfad steht als
   Etikett ueber dem Titel wie das Etikett im Startbild, unter dem Titel ein
   Mango-Strich wie die Unterstreichung im Menue. Zweite Stufe (MW: "mach beides"):
   Einleitungssatz und Bereichsleiste im Kopf, eingesetzt von KF-SEITENKOPF-PHP. */
.elementor-500 .elementor-element-213ad7f::before { content: "" !important; }
.elementor-500 .elementor-element-2c3d1b3 { order: -1; align-self: flex-start; width: auto !important; max-width: 100%; margin: 0 0 20px !important; }
.elementor-500 .elementor-element-2c3d1b3 #breadcrumbs { display: inline-block; margin: 0; padding: 8px 18px; border: 1px solid rgba(224,239,236,.45);
  border-radius: 6px; background: rgba(6,20,17,.18); color: #E0EFEC; font-size: 14px; font-weight: 500;
  letter-spacing: .3px; line-height: 1.35; hyphens: manual; -webkit-hyphens: manual; }
.elementor-500 .elementor-element-2c3d1b3 #breadcrumbs a { color: #E0EFEC !important; text-decoration: none; }
.elementor-500 .elementor-element-2c3d1b3 #breadcrumbs a:hover { color: #FFFFFF !important; text-decoration: underline; }
.elementor-500 .elementor-element-2c3d1b3 .breadcrumb_last { color: #FFFFFF; font-weight: 600; }
.elementor-500 .elementor-element-f24a177 { width: 100% !important; max-width: 100% !important; }
.elementor-500 .elementor-element-f24a177 .elementor-heading-title { text-shadow: 0 2px 26px rgba(10,46,40,.55); hyphens: manual; -webkit-hyphens: manual; }
.elementor-500 .elementor-element-f24a177 .elementor-heading-title::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 22px;
  border-radius: 2px; background: #F6A606; }
/* Seitentitel trennen nur an weichen Trennstrichen, die KF-SEITENKOPF-PHP an der Wortfuge
   setzt. Mit hyphens:auto trennte Chrome trotzdem "Lebensmit-telindustrie". */
/* Einleitungssatz im Kopf (functions.php, KF-SEITENKOPF-PHP holt ihn aus dem Inhalt) */
.elementor-500 .elementor-element-f24a177 .kf-kopf-satz { max-width: 60ch; margin: 22px 0 0; color: #FFFFFF; font-size: clamp(1.05rem, .62rem + .8vw, 1.3rem);
  font-weight: 500; line-height: 1.55; hyphens: manual; text-shadow: 0 1px 14px rgba(6,20,17,.5); }
.elementor-500 .elementor-element-f24a177 .kf-kopf-satz a { color: #FFFFFF !important; text-decoration: underline; }
/* Handlungsknopf unter dem Satz (13.10.2026, zuerst Karriere -> Kurzbewerbung), Mango wie
   die uebrigen Knoepfe im Haus. Der Anker im Inhalt haelt Abstand zum klebenden Kopf. */
.elementor-500 .elementor-element-f24a177 .kf-kopf-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.elementor-500 .elementor-element-f24a177 .kf-kopf-knopf { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 999px;
  background: #F6A606; color: #412402 !important; font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none !important; box-shadow: 0 6px 22px rgba(6,20,17,.28); transition: transform .25s ease, filter .25s ease; }
.elementor-500 .elementor-element-f24a177 .kf-kopf-knopf:hover, .elementor-500 .elementor-element-f24a177 .kf-kopf-knopf:focus-visible { filter: brightness(1.06); transform: translateY(-2px); }
/* Zweiter Knopf in Gruen (Werksvorbestellung: "Feinkostprodukte anschauen"), hebt sich vom dunklen Kopf ab */
.elementor-500 .elementor-element-f24a177 .kf-kopf-knopf--gruen { background: #237A6D; color: #FFFFFF !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), 0 6px 22px rgba(6,20,17,.28); }
#kurzbewerbung, #kf-vorbestellung, #feinkostsalate { scroll-margin-top: 150px; }
/* Bereichsleiste mit den Nachbarseiten, gebaut wie die Bereichsanzeige im Startbild */
.elementor-500 .elementor-element-f24a177 .kf-kopf-bereiche { display: flex; gap: 14px; width: fit-content; max-width: 100%; margin-top: 30px;
  padding: 12px 16px 11px; border-radius: 10px; background: rgba(6,20,17,.42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow-x: auto; scrollbar-width: none; }
.elementor-500 .elementor-element-f24a177 .kf-kopf-bereiche::-webkit-scrollbar { display: none; }
.elementor-500 .elementor-element-f24a177 .kf-kb { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; width: 132px; text-decoration: none !important;
  color: rgba(255,255,255,.8) !important; font-size: 14px; font-weight: 600; line-height: 1.25; transition: color .2s; }
.elementor-500 .elementor-element-f24a177 .kf-kb-spur { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); transition: background .2s; }
.elementor-500 .elementor-element-f24a177 .kf-kb:hover, .elementor-500 .elementor-element-f24a177 .kf-kb:focus-visible, .elementor-500 .elementor-element-f24a177 .kf-kb.ist-aktiv { color: #FFFFFF !important; }
.elementor-500 .elementor-element-f24a177 .kf-kb:hover .kf-kb-spur { background: rgba(255,255,255,.6); }
.elementor-500 .elementor-element-f24a177 .kf-kb.ist-aktiv .kf-kb-spur { background: #FFFFFF; }
/* Handy (MW 12.10.: "mobil passt es noch nicht ueberall"): Der Text laeuft ueber die
   ganze Breite, der Verlauf von links reicht dann nicht. Wie im Startbild am Handy
   ein Verlauf von unten. Seiten ohne Foto behalten ihr reines Petrol (die Regeln mit
   .page-id-... sind spezifischer). Die Leiste bricht in zwei Spalten um, statt am
   Rand abgeschnitten zu wirken. */
@media (max-width: 767px) {
  .elementor-500 .elementor-element-213ad7f::before { background-image: linear-gradient(to top, rgba(6,20,17,.88) 0%, rgba(6,20,17,.66) 55%,
    rgba(6,20,17,.42) 100%) !important; }
  .elementor-500 .elementor-element-f24a177 .kf-kopf-bereiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px;
    width: 100%; margin-top: 24px; padding: 12px 14px 11px; overflow: visible; }
  .elementor-500 .elementor-element-f24a177 .kf-kb { width: auto; font-size: 13px; }
}
/* KF-SEITENKOPF Ende */

/* KF-HANDY Anfang -- erzeugt von website/design/bauen.py, nicht von Hand aendern
   Einzelkorrekturen fuer schmale Bildschirme (12.10.2026, MW: "mobil passt es noch nicht
   ueberall"). */
/* Fotokacheln (.kf-kacheln, z. B. "Drei Wege zu uns" auf /in-der-region/): in zwei Spalten
   ragte "Werksvorbestellung" in die Nachbarkachel. Lange Namen duerfen trennen. */
@media (max-width: 900px) {
  .kf-kachel-name { font-size: 1.08rem; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
}
/* Telefonnummern nie umbrechen. "0 29 44 - 97 97 70" brach an Leerzeichen und Strich
   auseinander (MW 13.10.2026, /werksvorbestellung/ "Telefonisch reservieren"). */
a[href^="tel:"] { white-space: nowrap; }
/* Werksvorbestellung im Handy-Menue als Mango-Knopf unter "Kontakt" (MW 13.10.2026: "mobil bau einfach
   unten unter Kontakt noch fuer das mobile Menue Werksvorbestellung in Mango ein"). Menueeintrag 2277 mit
   der Klasse kf-menue-mango. In der Desktop-Leiste stehen schon zwei Knoepfe, dort bleibt er verborgen. */
.elementor-nav-menu--main .kf-menue-mango { display: none !important; }
.elementor-nav-menu--dropdown .kf-menue-mango { padding: 14px 22px 18px; }
.elementor-nav-menu--dropdown .kf-menue-mango > a.elementor-item,
.elementor-nav-menu--dropdown .kf-menue-mango > a.elementor-item:hover,
.elementor-nav-menu--dropdown .kf-menue-mango > a.elementor-item:focus,
.elementor-nav-menu--dropdown .kf-menue-mango > a.elementor-item.elementor-item-active {
  justify-content: center; background: #F6A606 !important; color: #412402 !important;
  border-radius: 6px; padding: 14px 22px !important; font-weight: 600; }
/* KF-HANDY Ende */
/* KF-FORMULAR Anfang -- erzeugt von website/design/bauen.py, nicht von Hand aendern
   Elementor setzt vor jede Formularmeldung ein Zeichen aus der Schrift "eicons". Die Seite
   laedt diese Schrift nicht, deshalb stand dort ein leeres rotes Kaestchen (Test der
   Kurzbewerbung durch MW, 13.10.2026). Das Zeichen faellt weg, die farbige Meldung bleibt. */
.elementor-message::before { content: none !important; display: none !important; }
/* KF-FORMULAR Ende */