/* Beispielshop: Hinweisleiste, Logo */
.demo-bar { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 8px 16px; background: #0E1A2B; color: #EEF3FA; font: 500 13px/1.4 'Instrument Sans', system-ui, sans-serif; text-align: center; }
.demo-bar b { font-weight: 700; }
.demo-bar a { color: #8EC2FF; text-decoration: underline; white-space: nowrap; }
.mf-brand img.demo-logo, .mf-foot__brand img.demo-logo { width: auto; height: 34px; border-radius: 0; box-shadow: none; object-fit: contain; background: none; }
.mf-foot__brand img.demo-logo { height: 30px; }
/* Kunden-Demo mit rundem Logo + Shopname daneben */
.mf-brand img.demo-logo--round { height: 46px; border-radius: 50%; }
.mf-foot__brand img.demo-logo--round { height: 40px; border-radius: 50%; }

/* Ankauf: Fotos alternativ per WhatsApp */
.demo-wa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: #EAF8EF; border: 1px solid #BFE8CD; }
.demo-wa svg { flex: none; }
.demo-wa > div { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: #1d3b2a; }
.demo-wa > div b { font-size: 15px; color: #0f2a1b; }
.demo-wa__btn { flex: none; padding: 10px 16px; border-radius: 10px; background: #1DA851; color: #fff !important; font: 600 14px/1 'Instrument Sans', system-ui, sans-serif; text-decoration: none; }
.demo-wa__btn:hover { background: #178A43; }

/* Sprachwahl in der Hinweisleiste */
.demo-lang { position: relative; }
.demo-bar .flag { flex: none; display: block; border-radius: 3px; box-shadow: 0 0 0 .5px rgba(0,0,0,.25); }
.demo-lang summary { display: flex; align-items: center; }
.demo-bar .demo-lang a { display: flex; align-items: center; gap: 9px; }
.demo-bar .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.demo-lang summary { list-style: none; cursor: pointer; padding: 2px 8px; border: 1px solid rgba(238,243,250,.35); border-radius: 6px; font-weight: 600; }
.demo-lang summary::-webkit-details-marker { display: none; }
.demo-lang > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000; display: flex; flex-direction: column; min-width: 140px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(14,26,43,.25); text-align: left; }
.demo-bar .demo-lang a { color: #0E1A2B; text-decoration: none; padding: 7px 10px; border-radius: 6px; }
.demo-bar .demo-lang a:hover, .demo-bar .demo-lang a[aria-current] { background: #EEF3FA; }

/* Hell/Dunkel-Schalter in der Hinweisleiste */
.demo-theme { cursor: pointer; padding: 2px 10px; border: 1px solid rgba(238,243,250,.35); border-radius: 6px; background: none; color: #EEF3FA; font: 600 13px/1.4 'Instrument Sans', system-ui, sans-serif; }
.demo-theme .d, html.dark .demo-theme .l { display: none; }
html.dark .demo-theme .d { display: inline; }

/* Leiste unter dem Kopf: Symbole (DHL, Laden) mittig zum Text, „in Deutschland“ dünn darunter */
.mf-trust > div { align-items: center; }
.mf-trust .demo-ship .s { display: block; font-weight: 400; margin-top: 2px; }

/* Produktkarten: Bildfeld im Format der PSA-Slabs (~3:5) und Foto ganz zeigen – das Theme-Feld 3:4 mit „cover“
   schnitt oben/unten ab. Festes Format statt „auto“, damit Karten einer Reihe gleich hoch bleiben. */
.mf-card__img { aspect-ratio: 3 / 5; }
.mf-card__img > img { object-fit: contain; }

/* Kunden-Demo: Sets (4er-Set) – Hinweis an Karte und Produktseite */
.demo-set { display: inline-block; padding: 1px 7px; border-radius: 10px; background: #f3b300; color: #1a1300; font-weight: 700; font-size: .85em; margin-right: 4px; }
.mf-info__tags .t.demo-set { background: #f3b300; color: #1a1300; border-color: #f3b300; }
.demo-setnote { margin: 4px 0 18px; padding: 14px 16px; border: 1px solid #f3d27a; background: #fff8e1; border-radius: 12px; font-size: 15px; line-height: 1.45; }
.demo-setnote b { display: block; font-size: 16px; margin-bottom: 2px; }
.demo-setnote ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.demo-setnote li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #f3e2a8; padding-top: 4px; }
.demo-setnote i { font-style: normal; color: #6b5a1e; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.dark .demo-setnote { background: rgba(243, 179, 0, .08); border-color: rgba(243, 179, 0, .4); }
html.dark .demo-setnote li { border-top-color: rgba(243, 179, 0, .25); }
html.dark .demo-setnote i { color: #e8c96a; }

/* Kunden-Demo UK: Royal-Mail-Logo statt DHL (höher als das DHL-Band) */
img.mf-dhl.demo-rm { width: auto !important; height: 38px !important; }
/* Beispielshop je Land: Versandlogo (Royal Mail, PostNL, InPost …) in der Höhe aus nations.mjs */
img.mf-dhl.demo-nat { width: auto !important; height: var(--nat-h, 24px) !important; }
.mf-ann img.mf-dhl.demo-nat { height: calc(var(--nat-h, 24px) * 0.65) !important; }
.dhlbox:has(.demo-nat) { width: auto !important; height: auto !important; padding: 0 !important; background: none !important; }
.mf-line span:has(> img.demo-nat) { width: auto !important; }
.mf-ann img.mf-dhl.demo-rm { height: 24px !important; }
.dhlbox:has(.demo-rm) { width: auto !important; height: auto !important; padding: 0 !important; background: none !important; }
.mf-line span:has(> img.demo-rm) { width: auto !important; }

/* Beispielshop dunkel (Farben aus milos-fero-dunkel.pages.dev): aktiv mit <html class="dark">, Aufruf ?dunkel */
html.dark {
  --mf-ink: #eef2f5; --mf-soft: #a9b4bf; --mf-muted: #8593a1;
  --mf-line: #2b3a4c; --mf-line2: #1c2836; --mf-surf: #0b121c; --mf-surf2: #111b28;
  --mf-on-blue: #00142b; --mf-link: #3fb2f5; --mf-red: #ff5a64; --mf-good: #6fdc9a;
  color-scheme: dark;
}
html.dark body, html.dark .mf { background: #05070b; }
html.dark .mf-grad { background-image: linear-gradient(180deg, #ffffff 0%, #dfe3e6 38%, #8e989f 52%, #eef1f3 100%); }
html.dark .mf-search button, html.dark .mf-step__h i { color: #05070b; }
html.dark .mf-menu, html.dark .mf-rev { background: #0b121c; box-shadow: none; }
html.dark .mf-cart__row img { background: #111b28; }
html.dark .mf-sellcta { background: linear-gradient(120deg, #0f416f, #05070b 75%); }
html.dark .mf-foot { background: #010203; color: #b3bec9; border-top-color: #1c2836; }
html.dark .mf-foot__legal { border-top-color: #1c2836; }
html.dark .mf-ok { background: rgba(111, 220, 154, .08); border-color: rgba(111, 220, 154, .4); }
html.dark .mf-step__pic { background: radial-gradient(ellipse 70% 70% at 50% 45%, #1c2836, #0b121c 80%); }
html.dark .mf-rev__av, html.dark .mf-checks .ic { background: rgba(3, 149, 233, .16); }
html.dark .demo-wa { background: rgba(37, 211, 102, .08); border-color: rgba(37, 211, 102, .35); }
html.dark .demo-wa > div, html.dark .demo-wa > div b { color: #d8f5e3; }
html.dark .mf input, html.dark .mf select, html.dark .mf textarea { background: #0b121c; color: #eef2f5; border-color: #2b3a4c; }
html.dark .mf svg[stroke="#06101c"] { stroke: #eef2f5; }
html.dark .mf svg[stroke="#0070b8"] { stroke: #3fb2f5; }
html.dark .mf svg [fill="#0070b8"], html.dark .mf svg[fill="#0070b8"] { fill: #3fb2f5; }
html.dark .mf svg[stroke="#0f7a4a"] { stroke: #6fdc9a; }
html.dark .mf svg [fill="#0f7a4a"], html.dark .mf svg[fill="#0f7a4a"] { fill: #6fdc9a; }
html.dark .mf a[style*="color:#06101c"] { color: #eef2f5 !important; }

/* Dunkel mit Orange statt Blau als Akzentfarbe (Buttons, Links, aktive Filter, Leiste oben) */
html.dark { --mf-blue: #FF8A1F; --mf-on-blue: #1A0B00; --mf-link: #FFA552; }
html.dark .mf-ann { background: #6B2E05; color: #FFE4CC; }
html.dark .mf-sellcta { background: linear-gradient(120deg, #6B2E05, #05070b 75%); }
html.dark .mf-hero__box, html.dark .mf-shero__box { background: radial-gradient(ellipse 80% 90% at 0% 0%, rgba(255, 138, 31, .14), transparent 60%), var(--mf-surf); }
html.dark .mf-rev__av, html.dark .mf-checks .ic { background: rgba(255, 138, 31, .16); }
html.dark .mf-brand img { box-shadow: none; }

/* Farben aus dem Logo (#e8282c), erzeugt von akquise/make.py */
:root { --mf-blue: #e8282c; --mf-on-blue: #ffffff; --mf-link: #cc2327; }
.mf-ann { background: #2a0708; color: #fcdfdf; }
.mf-hero__box, .mf-shero__box { background: radial-gradient(ellipse 80% 90% at 0% 0%, rgba(232, 40, 44, 0.18), transparent 60%), var(--mf-surf) !important; }
.mf-sellcta { background: linear-gradient(120deg, #fdeaea, #fff 75%) !important; }
.mf-foot { background: #1c0505 !important; color: #fad4d5 !important; border-top-color: #460c0d !important; }
.mf-rev__av, .mf-checks .ic { background: rgba(232, 40, 44, 0.18) !important; }
.mf-brand img { box-shadow: 0 0 0 2px #e8282c, 0 6px 18px rgba(232, 40, 44, 0.3) !important; }
.mf .mf-sell-link, .mf-sell-link { color: #cc2327 !important; }
html.dark { --mf-blue: #eb484c; --mf-on-blue: #ffffff; --mf-link: #f38e91; }
html.dark .mf-ann { background: #460c0d; color: #fcdfdf; }
html.dark .mf-sellcta { background: linear-gradient(120deg, #460c0d, #05070b 75%) !important; }
html.dark .mf-hero__box, html.dark .mf-shero__box { background: radial-gradient(ellipse 80% 90% at 0% 0%, rgba(232, 40, 44, 0.14), transparent 60%), var(--mf-surf) !important; }
html.dark .mf-rev__av, html.dark .mf-checks .ic { background: rgba(232, 40, 44, 0.16) !important; }
html.dark .mf-foot { background: #0e0203 !important; }
html.dark .mf .mf-sell-link, html.dark .mf-sell-link { color: #f38e91 !important; }