/* ============================================================================
   fs-b2b.css - Grosshandelsseite /vapes-grosshandel_1
   Besitzer: Sitzung REGISTRIERUNG (27.08.2026)
   ----------------------------------------------------------------------------
   Diese Datei traegt die neu gebaute Seite. Sie hat die Stil-Angleichung vom
   23.08. abgeloest, die noch das alte Markup bediente; Sicherung davon liegt
   unter ~/backups/fs-b2b.css-vor-uebernahme-*.

   AUFBAU (freigegeben von Yunus am 27.08.: "das ist perfekt! so lassen wir es!"):
   schwarzer Hero mit vier Zahlen in Magenta, Konditionen, Markenlogos, Ablauf in
   drei Kacheln, Kundenlogos, schwarzer Warum-Block, FAQ, Abschluss.
   392 Woerter statt 1.093 in der alten Fassung.

   FARBEN: Vorbild ist der Variantenwaehler der Produktdetailseite - schwarze
   Flaeche (--brand-tinte), Zahl in --brand-deko, Beschriftung weiss. Das Lila
   der alten Seite kommt nicht mehr vor; Farbe traegt nur Zahl, Akzentstrich
   und Handlungsknopf.

   FORMENSPRACHE aus fs-kanon.css: Radius 0, keine Schatten, Anton nur im 400er
   Schnitt, Groessen aus --fs-t-*, Knopfhoehen aus --fs-knopf-*.

   ACHTUNG BEIM LIVEGANG: Auf LIVE laeuft noch das ALTE Markup, und dessen CSS
   steckt dort in plugins/knm_custom_code/frontend/css/custom.css (Zeilen 1428ff,
   zerteilt - die Medienabfragen stehen hinter einem fremden Abschnitt fuer
   #fs-legal-page). Markup und CSS muessen gemeinsam hinueber, sonst steht die
   Seite ohne Gestaltung da.
   ============================================================================ */

#fs-b2b-page{
  --e-schwarz: var(--brand-tinte,   #111114);
  --e-magenta: var(--brand-deko,    #e5169f);
  --e-aktion:  var(--brand-aktion,  #c90f88);
  --e-tinte:   var(--brand-tinte,   #111114);
  --e-leise:   var(--brand-grau,    #6c6c75);
  --e-linie:   var(--brand-haar,    #e4e4e7);
  --e-flaeche: var(--brand-flaeche, #f6f5f3);
  --e-papier:  var(--brand-papier,  #ffffff);

  max-width:1240px;
  margin:0 auto;
  padding:0 16px 72px;
  color:var(--e-tinte);
  line-height:1.55;
}
#fs-b2b-page *{ box-sizing:border-box; }
#fs-b2b-page a{ text-decoration:none; }

/* Das Theme setzt den Linktitel als eigene H1 ueber den Inhalt. Zusammen mit
   der H1 im Hero waeren das ZWEI H1 - fuer die Suche ein Fehler, fuer den
   Leser eine Dopplung. */
body:has(#fs-b2b-page) .index-heading-wrapper{ display:none; }

/* --- Ueberschriften: Hausmass (gemessen an /faq: 400, 1.08-1.2, +0.015em) - */
#fs-b2b-page h1,
#fs-b2b-page h2,
#fs-b2b-page h3{
  font-weight:400;
  letter-spacing:.015em;
  text-transform:uppercase;
  margin:0;
}
#fs-b2b-page h1{ font-size:clamp(28px, 3.6vw, 44px); line-height:1.08; }
#fs-b2b-page h2{ font-size:clamp(22px, 2.6vw, 32px); line-height:1.12; margin-bottom:6px; }
#fs-b2b-page h3{ font-size:var(--fs-t-l, 20px); line-height:1.15; }
#fs-b2b-page p{ margin:.4rem 0 0; font-size:var(--fs-t-m, 16px); }

/* --- Hero: schwarz ------------------------------------------------------- */
#fs-b2b-page .fsbe-hero{
  position:relative;
  margin:0 0 44px;
  padding:40px 34px 34px;
  background:var(--e-schwarz);
  color:var(--e-papier);
  overflow:hidden;
}
/* Feines Diagonalmuster - dieselbe Handschrift wie im Age-Gate, aber leise */
#fs-b2b-page .fsbe-hero::before{
  content:"";
  position:absolute; inset:0 auto 0 0; width:150px;
  background:repeating-linear-gradient(-35deg, rgba(255,255,255,.06) 0 2px, transparent 2px 11px);
  pointer-events:none;
}
#fs-b2b-page .fsbe-hero > *{ position:relative; z-index:1; }
#fs-b2b-page .fsbe-eyebrow{
  margin:0 0 12px; color:var(--e-magenta);
  font-size:var(--fs-t-2xs, 11px); letter-spacing:.16em; text-transform:uppercase; font-weight:700;
}
#fs-b2b-page .fsbe-lead{ max-width:62ch; margin-top:16px; font-size:var(--fs-t-l, 20px); line-height:1.45; color:rgba(255,255,255,.86); }

/* Zahlenleiste - Vorbild Variantenwaehler PDP: Zahl in Magenta, Wort weiss */
#fs-b2b-page .fsbe-zahlen{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0; margin:30px 0 0; padding:0; list-style:none;
  border:1px solid rgba(255,255,255,.16);
}
#fs-b2b-page .fsbe-zahlen li{
  display:flex; flex-direction:column; gap:4px;
  padding:18px 18px 16px;
  border-right:1px solid rgba(255,255,255,.16);
}
#fs-b2b-page .fsbe-zahlen li:last-child{ border-right:0; }
#fs-b2b-page .fsbe-zahlen strong{
  font-family:"FS Display", Arial, sans-serif; font-weight:400;
  font-size:clamp(26px, 2.8vw, 38px); line-height:1; letter-spacing:.015em;
  color:var(--e-magenta);
}
#fs-b2b-page .fsbe-zahlen span{
  font-size:var(--fs-t-xs, 12px); letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.78);
}

#fs-b2b-page .fsbe-aktionen{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
#fs-b2b-page .fsbe-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--fs-knopf-l, 52px); padding:0 26px;
  font-size:var(--fs-knopf-fs-l, 15px); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
#fs-b2b-page .fsbe-btn-primaer{ background:var(--e-aktion); color:#fff; }
#fs-b2b-page .fsbe-btn-primaer:hover{ background:var(--e-magenta); color:#fff; }
#fs-b2b-page .fsbe-btn-flach{ border:1px solid rgba(255,255,255,.5); color:#fff; }
#fs-b2b-page .fsbe-btn-flach:hover{ background:#fff; color:var(--e-schwarz); border-color:#fff; }

#fs-b2b-page .fsbe-betrieb{ margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16); }
#fs-b2b-page .fsbe-betrieb p{ margin:0 0 12px; font-size:var(--fs-t-s, 14px); color:rgba(255,255,255,.7); }
#fs-b2b-page .fsbe-betrieb-gitter{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
#fs-b2b-page .fsbe-betrieb-gitter a{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--fs-knopf-m, 44px); padding:0 10px;
  border:1px solid rgba(255,255,255,.5); color:#fff;
  font-size:var(--fs-knopf-fs-m, 14px); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; text-align:center;
}
#fs-b2b-page .fsbe-betrieb-gitter a:hover{ background:#fff; color:var(--e-schwarz); border-color:#fff; }

/* --- Helle Abschnitte ---------------------------------------------------- */
#fs-b2b-page .fsbe-abschnitt{ margin:0 0 48px; }
#fs-b2b-page .fsbe-unterzeile{ margin:0 0 16px; color:var(--e-leise); font-size:var(--fs-t-s, 14px); }
#fs-b2b-page .fsbe-gitter{ display:grid; gap:1px; margin-top:20px; background:var(--e-linie); border:1px solid var(--e-linie); }
#fs-b2b-page .fsbe-gitter-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
#fs-b2b-page .fsbe-feld{ padding:24px; background:var(--e-papier); }
#fs-b2b-page .fsbe-feld h3{ padding-left:14px; border-left:3px solid var(--e-magenta); }
#fs-b2b-page .fsbe-feld p{ color:var(--e-leise); }

/* --- Markenlogos ---------------------------------------------------------
   Fuer Lost Mary, Flerbar und HQD liegt im Shop kein Logo - dort steht die
   Wortmarke im Hausschnitt, damit die Reihe nicht bricht. */
#fs-b2b-page .fsbe-marken{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; background:var(--e-linie); border:1px solid var(--e-linie);
}
#fs-b2b-page .fsbe-marke{
  display:flex; align-items:center; justify-content:center;
  min-height:118px; padding:22px; background:var(--e-papier);
}
/* Alle Logodateien liegen auf derselben Leinwand (400x140) und sind darin
   optisch auf gleiche Deckungsflaeche gerechnet - ein breiter Schriftzug traegt
   also gleich viel Schwarz wie eine kompakte Raute. Deshalb genuegt hier eine
   einzige Groesse; die Datei sorgt fuer den Ausgleich, nicht das CSS. */
#fs-b2b-page .fsbe-marke img,
#fs-b2b-page .fsbe-kunde img{
  width:100%; max-width:190px; height:auto;
  object-fit:contain;
}
#fs-b2b-page .fsbe-marke-wort span{
  font-family:"FS Display", Arial, sans-serif; font-weight:400;
  font-size:var(--fs-t-xl, 24px); letter-spacing:.015em; text-transform:uppercase;
  color:var(--e-tinte);
}

/* --- Ablauf: drei Kacheln mit grosser Ziffer ---------------------------- */
#fs-b2b-page .fsbe-schritte{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px; margin:20px 0 0; padding:0; list-style:none;
  background:var(--e-linie); border:1px solid var(--e-linie);
  counter-reset:schritt;
}
#fs-b2b-page .fsbe-schritte li{
  position:relative; padding:26px 24px 24px; background:var(--e-papier);
}
#fs-b2b-page .fsbe-nr{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:16px;
  background:var(--e-schwarz); color:var(--e-magenta);
  font-family:"FS Display", Arial, sans-serif; font-weight:400;
  font-size:26px; line-height:1;
}
#fs-b2b-page .fsbe-schritte h3{ margin-bottom:6px; }
#fs-b2b-page .fsbe-schritte p{ color:var(--e-leise); }
/* Der Pfeil zwischen den Kacheln zeigt die Richtung, ohne ein Bild zu sein. */
#fs-b2b-page .fsbe-schritte li:not(:last-child)::after{
  content:"";
  position:absolute; top:50px; right:-9px; z-index:2;
  width:16px; height:16px;
  background:var(--e-papier);
  border-top:1px solid var(--e-linie); border-right:1px solid var(--e-linie);
  transform:rotate(45deg);
}

/* --- Kundenlogos --------------------------------------------------------- */
#fs-b2b-page .fsbe-kunden{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  gap:1px; margin-top:20px; background:var(--e-linie); border:1px solid var(--e-linie);
}
#fs-b2b-page .fsbe-kunde{
  display:flex; align-items:center; justify-content:center;
  min-height:104px; padding:14px; background:var(--e-papier);
}

/* AVIA liegt im Shop noch nicht als Bild vor - Platzhalter statt Luecke. */
#fs-b2b-page .fsbe-kunde-fehlt span{
  font-family:"FS Display", Arial, sans-serif; font-weight:400;
  font-size:var(--fs-t-l, 20px); letter-spacing:.015em;
  color:var(--e-leise);
}

/* --- Dunkler Block ------------------------------------------------------- */
#fs-b2b-page .fsbe-dunkel{
  margin:0 0 48px; padding:38px 34px 34px;
  background:var(--e-schwarz); color:var(--e-papier);
}
#fs-b2b-page .fsbe-dunkel h2{ margin-bottom:22px; }
#fs-b2b-page .fsbe-dunkel-gitter{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0;
}
#fs-b2b-page .fsbe-dunkel-gitter > div{
  padding:0 26px; border-right:1px solid rgba(255,255,255,.16);
}
#fs-b2b-page .fsbe-dunkel-gitter > div:first-child{ padding-left:0; }
#fs-b2b-page .fsbe-dunkel-gitter > div:last-child{ border-right:0; padding-right:0; }
#fs-b2b-page .fsbe-dunkel h3{ margin-bottom:8px; color:var(--e-magenta); }
#fs-b2b-page .fsbe-dunkel p{ color:rgba(255,255,255,.78); }

/* --- FAQ ----------------------------------------------------------------- */
#fs-b2b-page .fsbe-faq{ margin-top:20px; border:1px solid var(--e-linie); }
#fs-b2b-page .fsbe-faq details{ border-bottom:1px solid var(--e-linie); }
#fs-b2b-page .fsbe-faq details:last-child{ border-bottom:0; }
#fs-b2b-page .fsbe-faq summary{
  cursor:pointer; padding:17px 20px; list-style:none;
  font-size:var(--fs-t-m, 16px); font-weight:700;
}
#fs-b2b-page .fsbe-faq summary::-webkit-details-marker{ display:none; }
#fs-b2b-page .fsbe-faq summary::after{ content:"+"; float:right; color:var(--e-magenta); font-size:20px; line-height:1; }
#fs-b2b-page .fsbe-faq details[open] summary{ color:var(--e-tinte); }
#fs-b2b-page .fsbe-faq details[open] summary::after{ content:"–"; }
#fs-b2b-page .fsbe-faq details p{ margin:0; padding:0 20px 18px; color:var(--e-leise); }

/* --- Schluss ------------------------------------------------------------- */
#fs-b2b-page .fsbe-schluss{ padding:32px 34px; background:var(--e-flaeche); }
#fs-b2b-page .fsbe-schluss p{ max-width:62ch; color:var(--e-leise); }
#fs-b2b-page .fsbe-kontakt{ margin:16px 0 22px; }
#fs-b2b-page .fsbe-kontakt a{
  margin-right:18px; color:var(--e-tinte);
  text-decoration:underline; text-underline-offset:3px;
}
#fs-b2b-page .fsbe-kontakt a:hover{ color:var(--e-aktion); }

/* --- Schmale Geraete ----------------------------------------------------- */
@media (max-width: 1199.98px){
  #fs-b2b-page .fsbe-kunden{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 991.98px){
  #fs-b2b-page .fsbe-gitter-3,
  #fs-b2b-page .fsbe-marken{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #fs-b2b-page .fsbe-schritte{ grid-template-columns:1fr; }
  #fs-b2b-page .fsbe-schritte li:not(:last-child)::after{
    top:auto; right:auto; bottom:-9px; left:38px; transform:rotate(135deg);
  }
  #fs-b2b-page .fsbe-dunkel-gitter{ grid-template-columns:1fr; gap:24px; }
  #fs-b2b-page .fsbe-dunkel-gitter > div{ padding:0; border-right:0; }
}
@media (max-width: 767.98px){
  #fs-b2b-page .fsbe-hero{ padding:28px 18px 24px; }
  #fs-b2b-page .fsbe-hero::before{ width:74px; }
  #fs-b2b-page .fsbe-zahlen{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #fs-b2b-page .fsbe-zahlen li{ border-bottom:1px solid rgba(255,255,255,.16); }
  #fs-b2b-page .fsbe-zahlen li:nth-child(2n){ border-right:0; }
  #fs-b2b-page .fsbe-zahlen li:nth-last-child(-n+2){ border-bottom:0; }
  #fs-b2b-page .fsbe-betrieb-gitter{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #fs-b2b-page .fsbe-betrieb-gitter a{ min-height:38px; font-size:var(--fs-t-xs, 12px); }
  #fs-b2b-page .fsbe-gitter-3,
  #fs-b2b-page .fsbe-marken{ grid-template-columns:1fr; }
  #fs-b2b-page .fsbe-kunden{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #fs-b2b-page .fsbe-btn{ width:100%; }
  #fs-b2b-page .fsbe-dunkel{ padding:26px 18px 24px; }
  #fs-b2b-page .fsbe-schluss{ padding:24px 18px; }
  #fs-b2b-page .fsbe-kontakt a{ display:block; margin:0 0 8px; }
}
@media (max-width: 479.98px){
  #fs-b2b-page .fsbe-zahlen li{ padding:14px; }
  #fs-b2b-page .fsbe-zahlen strong{ font-size:26px; }
  #fs-b2b-page .fsbe-zahlen span{
    font-size:10px; letter-spacing:.05em; line-height:1.3;
    overflow-wrap:anywhere; hyphens:auto;
  }
}

/* ============================================================================
   DURCHSETZUNG GEGEN DIE LINKSEITEN-REGELN
   ----------------------------------------------------------------------------
   Gemessen am lebenden Objekt: Zahlen, H2 und H3 kamen in #111114 heraus statt
   in Magenta bzw. Weiss - auf schwarzem Grund also unsichtbar. Auch die
   Schriftgroessen wurden ueberfahren (H2 22px statt 32px).

   Ursache ist fs-pages.css mit `#content:not(:has(#fs-geschmacksfinder))
   .link-content h2` - ein Selektor mit ZWEI IDs, gegen den keine vertretbare
   Klassenkette ankommt. Dieselbe Stelle ist in fs-register.css bereits
   dokumentiert. Deshalb hier !important, und nur fuer die Eigenschaften, die
   tatsaechlich ueberfahren wurden.
   ============================================================================ */
#fs-b2b-page .fsbe-zahlen strong{
  color:var(--e-magenta) !important;
  font-size:clamp(26px, 2.8vw, 38px) !important;
  /* <strong> bringt vom Browser 700 mit. Anton hat nur den 400er Schnitt -
     der Browser haette die Zahlen also kuenstlich gefettet, genau der Fehler,
     den fs-kanon.css Block 1 an 35 Stellen im Shop aufgeraeumt hat.
     Nachgemessen: kam als font-weight 700 heraus. */
  font-weight:400 !important;
}
#fs-b2b-page .fsbe-nr,
#fs-b2b-page .fsbe-marke-wort span{ font-weight:400 !important; }
#fs-b2b-page h1,
#fs-b2b-page h2,
#fs-b2b-page h3{
  font-weight:400 !important;
  text-transform:uppercase !important;
}
#fs-b2b-page h2{ font-size:clamp(22px, 2.6vw, 32px) !important; }
#fs-b2b-page h3{ font-size:var(--fs-t-l, 20px) !important; }
#fs-b2b-page .fsbe-dunkel h2{ color:var(--e-papier) !important; }
#fs-b2b-page .fsbe-dunkel h3{ color:var(--e-magenta) !important; }
#fs-b2b-page .fsbe-abschnitt h2,
#fs-b2b-page .fsbe-schluss h2,
#fs-b2b-page .fsbe-feld h3,
#fs-b2b-page .fsbe-schritte h3{ color:var(--e-tinte) !important; }
#fs-b2b-page .fsbe-hero h1{ color:var(--e-papier) !important; }
#fs-b2b-page .fsbe-nr{ color:var(--e-magenta) !important; }

/* AVIA liegt als SVG vor und durchlaeuft damit nicht den optischen Ausgleich
   der Rasterlogos - ohne Begrenzung steht es rund ein Drittel groesser in der
   Reihe als die uebrigen. */
#fs-b2b-page .fsbe-kunde img[src$=".svg"]{
  max-width:132px;
}

/* Die Markenkacheln fuehren ins Sortiment - acht interne Links, die die alte
   Fassung nicht hatte. Der Autolinker fasst sie nicht an, weil in der Kachel
   kein Markenname als Text steht, sondern nur das Logo. */
#fs-b2b-page .fsbe-marke a{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
#fs-b2b-page .fsbe-marke:hover{ background:var(--e-flaeche); }