/* =========================================================
   BELO — Farbthema Rot / Weiss
   Wird NACH style.css geladen und ueberschreibt nur Farben.
   style.css traegt Layout, Abstaende und Effekte.
   ========================================================= */

:root{
  /* Grundflaechen: gebrochenes Weiss statt Reinweiss — waermer und
     angenehmer zu lesen als #FFF auf grossen Flaechen. */
  --bg:#FBFAF8;
  --bg-2:#F3F1ED;
  --surface:#FFFFFF;
  --surface-2:#F7F5F1;

  --line:rgba(20,20,26,.11);
  --line-2:rgba(20,20,26,.22);

  --red:#D80500;            /* eine Spur dunkler — auf Weiss sonst zu grell */
  --red-hot:#FF2A18;

  --text:#15151B;
  --muted:#5E5E68;
  --muted-2:#66666F;      /* dunkler als im dunklen Thema: auf Weiss sonst nur 3,1:1 */
}

body{background:var(--bg);color:var(--text)}
::selection{background:var(--red);color:#fff}

/* ---------- Marken- und BELO-Logos ----------
   Die Dateien liegen weiss auf transparent vor. invert(1) macht daraus
   Schwarz und behaelt die Transparenz — kein zweiter Satz Dateien noetig. */
.hdr__logo img,
.ft__brand img,
.brand__logo:not(.brand__logo--wort),
.mhead img{filter:invert(1)}
.brand:hover .brand__logo:not(.brand__logo--wort){filter:invert(1) brightness(1.6)}

/* Schriftzug statt Logodatei: invert() wuerde hier die Farbe umdrehen —
   deshalb oben ausgenommen und stattdessen direkt eingefaerbt. */
.brand__logo--wort{color:var(--text)}
.brand:hover .brand__logo--wort{color:#fff}

/* ---------- Kopfzeile ---------- */
/* Im hellen Thema muss der Verlauf aufhellen statt abdunkeln — die Navigation
   ist hier dunkel und steht sonst auf dunklen Bildstellen. */
.hdr::before{opacity:.95}
.nav a{color:#3A3A44}
.lang a{color:var(--muted-2)}
.lang a:hover{color:var(--text)}
.lang span{color:var(--text)}
.legal__hint{background:var(--surface-2);color:var(--muted-2)}
.btn--ghost{border-color:rgba(20,20,26,.3)}
.burger i{background:var(--text)}
.hdr.stuck{
  background:rgba(251,250,248,.86);
  border-bottom-color:var(--line);
}
.burger i{background:var(--text)}

/* ---------- Buttons ---------- */
.btn--red::before{background:var(--bg)}
.btn--red:hover{color:var(--red);border-color:var(--red)}

/* ---------- Hero ----------
   Foto bleibt vollflaechig, der Verlauf wird hell statt dunkel.
   Die Schrift steht dadurch dunkel auf aufgehelltem Bild. */
.hero__media img{
  filter:grayscale(.1) contrast(1.02) saturate(1.06) brightness(1.02);
}
.hero__scrim{
  background:
    linear-gradient(to right,var(--bg) 0%,rgba(251,250,248,.94) 28%,rgba(251,250,248,.62) 52%,rgba(251,250,248,.10) 76%,rgba(251,250,248,.34) 100%),
    linear-gradient(to top,var(--bg) 4%,rgba(251,250,248,.40) 34%,transparent 62%),
    radial-gradient(70% 70% at 88% 26%,rgba(216,5,0,.14),transparent 62%),
    radial-gradient(120% 90% at 10% 84%,rgba(216,5,0,.10),transparent 58%);
}
.hero__grid{opacity:.7}
.hero__h{text-shadow:0 2px 26px rgba(251,250,248,.9)}
.hero__lead{color:var(--text);text-shadow:0 1px 16px rgba(251,250,248,.95)}
.hero__sub{color:var(--muted);text-shadow:0 1px 14px rgba(251,250,248,.95)}
.hero__scroll{background:var(--line-2)}

/* ---------- Produkt-Leiste ---------- */
.strip{background:var(--bg-2)}
.sitem:hover{background:#fff}
.sitem__ph img{filter:drop-shadow(0 10px 18px rgba(20,20,26,.18))}
.strip__fade--l{background:linear-gradient(to right,var(--bg-2),transparent)}
.strip__fade--r{background:linear-gradient(to left,var(--bg-2),transparent)}

/* ---------- Spotlight ---------- */
.spot{background:var(--bg)}
.spot__glow{
  background:radial-gradient(45% 55% at 32% 50%,rgba(216,5,0,.13),transparent 70%);
}
.spot__wm{color:rgba(20,20,26,.045)}
.spot__claim{color:var(--text)}
.spot__prod>img{filter:drop-shadow(0 34px 50px rgba(20,20,26,.24))}
.hs__lbl{
  background:rgba(255,255,255,.97);border-color:var(--line-2);
  box-shadow:0 14px 34px rgba(20,20,26,.14);
}
.hs__dot{
  box-shadow:
    0 0 0 5px rgba(216,5,0,.18),
    0 0 14px 3px rgba(216,5,0,.35),
    0 0 30px 7px rgba(216,5,0,.14);
}
.hs__dot:hover,.hs__dot:focus-visible{
  box-shadow:
    0 0 0 6px rgba(216,5,0,.28),
    0 0 22px 5px rgba(216,5,0,.5),
    0 0 52px 14px rgba(216,5,0,.22);
}
/* Die hellen Noten waeren auf Weiss unsichtbar — dunkel statt weiss */
.note--pale{color:#2A2A33;filter:drop-shadow(0 0 10px rgba(20,20,26,.2))}
.note{filter:drop-shadow(0 0 12px rgba(216,5,0,.4))}

/* ---------- Sortiment ---------- */
.split__card{background:var(--surface);box-shadow:0 1px 2px rgba(20,20,26,.04)}
.split__card::before{
  background:linear-gradient(to top,rgba(216,5,0,.14),transparent);
}
.split__media img{filter:drop-shadow(0 20px 30px rgba(20,20,26,.22))}

/* ---------- Marken-Raster ---------- */
.brand{background:var(--surface)}
.brand::before{
  background:linear-gradient(160deg,var(--red),rgba(160,4,0,.92));
}
.brand:hover .brand__name{color:#fff}
.brand:hover .brand__cat{color:rgba(255,255,255,.8)}
.brand__more{background:rgba(0,0,0,.16)}
.chip.is-on b{color:rgba(255,255,255,.7)}

/* ---------- Produktkarten ---------- */
.pcard{background:var(--surface)}
.pcard:hover{background:var(--surface-2)}
.pcard__ph::after{
  background:radial-gradient(60% 50% at 50% 100%,rgba(216,5,0,.16),transparent 72%);
}
.pcard__ph img{filter:drop-shadow(0 14px 22px rgba(20,20,26,.2))}
.rnav{color:var(--muted)}

/* ---------- Katalog ---------- */
.katalog{background:var(--bg-2)}
.katalog__img img{
  border-color:var(--line);
  box-shadow:-24px 34px 60px rgba(20,20,26,.22);
}
.katalog__play{box-shadow:0 16px 34px rgba(20,20,26,.28)}

/* ---------- Haendler ---------- */
.card{background:var(--bg)}
.card:hover{background:var(--surface-2)}
.cta-band{background:var(--surface)}
.cta-band::before{
  background:radial-gradient(closest-side,rgba(216,5,0,.14),transparent);
}

/* ---------- Footer ---------- */
.ft__wm{color:rgba(20,20,26,.038)}

/* ---------- Dialoge ---------- */
.modal{background:var(--bg);border-color:var(--line-2)}
.modal::backdrop{background:rgba(30,28,26,.5)}
.mhead{background:var(--bg-2)}
.mhead::before{
  background:radial-gradient(closest-side,rgba(216,5,0,.16),transparent);
}
.mprod{background:var(--bg)}
.mprod:hover{background:var(--surface-2)}
.modal__x{color:var(--muted)}

.flip{background:var(--bg)}
.flip::backdrop{background:rgba(30,28,26,.7)}
.flip__bar{background:var(--bg-2)}
.flip__x{color:var(--muted)}
.flip__load{background:var(--bg)}
.flip__stage,.flip__stage iframe{background:var(--bg-2)}

/* ---------- Rechtstexte ---------- */
.legal__block{background:var(--surface)}

/* ---------- Mobile Navigation ---------- */
@media (max-width:860px){
  .nav{background:rgba(251,250,248,.98)}
}

/* ---------- Marken-Landingpage ---------- */
.mlp__kopf{background:linear-gradient(180deg,var(--surface-2),var(--bg))}
.mlp__logo{filter:invert(1)}          /* Logodateien liegen weiss vor */
.mlp__logo--wort{filter:none;color:var(--text)}
.mlp__h{color:var(--text)}
.mlp__lead{color:var(--muted-2)}
.mlp__fliess p{color:var(--muted-2)}
.mlp__fliess strong{color:var(--text)}
.mlp__gh{color:var(--text)}
.mlp__gh b{background:var(--red);color:#fff}
.mlp__teile{background:var(--surface-2)}
.mlp__tgruppe h3{color:var(--text)}
.mlp__tgruppe a{color:var(--muted-2)}
.mlp__tgruppe a:hover{color:var(--red)}
.mlp__tp{color:var(--text)}