/* =====================================================================
   fumi-artikelseiten.css - das gemeinsame Aussehen ALLER Artikelseiten
   =====================================================================

   DIESE DATEI IST DIE QUELLE. Sie wird von Hand gepflegt und von keinem
   Skript ueberschrieben. Wer etwas am Aussehen aendern will, aendert sie
   hier - und nur hier.

   WOZU SIE DA IST
   Frueher trug jede Artikelbeschreibung ihr komplettes Aussehen mit:
   knapp 9.000 Zeichen, bei jedem Artikel dieselben. Bei 9.000 Artikeln
   waeren das rund 90 MB, tausendfach gleich, in der Wawi. Jetzt steht
   es einmal hier; am Artikel bleiben nur die vier Markenfarben.

   WIE MAN SIE LIEST
   Der Punkt und der Name davor sagen, WOFUER eine Regel gilt: .mk-h
   trifft jede Zwischenueberschrift. Danach in geschweiften Klammern
   steht, WAS gilt - Schriftgroesse, Farbe, Abstand. Zwischen den
   einzelnen Angaben steht ein Semikolon.

   margin = Abstand AUSSEN,  padding = Abstand INNEN.

   DIE VIER MARKENFARBEN
   --mk-farbe   die Hausfarbe des Herstellers
   --mk-text    dieselbe Farbe, abgedunkelt fuer Schrift
   --mk-blass   sehr blass, fuer Flaechen
   --mk-marker  halbdurchsichtig, fuer Hervorhebungen
   Sie werden je Artikel gesetzt - Balzer gruen, Saenger orange, Mikado
   rot. NIEMALS var(--mk-farbe) durch eine feste Farbe ersetzen, sonst
   sehen alle Marken gleich aus.

   Fehlt diese Datei, faellt die Seite auf die neutralen Ersatzfarben
   unten zurueck und bleibt lesbar - sie bricht nicht.

   EINBINDEN im Shop-Template, einmal:
     link rel="stylesheet" href="/mediafiles/fumi-artikelseiten.css"
   (ohne die spitzen Klammern kann dieser Kommentar nicht als HTML
   missverstanden werden - siehe unten.)

   WARUM HIER KEINE SPITZEN KLAMMERN STEHEN
   Dieser Kommentar wandert in der Vorschau mit in die Seite. Stuende
   hier ein Beispiel mit spitzen Klammern, zaehlte die Pruefung es als
   echtes Element mit und meldete "ein div zu viel". Genau das ist am
   17.09.2026 passiert.
   ===================================================================== */

.mk{
  --mk-farbe:  #4a4a4a;
  --mk-text:   #333333;
  --mk-blass:  rgba(74,74,74,.07);
  --mk-marker: rgba(74,74,74,.22);
  --mk-tinte:  #1d2321;
}
.mk{
  --mk-farbe:  #4a4a4a;
  --mk-text:   #333333;
  --mk-blass:  rgba(74,74,74,.07);
  --mk-marker: rgba(74,74,74,.22);
}

.mk{
  --mk-farbe:  #4a4a4a;
  --mk-text:   #333333;
  --mk-blass:  rgba(74,74,74,.07);
  --mk-marker: rgba(74,74,74,.22);
}

/* ---------------------------------------------------------------------
   MARKENKLASSEN
   Je Marke eine Klasse, nicht je Artikel ein style-Attribut. Zwei
   Gruende: ein style-Attribut mit vier Variablen braucht Semikolons,
   und die kann eine Ameise-Datei nicht sicher tragen. Und die Farbe
   gehoert zur Marke, nicht zum einzelnen Artikel - sonst muss man bei
   einer Farbaenderung jede Beschreibung anfassen.

   Benutzt wird sie zusammen mit .mk:   class="mk mk-marke-bettys"

   bettys   Wiesengruen, von bettys-landhauskueche.de abgenommen
            (ihre Schaltflaechen und Preise, rgb(131,183,53))
   flamingo Rot, am 09.10.2026 auf flamingo.be gemessen: ihre
            Markenvariable --ch-primary-color und die Schaltflaechen
            tragen beide rgb(204,0,0). Nicht geschaetzt.
   --------------------------------------------------------------------- */
.mk-marke-bettys{
  --mk-farbe:  #83b735;
  --mk-text:   #4a6b1e;
  --mk-blass:  rgba(131,183,53,.07);
  --mk-marker: rgba(131,183,53,.22);
}

.mk-marke-flamingo{
  --mk-farbe:  #cc0000;
  --mk-text:   #a30000;   /* abgedunkelt, damit Schrift auf Weiss lesbar bleibt */
  --mk-blass:  rgba(204,0,0,.07);
  --mk-marker: rgba(204,0,0,.22);
}

/* ---------------------------------------------------------------------
   TAFEL IN DER MITTE
   .mk-tafel steht linksbuendig (margin:16px 0 0). Auf den
   Balzer-Schauseiten ist das richtig, weil dort der ganze Block
   linksbuendig laeuft. Auf einer Seite, die sonst zentriert ist -
   Buehne, Anreisser, mk-erkl stehen alle mittig -, faellt eine
   linksbuendige Tabelle aus der Reihe. Dem Auftraggeber ist es am
   09.10.2026 an Bettys sofort aufgefallen.

   Darum eine ZUSAETZLICHE Klasse statt einer Aenderung an .mk-tafel:
   die Balzer-Dateien bleiben, wie sie sind.

   Benutzt wird sie zusammen mit .mk-tafel:
   class="mk-tafel mk-tafel-mitte table table-sm"
   --------------------------------------------------------------------- */
/* .mk-tafel-mitte steht am Dateiende - siehe dort warum. */

body{margin:0;background:#f4f5f4;font-family:Arial,Helvetica,sans-serif}.rahmen{max-width:1240px;margin:0 auto;padding:26px 20px 60px}.hinweis{background:#fff;border-left:4px solid var(--mk-farbe);padding:14px 18px;margin:0 0 22px;font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.7;color:#6b7370}.blatt{background:#fff;padding:30px 32px 36px}.mk-hoch{position:fixed;right:18px;bottom:18px;z-index:60;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #8f6b18;box-shadow:0 2px 10px rgba(18,22,24,.18);display:flex;align-items:center;justify-content:center;text-decoration:none;color:#1d2321}.mk{font-family:Arial,Helvetica,sans-serif;color:#1d2321;max-width:1200px;margin:0 auto;background:#fff}.mk-buehne{position:relative;overflow:hidden;background:#fff}.mk-buehne-innen{position:relative;z-index:2;padding:70px 26px 4px;text-align:center}.mk-wort{position:absolute;left:-28px;top:30%;font-size:clamp(96px,14vw,210px);font-weight:900;letter-spacing:-.06em;line-height:.85;color:var(--mk-blass);z-index:0;pointer-events:none;user-select:none;white-space:nowrap}.mk-marke{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--mk-text);margin:0 0 2px}.mk-name{font-size:clamp(34px,5.2vw,64px);font-weight:900;letter-spacing:-.038em;line-height:1.02;margin:0;color:#16191b}.mk-gruppe{font-family:Georgia,"Times New Roman",serif;font-size:15px;color:#6b7370;margin:8px 0 0}.mk-schriftzug{display:block;max-width:min(560px,80%);height:auto;margin:6px auto 0}.mk-nurlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.mk-zeichenbild{display:inline-block}.mk-strich{height:4px;background:var(--mk-farbe);margin:18px auto 0;max-width:120px}.mk-anreisser{font-family:Georgia,"Times New Roman",serif;font-size:clamp(19px,2.1vw,22px);line-height:1.6;margin:24px auto 0;max-width:52ch}.mk-text{font-family:Georgia,"Times New Roman",serif;font-size:16.5px;line-height:1.75;margin:18px auto 0;max-width:66ch}mark.mk-marker{background:linear-gradient(to top,var(--mk-marker) 0,var(--mk-marker) 62%,transparent 62%);color:inherit;padding:0 .12em}.mk-schaustueck{display:block;position:relative;width:min(600px,88%);margin:26px auto 0}.mk-schaustueck img{display:block;width:100%;height:auto}.mk-schatten{display:block;width:min(400px,64%);height:24px;margin:-10px auto 0;background:radial-gradient(ellipse at 50% 50%,rgba(18,22,24,.30) 0%,rgba(18,22,24,0) 70%)}.mk-instrumente{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:46px 26px 0;padding:26px 0 4px;border-top:1px solid rgba(29,35,33,.14);border-bottom:1px solid rgba(29,35,33,.14)}.mk-i{padding:20px 22px 24px;text-align:center;border-left:1px solid rgba(29,35,33,.14)}.mk-i:first-child{border-left:0}.mk-i b{display:block;font-size:40px;font-weight:900;letter-spacing:-.035em;line-height:1;margin:18px 0 0;font-variant-numeric:tabular-nums;color:#1d2321}.mk-i b em{font-style:normal;font-size:.42em;font-weight:700;color:#6b7370}.mk-i span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.6;color:#6b7370;margin:10px auto 0;max-width:26ch}.mk-ringe{position:relative;width:74px;height:74px;margin:0 auto}.mk-i .mk-ringe span,.mk-i .mk-spule span,.mk-i .mk-lager i{margin:0;max-width:none}.mk-lager{width:74px;height:74px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:7px}.mk-lager i{width:11px;height:11px;border-radius:50%;background:rgba(29,35,33,.32);display:block}.mk-lager i.nadel{width:5px;height:22px;border-radius:3px;background:#8f6b18}.mk-spule{width:74px;height:74px;margin:0 auto;position:relative}.mk-spule span{position:absolute;border:1px solid rgba(29,35,33,.20);border-radius:50%}.mk-spule span:nth-child(1){inset:0}.mk-spule span:nth-child(2){inset:11px;border-color:rgba(29,35,33,.30)}.mk-spule span:nth-child(3){inset:24px;border-color:rgba(29,35,33,.44)}.mk-waage{width:74px;height:74px;margin:0 auto;position:relative}.mk-waage::before{content:"";position:absolute;left:9px;right:9px;top:26px;bottom:26px;border-radius:50%;background:rgba(29,35,33,.18)}.mk-waage::after{content:"";position:absolute;left:0;right:0;bottom:18px;height:1px;background:rgba(29,35,33,.28)}.mk-ring{position:absolute;border-radius:50%;display:block}.mk-ring i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--mk-farbe);left:50%;top:-4px;margin-left:-3px}.mk-ring-kurbel{inset:0;border:1px solid rgba(29,35,33,.28);animation:mk-dreh 8s linear infinite}.mk-ring-rotor{inset:17px;border:1px solid rgba(143,107,24,.85);animation:mk-dreh 1.5s linear infinite}@keyframes mk-dreh{from{transform:rotate(0)}to{transform:rotate(360deg)}}.mk-inhalt{padding:0 26px 60px}.mk-h{font-size:19px;font-weight:700;margin:34px 0 10px;padding-top:14px;border-top:1px solid rgba(29,35,33,.14)}.mk-punkte{display:grid;gap:0;margin:62px 0 0}.mk-punkt{position:relative;width:min(680px,96%);padding:6px 0 26px;text-align:center}.mk-punkt:nth-child(odd){margin-left:auto}.mk-punkt:nth-child(even){margin-left:0}.mk-nr{display:inline-block;width:27px;height:27px;line-height:25px;text-align:center;border-radius:50%;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;background:#fff;color:#1d2321;border:1px solid #8f6b18}.mk-zeichen{display:block;margin:12px 0 0;line-height:0;color:#1d2321}.mk-sache{margin:12px 0 0}.mk-sache b{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}.mk-quelle{display:block;font-size:15px;color:#1d2321}.mk-erkl{display:block;font-family:Georgia,"Times New Roman",serif;font-size:15.5px;line-height:1.72;color:#6b7370;margin:12px auto 0;max-width:62ch;text-align:center}.mk-hinweis{font-family:Georgia,"Times New Roman",serif;font-size:13.5px;line-height:1.65;color:#6b7370;margin:18px 0 0;max-width:80ch}.mk-bilder{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 0}.mk-bilder img{width:210px;height:120px;object-fit:contain;background:#fff;border:1px solid rgba(29,35,33,.14)}.mk-tafel{border-collapse:collapse;margin-top:16px;margin-bottom:0;font-size:15px;width:100%;max-width:760px}.mk-tafel th{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b7370;text-align:left;padding:10px 14px 10px 0;border-bottom:2px solid var(--mk-farbe)}.mk-tafel td{font-family:Georgia,"Times New Roman",serif;padding:11px 14px 11px 0;border-bottom:1px solid rgba(29,35,33,.14);font-variant-numeric:tabular-nums}.mk-tafel td:first-child{font-family:Arial,Helvetica,sans-serif;font-weight:700}.mk-fuss{font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.7;color:#6b7370;margin:26px 0 0;padding-top:14px;border-top:1px solid rgba(29,35,33,.14);max-width:76ch}.mk-fuss b{color:#1d2321}@media (prefers-reduced-motion:reduce){.mk-ring-kurbel,.mk-ring-rotor{animation:none}}@media (max-width:620px){.mk-spalte{width:44px}.mk-bilder img{width:150px;height:86px}}

.mk{ --mk-tinte: #1d2321; }
.sym-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px 14px;margin:26px 0 0;--sym-grund:#ffffff}.sym-z{text-align:center;color:var(--mk-tinte)}.sym-z svg{display:block;margin:0 auto 10px}.sym-z b{display:block;font-family:Arial,Helvetica,sans-serif;font-size:13.5px;font-weight:700;letter-spacing:.01em}.sym-z span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:13px;line-height:1.5;color:#6b6467;margin:4px auto 0;max-width:21ch}@keyframes sym-spulen{0%{stroke-dashoffset:0}33%{stroke-dashoffset:-56}33.01%,100%{stroke-dashoffset:-56}}@keyframes sym-drehstopp{0%{transform:rotate(0)}30%{transform:rotate(1080deg)}30.001%,100%{transform:rotate(1080deg)}}@keyframes sym-schlag{0%,29.9%{transform:scale(1)}30%{transform:scale(1.55)}34%,100%{transform:scale(1)}}@keyframes sym-auf{0%,42%{opacity:1}52%,92%{opacity:.18}100%{opacity:1}}@keyframes sym-ab{0%,42%{opacity:.18}52%,92%{opacity:1}100%{opacity:.18}}@keyframes sym-legen{0%,8%{transform:translateY(-9px)}25%{transform:translateY(9px)}42%,100%{transform:translateY(-9px)}}@keyframes sym-kreisen{0%{transform:rotate(0)}33%{transform:rotate(360deg)}33.01%,100%{transform:rotate(360deg)}}.sym-spule{animation:sym-spulen 9s linear infinite}.sym-qs{transform-origin:36px 36px;animation:sym-drehstopp 9s linear infinite;animation-delay:1.5s}.sym-qk{transform-origin:36px 36px;animation:sym-schlag 9s linear infinite;animation-delay:1.5s}.sym-links{animation:sym-auf 9s ease-in-out infinite;animation-delay:3s}.sym-rechts{animation:sym-ab 9s ease-in-out infinite;animation-delay:3s}.sym-sh{animation:sym-legen 9s ease-in-out infinite;animation-delay:4.5s}.sym-lauf{transform-origin:36px 36px;animation:sym-kreisen 9s linear infinite;animation-delay:6s}.sym-spule2{animation:sym-spulen 9s linear infinite;animation-delay:7.5s}@media (prefers-reduced-motion:reduce){.sym-spule,.sym-spule2,.sym-qs,.sym-qk,.sym-links,.sym-rechts,.sym-sh,.sym-lauf{animation:none}.sym-rechts{opacity:.18}}

.mk{ --mk-tinte: #1d2321; }
.sym-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px 14px;margin:26px 0 0;--sym-grund:#ffffff}.sym-z{text-align:center;color:var(--mk-tinte)}.sym-z svg{display:block;margin:0 auto 10px}.sym-z b{display:block;font-family:Arial,Helvetica,sans-serif;font-size:13.5px;font-weight:700;letter-spacing:.01em}.sym-z span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:13px;line-height:1.5;color:#6b6467;margin:4px auto 0;max-width:21ch}@keyframes sym-spulen{0%{stroke-dashoffset:0}33%{stroke-dashoffset:-56}33.01%,100%{stroke-dashoffset:-56}}@keyframes sym-drehstopp{0%{transform:rotate(0)}30%{transform:rotate(1080deg)}30.001%,100%{transform:rotate(1080deg)}}@keyframes sym-schlag{0%,29.9%{transform:scale(1)}30%{transform:scale(1.55)}34%,100%{transform:scale(1)}}@keyframes sym-auf{0%,42%{opacity:1}52%,92%{opacity:.18}100%{opacity:1}}@keyframes sym-ab{0%,42%{opacity:.18}52%,92%{opacity:1}100%{opacity:.18}}@keyframes sym-legen{0%,8%{transform:translateY(-9px)}25%{transform:translateY(9px)}42%,100%{transform:translateY(-9px)}}@keyframes sym-kreisen{0%{transform:rotate(0)}33%{transform:rotate(360deg)}33.01%,100%{transform:rotate(360deg)}}.sym-spule{animation:sym-spulen 9s linear infinite}.sym-qs{transform-origin:36px 36px;animation:sym-drehstopp 9s linear infinite;animation-delay:1.5s}.sym-qk{transform-origin:36px 36px;animation:sym-schlag 9s linear infinite;animation-delay:1.5s}.sym-links{animation:sym-auf 9s ease-in-out infinite;animation-delay:3s}.sym-rechts{animation:sym-ab 9s ease-in-out infinite;animation-delay:3s}.sym-sh{animation:sym-legen 9s ease-in-out infinite;animation-delay:4.5s}.sym-lauf{transform-origin:36px 36px;animation:sym-kreisen 9s linear infinite;animation-delay:6s}.sym-spule2{animation:sym-spulen 9s linear infinite;animation-delay:7.5s}@media (prefers-reduced-motion:reduce){.sym-spule,.sym-spule2,.sym-qs,.sym-qk,.sym-links,.sym-rechts,.sym-sh,.sym-lauf{animation:none}.sym-rechts{opacity:.18}}


/* ---------------------------------------------------------------------
   X-WILD (Shop\XWild\Baue-XWildSorte.ps1)
   Bis zum 17.09.2026 trug jede der 25 Sortenseiten diesen Block selbst -
   10.950 Zeichen, auf 713 Shopseiten rund 10 MB dasselbe.

   Sieben Werte haengen von der Sorte ab; sie werden je Seite gesetzt:
     --xw-farbe            die Sortenfarbe
     --xw-kopfschrift      Schrift im Kopfbild, hell oder dunkel
     --xw-kopfmarke        die Markenzeile darueber
     --xw-kopfunter        die Unterzeile
     --xw-schatten-stark   Textschatten, drei Staerken; ihre Farbe
     --xw-schatten-mittel  richtet sich danach, ob die Sortenfarbe
     --xw-schatten-weit    hell oder dunkel ist
   Welche hell und welche dunkel ist, rechnet das Bauskript aus - nach
   Helligkeit und WCAG-Kontrast, wie bisher.
   --------------------------------------------------------------------- */

.xw{
  --xw-farbe:           #4a4a4a;
  --xw-kopfschrift:     #161314;
  --xw-kopfmarke:       #3d2f07;
  --xw-kopfunter:       rgba(22,19,20,.78);
  --xw-schatten-stark:  rgba(255,255,255,.85);
  --xw-schatten-mittel: rgba(255,255,255,.8);
  --xw-schatten-weit:   rgba(255,255,255,.7);
}
.xw{font-family:Arial,Helvetica,sans-serif;color:#1d1a1b;background:#ffffff;max-width:1200px;position:relative;overflow:hidden}.xw *{box-sizing:border-box}.xw p{margin:0}.xw-kopf{position:relative;background:var(--xw-farbe);overflow:hidden}.xw-kopf>img{display:block;width:100%;height:clamp(300px,45vw,612px);object-fit:cover;object-position:50% 58%}.xw-kopf::after{content:none}.xw-kopftext{position:absolute;left:0;right:0;top:0;z-index:2;padding:clamp(26px,4vw,54px) 26px 0;text-align:center;pointer-events:none}.xw-name{text-shadow:0 1px 3px var(--xw-schatten-stark), 0 3px 22px var(--xw-schatten-weit)}.xw-marke,.xw-unter{text-shadow:0 1px 3px var(--xw-schatten-mittel)}.xw-marke{font-size:clamp(12px,1.5vw,15px);font-weight:700;letter-spacing:.22em;color:var(--xw-kopfmarke);margin:0 0 10px}.xw-name{font-size:clamp(28px,4.6vw,56px);font-weight:900;letter-spacing:-.03em;line-height:1.02;color:var(--xw-kopfschrift);margin:0;text-wrap:balance}.xw-unter{font-family:Georgia,"Times New Roman",serif;font-size:clamp(14px,1.8vw,18px);color:var(--xw-kopfunter);margin:12px 0 0}.xw-innen{padding:clamp(30px,5vw,64px) clamp(20px,4vw,54px)}.xw-h{font-size:clamp(21px,2.8vw,32px);font-weight:900;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}.xw-text{font-family:Georgia,"Times New Roman",serif;font-size:17px;line-height:1.78;max-width:62ch;color:#1d1a1b}.xw-text + .xw-text{margin-top:14px}.xw-leise{color:#6b6467}.xw-teile{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;margin:26px 0 0;border-top:1px solid rgba(29,26,27,.15)}.xw-teil{padding:24px 22px 26px;border-left:1px solid rgba(29,26,27,.15);text-align:center}.xw-teil:first-child{border-left:0}.xw-teil b{display:block;font-size:clamp(32px,4.4vw,46px);font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--xw-farbe);font-variant-numeric:tabular-nums}.xw-teil span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.6;color:#6b6467;margin:10px auto 0;max-width:22ch}.xw-dunkel{background:#faf8f9;color:#1d1a1b}.xw-dunkel .xw-h{color:#1d1a1b;position:relative;z-index:1;margin-top:clamp(16px,2.4vw,30px)}.xw-dunkel .xw-text{color:#1d1a1b}.xw-grad{display:block;font-size:clamp(64px,11vw,132px);font-weight:900;line-height:.9;letter-spacing:-.05em;color:var(--xw-farbe);font-variant-numeric:tabular-nums;margin:0 0 6px;position:relative;z-index:1}.xw-grad em{font-style:normal;font-size:.32em;letter-spacing:0;color:#C2956B}.xw-hitze{position:relative;display:inline-block}.xw-flamme{position:absolute;left:50%;top:40%;z-index:0;opacity:.55;transform:translate(-50%,-50%);width:clamp(96px,13vw,170px);height:clamp(96px,13vw,170px)}.xw-flamme::before,.xw-flamme::after{content:"";position:absolute;bottom:0;left:50%;border-radius:50% 10% 50% 50%;transform-origin:50% 70%}.xw-flamme::before{width:100%;height:100%;margin-left:-50%;background:linear-gradient(160deg,rgba(212,175,55,.15) 0%,rgba(212,175,55,.85) 55%,rgba(212,175,55,.95) 100%);filter:blur(.6px);animation:xw-lodern 3.1s ease-in-out infinite}.xw-flamme::after{width:52%;height:52%;margin-left:-26%;bottom:7%;background:linear-gradient(160deg,rgba(245,197,66,.45) 0%,#f5c542 60%,#ffdf8a 100%);animation:xw-lodern 2.1s ease-in-out infinite reverse}@keyframes xw-lodern{0%,100%{transform:rotate(-45deg) scale(1,1)}34%{transform:rotate(-45deg) scale(.94,1.09)}68%{transform:rotate(-45deg) scale(1.05,.95)}}@media (prefers-reduced-motion:reduce){.xw-flamme::before,.xw-flamme::after{animation:none}}.xw-zweispalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4vw,56px);align-items:center}.xw-bild{display:block;width:100%;height:auto}.xw-tab{width:100%;border-collapse:collapse;font-size:15.5px;margin:18px 0 0}.xw-tab td{padding:11px 4px;border-bottom:1px solid rgba(29,26,27,.15);vertical-align:baseline}.xw-tab td:first-child{font-family:Georgia,"Times New Roman",serif;color:#6b6467}.xw-tab td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.xw-tab.xw-mtab td:last-child{text-align:left;font-weight:400}.xw-tab.xw-mtab td:first-child{white-space:nowrap}.xw-tab .xw-nw{white-space:nowrap}.xw-tab .xw-danach{display:block;font-size:12.5px;color:#6b6467}.xw-zut{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));column-gap:clamp(26px,4vw,54px);row-gap:clamp(20px,2.6vw,30px);margin:22px 0 0}.xw-zutkopf b{display:block;font-size:17px;font-weight:900;letter-spacing:-.01em;color:var(--xw-farbe);margin:0 0 5px}.xw-zutkopf span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.72;color:#1d1a1b}.xw-paare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,54px);margin:18px 0 0}@media (max-width:720px){.xw-paare{grid-template-columns:1fr}.xw-zweispalt{grid-template-columns:1fr}}.xw-gebinde{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(22px,4vw,44px);margin:26px 0 0}.xw-g{text-align:center}.xw-g b{display:block;font-size:clamp(24px,3.2vw,32px);font-weight:900;letter-spacing:-.03em;color:var(--xw-farbe)}.xw-g span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:12.5px;color:#6b6467;margin:8px 0 0;font-variant-numeric:tabular-nums}.xw-ali{border:1px dashed rgba(212,175,55,.75);background:rgba(212,175,55,.07);padding:clamp(22px,3vw,34px);margin:0;text-align:center}.xw-ali b{display:block;font-size:16px;font-weight:900;letter-spacing:.04em;color:#8a6f16;margin:0 0 8px}.xw-ali span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.7;color:#6b6467;max-width:52ch;margin:0 auto}.xw-pflicht{font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.75;color:#6b6467}.xw-pflicht h4{font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;color:#6b6467;margin:24px 0 6px;letter-spacing:-.01em}.xw-pflicht h4:first-child{margin-top:0}html{scroll-behavior:smooth}.xw a.xw-hoch{position:fixed;right:18px;bottom:18px;z-index:60;width:44px;height:44px;border-radius:50%;background:var(--xw-farbe);border:1px solid #D4AF37;box-shadow:0 2px 10px rgba(20,10,16,.3);display:flex;align-items:center;justify-content:center;text-decoration:none}.xw-hoch span{display:block;width:11px;height:11px;margin-top:3px;border-left:2px solid #D4AF37;border-top:2px solid #D4AF37;transform:rotate(45deg)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.xw-led{display:block;position:relative;height:3px;border-radius:2px;background:rgba(29,26,27,.10);margin:34px 0;overflow:hidden}.xw-dunkel .xw-led{background:rgba(29,26,27,.10)}.xw-led::before{content:"";position:absolute;top:0;bottom:0;left:0;width:22%;border-radius:2px;background:linear-gradient(90deg,rgba(212,175,55,0) 0%,rgba(212,175,55,.9) 42%,#ffeec2 52%,rgba(212,175,55,.9) 62%,rgba(212,175,55,0) 100%);box-shadow:0 0 14px 2px rgba(212,175,55,.4);animation:xw-leuchten 9s linear infinite;animation-delay:var(--verzug,0s)}@keyframes xw-leuchten{0%{transform:translateX(-120%)}100%{transform:translateX(560%)}}@media (prefers-reduced-motion:reduce){.xw-led::before{animation:none;opacity:.4}}.xw-wortmarke{position:absolute;font-size:clamp(88px,13vw,200px);font-weight:900;letter-spacing:-.06em;line-height:.85;color:rgba(29,26,27,.05);z-index:0;pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap}.xw-wm1{right:-16px;top:-28px}.xw-wm2{left:-26px;bottom:-30px}.xw>*:not(.xw-wortmarke){position:relative;z-index:1}.xw-rechner{margin:clamp(34px,5vw,58px) 0 0}.xw p.xw-skalatitel{font-size:15px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:#1d1a1b;margin:0 0 30px}.xw-skala{display:flex;align-items:stretch;gap:3px;flex-wrap:wrap;margin:0}.xw-stufe{position:relative;flex:1 1 100px;min-width:88px;border:0;font:inherit;font-size:14px;font-weight:700;padding:15px 6px;cursor:pointer;text-align:center;color:#1d1a1b;font-variant-numeric:tabular-nums}.xw-stufe:last-child{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);padding-right:20px}.xw-stufe.hell{color:#fff}.xw .xw-stufe.an{outline:2px solid var(--xw-farbe) !important;outline-offset:3px !important}.xw p.xw-genau{font-family:Georgia,"Times New Roman",serif;font-size:15px;color:#6b6467;margin:18px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.xw-genau input{width:3.1em;font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:900;color:#1d1a1b;background:transparent;border:0;border-bottom:2px solid var(--xw-farbe);padding:0 2px 3px;text-align:center;font-variant-numeric:tabular-nums}.xw-genau input:focus{outline:0;border-bottom-color:#D4AF37}.xw-genau b{font-size:17px;font-weight:900;color:#6b6467}.xw-erg{margin:28px 0 0}.xw-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:clamp(18px,3vw,32px)}.xw-kachel{display:flex;flex-direction:column;gap:5px;border-top:1px solid rgba(29,26,27,.15);padding-top:14px}.xw-zahl{font-size:clamp(23px,2.9vw,33px);font-weight:900;letter-spacing:-.02em;color:var(--xw-farbe);font-variant-numeric:tabular-nums}.xw-ktext{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;color:#6b6467}.xw p.xw-rechenweg{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.7;color:#6b6467;margin:clamp(28px,3.4vw,40px) 0 0;max-width:78ch}.xw-ohne{margin:20px 0 0;padding:0;list-style:none;max-width:62ch}.xw-ohne li{position:relative;padding:0 0 0 24px;margin:0 0 12px;font-size:clamp(17px,2vw,20px);font-weight:900;letter-spacing:-.01em;color:#1d1a1b}.xw-ohne li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:#6b6467}.xw-ohne i{font-style:normal;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:400;letter-spacing:0;color:#6b6467;margin:0 6px 0 0}.xw-unterh{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:#6b6467;margin:26px 0 10px}.xw p.xw-zutaten{font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.75;color:#1d1a1b;margin:0;max-width:70ch}.xw-zutaten b{font-weight:700;color:var(--xw-farbe);font-variant-numeric:tabular-nums}.xw-fragen{margin:26px 0 0;border-top:1px solid rgba(29,26,27,.15)}.xw-f{border-bottom:1px solid rgba(29,26,27,.15)}.xw-f>summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;font-size:16.5px;font-weight:700;color:#1d1a1b}.xw-f>summary::-webkit-details-marker{display:none}.xw-f>summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--xw-farbe);border-bottom:2px solid var(--xw-farbe);transform:rotate(45deg);transition:transform .2s}.xw-f[open]>summary::after{transform:rotate(-135deg);margin-top:-3px}.xw-f>summary:hover{color:var(--xw-farbe)}.xw p.xw-antwort{font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.75;color:#1d1a1b;margin:0 0 20px;max-width:70ch}.xw p.xw-wink{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.6;color:#1d1a1b;margin:16px 0 0;max-width:62ch}

/* ---------------------------------------------------------------------
   PIEPMATZ - unsere Vogel- und Kleintiermarke
   (Shop\Piepmatz\Baue-PiepmatzArtikel.ps1)

   Vier Farben je Artikel:
     --pm-farbe   die Hausfarbe der Marke
     --pm-text    abgedunkelt, fuer Schrift auf Weiss
     --pm-band    das Namensband unter dem Kopf
     --pm-blass   sehr blass, fuer Flaechen
   --------------------------------------------------------------------- */

.pm{
  --pm-farbe: #b06fc4;
  --pm-text:  #7a3a8e;
  --pm-band:  #93a68d;
  --pm-blass: rgba(176,111,196,.10);
}
.pm{font-family:Arial,Helvetica,sans-serif;color:#1d1a1b;background:#fff;max-width:1200px;margin-left:auto;margin-right:auto;position:relative}.pm *{box-sizing:border-box}.pm p{margin:0}.pm-kopf{position:relative;padding:clamp(26px,4vw,48px) 26px clamp(22px,3vw,34px);text-align:center;background:var(--pm-blass)}.pm-marke{font-size:clamp(12px,1.5vw,15px);font-weight:700;letter-spacing:.22em;color:var(--pm-text);margin:0 0 10px}.pm-name{font-size:clamp(28px,4.6vw,54px);font-weight:900;letter-spacing:-.03em;line-height:1.03;margin:0;text-wrap:balance}.pm-unter{font-family:Georgia,"Times New Roman",serif;font-size:clamp(14px,1.8vw,18px);color:#6b6467;margin:12px 0 0}.pm-band{background:var(--pm-band);color:#fff;text-align:center;padding:10px 20px;font-size:clamp(15px,2vw,19px);font-weight:700;letter-spacing:.02em}.pm-innen{padding:clamp(28px,4.5vw,56px) clamp(20px,4vw,52px)}.pm-h{font-size:clamp(20px,2.6vw,29px);font-weight:900;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}.pm-text{font-family:Georgia,"Times New Roman",serif;font-size:17px;line-height:1.78;max-width:62ch;color:#1d1a1b}.pm-text + .pm-text{margin-top:14px}.pm-blick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin:26px 0 0;border-top:1px solid rgba(29,26,27,.15)}.pm-b{padding:24px 20px 26px;border-left:1px solid rgba(29,26,27,.15);text-align:center}.pm-b:first-child{border-left:0}.pm-b b{display:block;font-size:clamp(30px,4.2vw,44px);font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--pm-farbe);font-variant-numeric:tabular-nums}.pm-b span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.6;color:#6b6467;margin:10px auto 0;max-width:22ch}.pm-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:start}@media (max-width:720px){.pm-zwei{grid-template-columns:1fr}}.pm-bild{display:block;width:100%;height:auto}.pm-tab{width:100%;border-collapse:collapse;font-size:15.5px;margin:18px 0 0;max-width:520px}.pm-tab td{padding:11px 4px;border-bottom:1px solid rgba(29,26,27,.15);vertical-align:baseline}.pm-tab td:first-child{font-family:Georgia,"Times New Roman",serif;color:#6b6467}.pm-tab td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.pm-merk{border:1px dashed var(--pm-farbe);background:var(--pm-blass);padding:clamp(18px,2.6vw,26px);margin:26px 0 0}.pm-merk b{display:block;font-size:15px;font-weight:900;letter-spacing:.03em;color:var(--pm-text);margin:0 0 6px}.pm-merk span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:15.5px;line-height:1.7;color:#1d1a1b}.pm-fragen{margin:24px 0 0;border-top:1px solid rgba(29,26,27,.15)}.pm-f{border-bottom:1px solid rgba(29,26,27,.15)}.pm-f>summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;font-size:16.5px;font-weight:700}.pm-f>summary::-webkit-details-marker{display:none}.pm-f>summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--pm-farbe);border-bottom:2px solid var(--pm-farbe);transform:rotate(45deg);transition:transform .2s}.pm-f[open]>summary::after{transform:rotate(-135deg);margin-top:-3px}.pm-f>summary:hover{color:var(--pm-text)}.pm p.pm-antwort{font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.75;margin:0 0 20px;max-width:70ch}.pm-fuss{font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.75;color:#6b6467;border-top:1px solid rgba(29,26,27,.15);padding-top:22px;margin:30px 0 0}.pm-fuss h4{font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;color:#6b6467;margin:20px 0 6px}.pm-fuss h4:first-child{margin-top:0}

/* ---------------------------------------------------------------------
   VIDEO - zugeklappt, damit nichts ungefragt nachgeladen wird

   Der Rahmen ist ein details-Element: solange der Kunde es nicht
   oeffnet, laedt der Browser den eingebetteten Film nicht. Zusammen mit
   loading=lazy und der Adresse youtube-nocookie.com heisst das: beim
   blossen Aufruf der Artikelseite geht KEINE Verbindung zu Google
   hinaus. Erst wer auf "Video ansehen" klickt, baut sie auf - und
   genau darauf weist die Zeile unter dem Schalter hin.

   Das ist kein Schoenheitsdetail, sondern der Grund, warum der Film
   ueberhaupt auf der Seite stehen darf.
   --------------------------------------------------------------------- */

.mk-video{border:1px solid rgba(29,26,27,.15);margin:26px 0 0;background:#fff}
.mk-video>summary{list-style:none;cursor:pointer;padding:16px 34px 16px 18px;position:relative;font-size:16.5px;font-weight:700;color:#1d1a1b}
.mk-video>summary::-webkit-details-marker{display:none}
.mk-video>summary::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--mk-farbe);border-bottom:2px solid var(--mk-farbe);transform:rotate(45deg);transition:transform .2s}
.mk-video[open]>summary::after{transform:rotate(-135deg);margin-top:-3px}
.mk-video>summary:hover{color:var(--mk-farbe)}
.mk-videohinweis{font-family:Georgia,"Times New Roman",serif;font-size:13.5px;line-height:1.6;color:#6b6467;margin:0;padding:0 18px 14px}
.mk-videorahmen{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;background:#000}
.mk-videorahmen iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
/* ---------------------------------------------------------------------
   FUTTERRECHNER (.fr)
   Seit 22.09.2026. Mike: "gibts auch ein futterrechner dazu?"

   OHNE JAVASCRIPT. Das ist Absicht: Shopsysteme werfen script-Bloecke
   aus Artikelbeschreibungen haeufig heraus, style-Bloecke nicht. Der
   Rechner arbeitet deshalb nur mit Auswahlknoepfen und CSS.

   SO IST EIN RECHNER GEBAUT
     div.fr
       10x input[type=radio]      die Gewichtsstufen, ALLE zuerst
       div.fr-knoepfe  > 10x label
       div.fr-tafeln   > 10x div.fr-e   die Ergebnisse, gleiche Reihenfolge
   Die Regeln unten verbinden den n-ten Knopf mit der n-ten Tafel ueber
   nth-of-type. Deshalb braucht es hier KEINE Kennungen - die ids im
   HTML dienen nur dem label-for-Paar und muessen je Seite eindeutig
   sein (Praefix je Artikel).

   Die Mengen stammen aus der Fuetterungstabelle des Herstellers.
   Zwischenwerte sind gerechnet und im Text als solche benannt.
   --------------------------------------------------------------------- */
.fr{margin:26px 0 0;padding:22px 0 0;border-top:1px solid rgba(29,35,33,.14)}
.fr>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fr-frage{font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;margin:0 0 12px;color:#1d2321}
.fr-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.fr-knoepfe label{display:inline-block;min-width:62px;padding:9px 10px;text-align:center;border:1px solid rgba(29,35,33,.22);background:#fff;border-radius:3px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#1d2321;transition:background .12s,border-color .12s}
.fr-knoepfe label:hover{border-color:var(--mk-farbe)}
.fr-knoepfe label em{display:block;font-style:normal;font-size:11px;font-weight:400;color:#6b7370;margin-top:1px}
.fr-tafeln{margin:16px 0 0}
.fr-e{display:none;background:var(--mk-blass);border-left:4px solid var(--mk-farbe);padding:18px 20px}
.fr-menge{font-family:Arial,Helvetica,sans-serif;font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1;margin:0;color:#1d2321;font-variant-numeric:tabular-nums}
.fr-menge em{font-style:normal;font-size:.44em;font-weight:700;color:#6b7370}
.fr-dazu{font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.7;color:#4a534f;margin:10px 0 0;max-width:60ch}
.fr-dazu b{font-family:Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums}
.fr-fuss{font-family:Georgia,"Times New Roman",serif;font-size:13px;line-height:1.65;color:#6b7370;margin:14px 0 0;max-width:72ch}
.fr>input:nth-of-type(1):checked~.fr-knoepfe label:nth-of-type(1),
.fr>input:nth-of-type(2):checked~.fr-knoepfe label:nth-of-type(2),
.fr>input:nth-of-type(3):checked~.fr-knoepfe label:nth-of-type(3),
.fr>input:nth-of-type(4):checked~.fr-knoepfe label:nth-of-type(4),
.fr>input:nth-of-type(5):checked~.fr-knoepfe label:nth-of-type(5),
.fr>input:nth-of-type(6):checked~.fr-knoepfe label:nth-of-type(6),
.fr>input:nth-of-type(7):checked~.fr-knoepfe label:nth-of-type(7),
.fr>input:nth-of-type(8):checked~.fr-knoepfe label:nth-of-type(8),
.fr>input:nth-of-type(9):checked~.fr-knoepfe label:nth-of-type(9),
.fr>input:nth-of-type(10):checked~.fr-knoepfe label:nth-of-type(10){background:var(--mk-farbe);border-color:var(--mk-farbe);color:#fff}
.fr>input:nth-of-type(1):checked~.fr-knoepfe label:nth-of-type(1) em,
.fr>input:nth-of-type(2):checked~.fr-knoepfe label:nth-of-type(2) em,
.fr>input:nth-of-type(3):checked~.fr-knoepfe label:nth-of-type(3) em,
.fr>input:nth-of-type(4):checked~.fr-knoepfe label:nth-of-type(4) em,
.fr>input:nth-of-type(5):checked~.fr-knoepfe label:nth-of-type(5) em,
.fr>input:nth-of-type(6):checked~.fr-knoepfe label:nth-of-type(6) em,
.fr>input:nth-of-type(7):checked~.fr-knoepfe label:nth-of-type(7) em,
.fr>input:nth-of-type(8):checked~.fr-knoepfe label:nth-of-type(8) em,
.fr>input:nth-of-type(9):checked~.fr-knoepfe label:nth-of-type(9) em,
.fr>input:nth-of-type(10):checked~.fr-knoepfe label:nth-of-type(10) em{color:rgba(255,255,255,.78)}
.fr>input:nth-of-type(1):checked~.fr-tafeln .fr-e:nth-of-type(1),
.fr>input:nth-of-type(2):checked~.fr-tafeln .fr-e:nth-of-type(2),
.fr>input:nth-of-type(3):checked~.fr-tafeln .fr-e:nth-of-type(3),
.fr>input:nth-of-type(4):checked~.fr-tafeln .fr-e:nth-of-type(4),
.fr>input:nth-of-type(5):checked~.fr-tafeln .fr-e:nth-of-type(5),
.fr>input:nth-of-type(6):checked~.fr-tafeln .fr-e:nth-of-type(6),
.fr>input:nth-of-type(7):checked~.fr-tafeln .fr-e:nth-of-type(7),
.fr>input:nth-of-type(8):checked~.fr-tafeln .fr-e:nth-of-type(8),
.fr>input:nth-of-type(9):checked~.fr-tafeln .fr-e:nth-of-type(9),
.fr>input:nth-of-type(10):checked~.fr-tafeln .fr-e:nth-of-type(10){display:block}
.fr>input:focus-visible~.fr-knoepfe label{outline:2px solid var(--mk-farbe);outline-offset:2px}
@media (max-width:620px){.fr-knoepfe label{min-width:0;flex:1 1 60px;padding:8px 6px}.fr-menge{font-size:28px}}

/* ---------------------------------------------------------------------
   ZWEI BILDER NEBENEINANDER (.mk-duo)
   Seit 22.09.2026. Mike: "du kannst auch ruhig die beiden bilder
   beutel und napf zusammen auf der seite zeigen das es so wirkt wie
   bei n&d".

   Links die Packung, rechts der Napf mit den Zutaten - so zeigt
   Farmina seine Produkte selbst. Auf dem Telefon rutschen sie
   untereinander, sonst wird die Packung briefmarkengross.
   --------------------------------------------------------------------- */
.mk-duo{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,4vw,48px);margin:26px auto 0;width:min(1000px,94%);flex-wrap:wrap}
.mk-duo figure{margin:0;flex:0 1 auto;text-align:center}
.mk-duo .duo-packung img{display:block;width:min(300px,42vw);height:auto;margin:0 auto}
.mk-duo .duo-napf img{display:block;width:min(430px,56vw);height:auto;margin:0 auto}
.mk-duo figcaption{font-family:Georgia,"Times New Roman",serif;font-size:13px;line-height:1.6;color:#6b7370;margin:8px 0 0}
.mk-duo .mk-schatten{width:78%;margin:-8px auto 0}
@media (max-width:620px){.mk-duo{gap:22px}.mk-duo .duo-packung img{width:min(230px,62vw)}.mk-duo .duo-napf img{width:min(300px,80vw)}}

/* ---------------------------------------------------------------------
   MARKENBILDER (.mk-band, .mk-siegel, .mk-markenfuss)
   Seit 22.09.2026. Mike wollte auch die Kopfbilder, Linienlogos und
   Banner auf der Seite haben - sie sollen aber nicht die Galerie
   verstopfen, sondern ihren eigenen Platz bekommen:

     .mk-siegel      kleines Siegel neben dem Text (getreidefrei o.ae.)
     .mk-band        breites Kopfbild als Streifen, volle Breite
     .mk-markenfuss  Logo und Schriftzug der Linie ganz unten

   So bleibt oben das Produkt und unten die Marke.
   --------------------------------------------------------------------- */
.mk-band{display:block;width:100%;margin:34px 0 0;line-height:0}
.mk-band img{display:block;width:100%;height:auto;max-height:230px;object-fit:cover}
.mk-siegel{display:block;width:78px;height:auto;margin:16px 0 0}
.mk-markenfuss{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin:34px 0 0;padding:22px 0 4px;border-top:1px solid rgba(29,35,33,.14)}
.mk-markenfuss img{display:block;height:44px;width:auto}
.mk-markenfuss img.logo{height:54px}
@media (max-width:620px){.mk-band img{max-height:140px}.mk-markenfuss{gap:14px}.mk-markenfuss img{height:34px}.mk-markenfuss img.logo{height:42px}}

/* ---------------------------------------------------------------------
   FUTTERRECHNER FUER WACHSENDE TIERE (.fr-alter)
   Seit 22.09.2026.

   Bei Welpen und Kaetzchen hat Farminas Tabelle ZWEI Achsen: das
   erwartete Endgewicht und das Alter. Man kann also nicht eine Zahl
   nennen, sondern nur eine ganze Spalte - deshalb erscheint unter dem
   gewaehlten Gewicht eine kleine Tabelle Alter/Menge.

   "Adult" ist keine Menge, sondern ein Verweis auf die normale
   Tabelle fuer ausgewachsene Tiere; es steht deshalb als Wort da.
   --------------------------------------------------------------------- */
.fr-alter{border-collapse:collapse;margin:12px 0 0;font-size:15px;width:100%;max-width:420px}
.fr-alter th{font-family:Arial,Helvetica,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7370;text-align:left;padding:6px 12px 5px 0;border-bottom:1.5px solid var(--mk-farbe)}
.fr-alter td{font-family:Georgia,"Times New Roman",serif;padding:7px 12px 7px 0;border-bottom:1px solid rgba(29,35,33,.12);font-variant-numeric:tabular-nums}
.fr-alter td:first-child{font-family:Arial,Helvetica,sans-serif;font-weight:700;white-space:nowrap}
.fr-alter td.fr-spaeter{color:#6b7370;font-style:italic}
.fr-hinweis{font-family:Georgia,"Times New Roman",serif;font-size:13.5px;line-height:1.65;color:#6b7370;margin:10px 0 0;max-width:62ch}

/* ---------------------------------------------------------------------
   NACHTRAG 29.09.2026 - zwei Fehler auf der Artikelbuehne

   1) Das blasse Riesenwort hinter dem Produkt (.mk-wort) wurde von den
      Produktfotos verdeckt. Die Fotos der Hersteller sind JPEG mit
      rein weissem Hintergrund - und ein weisser Kasten deckt alles ab,
      was dahinter liegt. "multiply" rechnet Weiss mit dem Untergrund
      zusammen: Weiss mal Hintergrund ergibt Hintergrund, das Weiss
      verschwindet also, das Produkt bleibt stehen.
      Das geht nur ueber hellem Grund - .mk-buehne ist weiss, passt.
      Liegt spaeter mal eine echte Markenfarbe hinter dem Foto, muss
      das Bild freigestellt werden (PNG/WebP), dann ist diese Regel
      wirkungslos und stoert nicht.

   2) .mk-wort stand auf left:-28px und wurde vom overflow:hidden der
      Buehne links abgeschnitten - man las "RINARY" statt "URINARY".
      Jetzt beginnt es an der Kante der Buehne, nichts wird gekappt.
      Auf dem Telefon wird es zusaetzlich kleiner, sonst laeuft ein
      langes Wort wie GASTROINTESTINAL rechts aus dem Bild.
   --------------------------------------------------------------------- */
.mk-duo .duo-packung img,
.mk-duo .duo-napf img{mix-blend-mode:multiply}
.mk-wort{left:0}
@media (max-width:620px){.mk-wort{font-size:clamp(54px,15vw,96px)}}

/* ---------------------------------------------------------------------
   .mk-tafel-mitte - MUSS hier unten stehen
   Am 09.10.2026 auf fumi.de nachgemessen: die Klasse stand weiter oben
   und blieb ohne jede Wirkung. Zwei Gruende, beide muessen weg sein:
     1. .mk-tafel setzte "margin:16px 0 0" als Kurzform. Eine Kurzform
        setzt AUCH margin-left und margin-right - auf 0. Damit war jedes
        "auto" ueberschrieben. Steht jetzt als margin-top/-bottom da.
     2. Beide Klassen haben dieselbe Spezifitaet (je eine Klasse). Dann
        gewinnt die SPAETERE Regel. mk-tafel-mitte stand vorher davor.
   Wer hier etwas verschiebt, bricht die Zentrierung erneut - und es
   faellt nicht auf, weil die Klasse am Element ja weiter dransteht.
   --------------------------------------------------------------------- */
.mk-tafel.mk-tafel-mitte{ margin-left:auto; margin-right:auto; }

/* ---------------------------------------------------------------------
   Schriftregel gegen das Shop-Template durchsetzen
   Hausregel: erklaerende Texte Georgia, Ueberschriften und Zahlenfelder
   Arial. Am 09.10.2026 auf fumi.de nachgemessen: .mk-name und .mk-h
   liefen in "Roboto Condensed" - also falsch.

   Warum: .mk setzt Arial, und die Ueberschriften ERBEN das. Das
   SALEPIX-Template setzt aber "h2, .h2 { font-family: ... }" DIREKT -
   und eine direkte Regel schlaegt Erbung immer, egal wie niedrig ihre
   Spezifitaet ist. Erbung ist kein Gewinner in der Kaskade.

   Darum die Schrift hier ausdruecklich setzen, mit Klasse + Tag
   (Spezifitaet 0,1,1) - das schlaegt "h2, .h2" sicher. Die Regel fasst
   alle sechs Ueberschriftenstufen, damit auch eine kuenftige
   Artikelseite mit h4 oder h5 nicht wieder herausfaellt.
   --------------------------------------------------------------------- */
.mk h1,.mk h2,.mk h3,.mk h4,.mk h5,.mk h6,
.mk .mk-name,.mk .mk-h{ font-family:Arial,Helvetica,sans-serif; }