/* ============================================================================
   MARKTPLATZ

   Warm, breit, verkaufsstark. Koralle auf Sand, Kategorieband unter dem
   Kopf, Rabattcode als Klebeetikett, Schreibschrift fuer die Oberzeile.

   Die naheliegende Wahl fuer einen Laden, der taeglich verkauft.
   ============================================================================ */

@font-face{
  font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/caveat.woff") format("woff");
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("/assets/fonts/archivo.woff") format("woff");
}
@font-face{
  font-family:"Inter UI";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/inter.woff") format("woff");
}

[data-theme="marktplatz"]{
  --sans:"Inter UI",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Archivo","Inter UI",system-ui,sans-serif;
  --script:"Caveat","Segoe Script","Bradley Hand",cursive;
  --tracking:-0.03em;

  --pri:#FF5B37;
  --pri-dark:#E8431F;
  --acc:#1FA35B;

  --bg:#FFFFFF;
  --fg:#22252A;
  --muted:#6E7480;
  --line:#F0E6E1;
  --card:#FFFFFF;
  --soft:#FFF6F2;
  --tint:#FFE9E1;

  --r:14px;
  --r-lg:24px;
}
@media (prefers-color-scheme:dark){
  [data-theme="marktplatz"]{
    --bg:#17110F;--fg:#F7EFEB;--muted:#B0A29C;--line:#2E2320;
    --card:#1F1815;--soft:#231A17;--tint:#2E1F1A;
  }
}

/* Die Hauptzeile in zwei Toenen, wie auf den Bannern. */
[data-theme="marktplatz"] .sf-hero h1{font-weight:900;text-transform:none}
[data-theme="marktplatz"] .sf-hero h1 em{color:var(--pri)}

/* Kategorieband direkt unter dem Menue. */
[data-theme="marktplatz"] .sf-cat{background:var(--soft)}
[data-theme="marktplatz"] .sf-cat:hover{background:var(--pri);color:#fff}
[data-theme="marktplatz"] .sf-cat:hover .cat-ic{color:#fff}
[data-theme="marktplatz"] .sf-cat:hover span{color:rgba(255,255,255,.85)}

[data-theme="marktplatz"] .sf-kind{background:var(--pri);color:#fff}
[data-theme="marktplatz"] .sf-add{background:var(--tint)}
[data-theme="marktplatz"] .sf-pitch{
  background:linear-gradient(120deg,#B3300F 0%,var(--pri) 55%,#FF8A5B 100%)
}