/* ============================================================================
   FS-SEOTEXT — FOGSMOKE INFO REVEAL (Sitzung SEOTEXT, 20.08.2026)
   ----------------------------------------------------------------------------
   Startseiten-Abschlussblock: SEO-Fliesstext + FAQ als helle Editorial-Flaeche
   ("warmes Off-White, keine Karten, keine Schatten"), die am Seitenende den
   dunklen Footer freilegt. Markup: OPC kPage 345, opc_page_bottom (Text-
   Portlet, id #fs-info). Verhalten: fs-seotext.js (Accordion, Eintritt,
   Footer-Reveal). Ohne JS: alles sichtbar und bedienbar ueber die
   :target-freie Grundhaltung — Antworten offen? Nein: ohne JS bleiben die
   Antworten ZU, aber der Inhalt steht crawlbar im DOM; deshalb schaltet erst
   .fs-js (von fs-seotext.js gesetzt) die geschlossene Optik scharf. Ohne JS
   sind alle Antworten offen (Regel Null: nie Inhalt verstecken, den nichts
   wieder oeffnen kann).
   Schrift: "FS Display" = Anton (Entscheidung Yunus 20.08., A/B-Vergleich),
   Gewicht IMMER 400 — Anton hat genau einen Schnitt, alles andere faked der
   Browser unscharf nach. Akzent: V6-Violett #830779, nur punktuell.
   Rollback: diese Datei + fs-seotext.js loeschen, template.xml-Eintrag und
   footer.tpl-Scriptzeile entfernen, Version hochzaehlen.
   ============================================================================ */

#fs-info {
    --fsi-paper: #f6f5f3;      /* kaum-warmes Off-White — Entscheidung Yunus 20.08.:
                                  das urspruengliche Creme #f7f3ec kippte neben dem
                                  reinen Weiss der Seite ins Beige und passte nicht
                                  zur kuehlen Schwarz/Weiss/Violett-Welt des Shops */
    --fsi-ink: #111114;
    --fsi-ink-soft: #6b636b;
    --fsi-violet: #830779;     /* Nummer, Plus, Diagonale, Unterstriche */
    --fsi-hairline: rgba(22, 18, 22, .16);
    --fsi-row-h: 60px;         /* FAQ-Zeile Desktop 58-62px */

    position: relative;
    background: var(--fsi-paper);
    color: var(--fsi-ink);
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    /* Im 1430px-Container wie Header und Footer-Baender (F9), nicht randlos;
       Vertikalmasse gestrafft (Anweisung Yunus 20.08.: "komprimieren"). */
    max-width: 1430px;
    margin: clamp(28px, 3.5vw, 48px) auto 0;
    padding: clamp(36px, 4vw, 56px) clamp(24px, 3.5vw, 56px) clamp(44px, 5vw, 68px);
}

/* kurze violette Diagonale an der Unterkante der hellen Flaeche */
#fs-info::after {
    content: "";
    position: absolute;
    left: clamp(24px, 3.5vw, 56px);
    bottom: -4px;
    width: 150px;
    height: 9px;
    background: var(--fsi-violet);
    transform: skewX(-24deg);
}

/* vertikale Kennzeichnung, nur Desktop */
.fs-info-side {
    position: absolute;
    top: clamp(36px, 4vw, 56px);
    left: calc(clamp(24px, 3.5vw, 56px) / 2);
    transform: translateX(-50%);
    writing-mode: vertical-rl;
    rotate: 180deg;
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--fsi-ink-soft);
    white-space: nowrap;
}

.fs-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
    /* Sektion selbst liegt jetzt im 1430px-Container — kein inneres Maximum mehr */
}

/* ------------------- linke Spalte: Marken-/SEO-Text ------------------- */

/* Beide Spalten sticky — es klebt automatisch die jeweils kuerzere.
   (Seit dem laengeren SEO-Text ist meist die FAQ-Spalte die kuerzere.) */
.fs-info-left, .fs-info-faq { position: sticky; top: 32px; }

.fs-info-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fsi-ink-soft);
    margin: 0 0 14px;
}
.fs-info-num {
    font-family: "FS Display", "Arial Narrow", sans-serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .06em;
    color: var(--fsi-violet);
}

/* H1: Ebene und Wortlaut unveraendert (SEO) — nur die Optik ist neu. */
#fs-info .fs-info-h1 {
    font-family: "FS Display", "Arial Narrow", sans-serif;
    font-weight: 400;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.12;
    text-transform: uppercase;
    letter-spacing: .005em;
    color: var(--fsi-ink);
    margin: 0 0 16px;
    max-width: 17em;
    text-wrap: balance;
}

/* Blocksatz fuer den Fliesstext, Desktop wie mobil (Ansage Yunus 21.08.2026:
   "jede Zeile die gleiche Breite"). Silbentrennung ist dabei Pflicht — ohne
   hyphens reisst deutscher Blocksatz Loecher zwischen die Woerter; die Seite
   traegt lang="de", die Trennregeln greifen also. text-align-last haelt die
   letzte Zeile linksbuendig, damit sie nicht auseinandergezogen wird. */
#fs-info .fs-info-left p,
#fs-info .fs-info-left li p {
    font-size: 15px;
    line-height: 1.6;
    color: #332d33;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    max-width: 34em;
    margin: 0 0 11px;
}
#fs-info .fs-info-left strong { color: var(--fsi-ink); }

#fs-info .fs-info-more h3 {
    font-family: "FS Display", "Arial Narrow", sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--fsi-ink);
    margin: 18px 0 8px;
}
#fs-info .fs-info-more ul {
    margin: 0 0 11px;
    padding-left: 20px;
}
#fs-info .fs-info-more li { margin-bottom: 4px; }
#fs-info .fs-info-more li p { margin-bottom: 0; }

/* Toggle-Grundoptik; SICHTBAR wird er je Breakpoint (mobil + ab 821px Desktop-
   Akkordion). Ohne .fs-js bleibt er unsichtbar, weil dann alles offen steht. */
.fs-info-moretoggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fsi-ink);
    border-bottom: 2px solid var(--fsi-violet);
    padding: 0 0 3px;
    margin: 2px 0 4px;
}
.fs-info-moretoggle:hover { color: var(--fsi-violet); }
.fs-info-moretoggle:focus-visible { outline: 2px solid var(--fsi-violet); outline-offset: 3px; }

/* ------------------- rechte Spalte: FAQ ------------------- */

#fs-info .fs-faq-title {
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fsi-ink);
    margin: 0 0 6px;
}

.fs-faq-row { border-bottom: 1px solid var(--fsi-hairline); }
.fs-faq-row:first-of-type { border-top: 1px solid var(--fsi-hairline); }

#fs-info .fs-faq-q { margin: 0; }

.fs-faq-btn {
    width: 100%;
    min-height: var(--fsi-row-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--fsi-ink);
    text-align: left;
    padding: 8px 2px;
}
.fs-faq-btn:focus-visible { outline: 2px solid var(--fsi-violet); outline-offset: 3px; }

/* eigenes 3-px-Plus, dreht beim Oeffnen um 45 Grad */
.fs-faq-plus {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    transition: transform 220ms ease;
}
.fs-faq-plus::before,
.fs-faq-plus::after {
    content: "";
    position: absolute;
    background: var(--fsi-violet);
}
.fs-faq-plus::before { left: 0; top: 6.5px; width: 16px; height: 3px; }
.fs-faq-plus::after  { left: 6.5px; top: 0; width: 3px; height: 16px; }
.fs-faq-row.open .fs-faq-plus { transform: rotate(45deg); }

/* Antworten: ohne JS offen (Inhalt nie unerreichbar), mit JS (.fs-js)
   geschlossen und per Grid-Rows in 220ms aufgleitend. */
.fs-faq-a { display: grid; grid-template-rows: 1fr; }
.fs-faq-a-in { overflow: hidden; }
.fs-js .fs-faq-a {
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms ease;
}
.fs-js .fs-faq-row.open .fs-faq-a { grid-template-rows: 1fr; }

#fs-info .fs-faq-a-in h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--fsi-ink-soft);
    margin: 6px 0 8px;
}
#fs-info .fs-faq-a-in p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #3d363d;
    text-align: left;
    max-width: 36em;
    margin: 0 2px 18px;
    padding-right: 40px;
}

/* ------------------- Eintritt: 12-16px weich nach oben -------------------
   .fs-rise setzt NUR die Transition; versteckt wird erst, wenn fs-seotext.js
   .fs-js gesetzt hat (kein JS -> nichts ist je unsichtbar). */
.fs-js .fs-rise {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: var(--fsi-d, 0ms);
}
.fs-js .fs-rise.fs-in { opacity: 1; transform: none; }

/* ------------------- Footer-Reveal (Vorhang) -------------------
   fs-seotext.js setzt .fs-reveal am <body> nur auf der Startseite und nur,
   wenn der Footer niedriger als ~90% des Viewports ist (sonst waere sein
   oberer Teil unerreichbar). --fs-footer-h liefert das JS per ResizeObserver. */
body.fs-reveal #footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
body.fs-reveal main {
    position: relative;
    z-index: 1;
    background: #fff;                       /* deckende Buehne vor dem Footer */
    margin-bottom: var(--fs-footer-h, 0px); /* legt den Footer darunter frei */
}

@media (prefers-reduced-motion: reduce) {
    .fs-js .fs-rise { opacity: 1; transform: none; transition: none; }
    .fs-faq-plus, .fs-js .fs-faq-a, .fs-js .fs-info-more { transition: none; }
}

/* ============================= Mobil ============================= */
@media (max-width: 820px) {
    #fs-info {
        --fsi-row-h: 52px;                 /* FAQ-Zeile mobil 52-56px */
        padding: 32px 20px 40px;
        margin-top: 32px;
    }
    .fs-info-side { display: none; }
    .fs-info-grid { grid-template-columns: 1fr; gap: 16px; }
    .fs-info-left, .fs-info-faq { position: static; }
    #fs-info .fs-info-h1 { font-size: 21px; line-height: 1.2; margin-bottom: 14px; }
    #fs-info .fs-info-left p { font-size: 14.5px; margin-bottom: 10px; }
    .fs-info-eyebrow { margin-bottom: 12px; }

    /* Intro auf 2 Zeilen, laengerer About-Text hinter "Mehr ueber Fogsmoke".
       Nur Optik — der Text bleibt im DOM. Ohne JS (kein .fs-js) alles offen. */
    .fs-js .fs-info-left:not(.fs-expanded) .fs-info-intro p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .fs-js .fs-info-left:not(.fs-expanded) .fs-info-more { display: none; }
    .fs-js .fs-info-moretoggle {
        display: inline-block;
        background: none;
        border: 0;
        cursor: pointer;
        font-family: "FS Body", "FS Text", Arial, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--fsi-ink);
        border-bottom: 2px solid var(--fsi-violet);
        padding: 0 0 3px;
        margin: 2px 0 4px;
    }
    .fs-js .fs-info-left.fs-expanded .fs-info-moretoggle { display: none; }

    #fs-info .fs-faq-title { margin-top: 10px; }
    .fs-faq-btn { font-size: 14.5px; }
    #fs-info .fs-faq-a-in p { padding-right: 24px; }
    .fs-js .fs-rise { transform: translateY(12px); }
}

@media (min-width: 821px) {
    /* ---- Desktop-Akkordion "Mehr ueber Fogsmoke" (Yunus 21.08.2026) ----
       Vorher lief der Block rechts ins Leere: linke Spalte 1136px, FAQ-Spalte
       316px — rund 800px weisse Flaeche. Der About-Text liegt jetzt wie mobil
       hinter dem Toggle, zu ist links ~415px und damit praktisch auf FAQ-Hoehe.
       Der Text bleibt vollstaendig im DOM (SEO: H1/H3-Struktur, Wortlaut und
       Links unveraendert) — mobil war er ohnehin schon eingeklappt, der
       Mobile-First-Index sieht also nichts Neues. Ohne JS (kein .fs-js) steht
       weiterhin alles offen. Anders als mobil: hier klappt der Toggle in BEIDE
       Richtungen (Label wechselt via fs-seotext.js auf "Weniger anzeigen"). */
    .fs-js .fs-info-moretoggle { display: inline-block; margin-top: 8px; }
    .fs-js .fs-info-more {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 260ms ease;
    }
    .fs-js .fs-info-left.fs-expanded .fs-info-more { grid-template-rows: 1fr; }
    /* Zuklappen laeuft ohne Animation, damit die Scroll-Korrektur im JS
       sofort und ruckfrei greift (sonst wandert die Seite 260ms lang weg). */
    .fs-js .fs-info-left.fs-noanim .fs-info-more { transition: none; }
    .fs-info-more-in { overflow: hidden; }
}

/* "Alle FAQs" — schlichter Textlink mit violettem Unterstrich (Ziel: /faq,
   bestehende Seite; bekommt laut Yunus spaeter die ausgebaute SEO-FAQ). */
#fs-info .fs-faq-all {
    display: inline-block;
    margin-top: 26px;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fsi-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--fsi-violet);
    padding-bottom: 3px;
}
#fs-info .fs-faq-all:hover,
#fs-info .fs-faq-all:focus-visible { color: var(--fsi-violet); text-decoration: none; }
@media (max-width: 820px) {
    #fs-info .fs-faq-all { margin-top: 16px; }
}

/* ============================================================================
   B2B — VAPES-GROSSHANDELSSEITE /vapes-grosshandel_1 (Sitzung SEOTEXT, 20.08.)
   ----------------------------------------------------------------------------
   Das Markup (tlinksprache kLink 127) bringt seine fs-b2b-*-Klassen bereits
   mit — es gab nur nie eine CSS dazu (weder Live noch Dev). Hier ist sie,
   in der Sprache des Redesigns: Anton ("FS Display", immer 400) fuer
   Display-Ebenen, DM Sans ("FS Body") fuer Text, Violett #830779 punktuell,
   1-px-Hairlines statt grauer Kaesten, Off-White-Buehnen, Editorial-Nummern.
   Inhalt/DOM unveraendert (SEO). Ohne JS: alles sichtbar (.fs-js-Gate wie
   beim INFO REVEAL). Rollback: diesen Abschnitt loeschen + Bump.
   ============================================================================ */

#fs-b2b-page {
    --fsb-paper: #f6f5f3;
    --fsb-ink: #111114;
    --fsb-ink-soft: #6b636b;
    --fsb-violet: #830779;
    --fsb-hairline: rgba(22, 18, 22, .16);
    --fsb-dark: #0e0b0e;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    color: var(--fsb-ink);
    text-align: left;
}
#fs-b2b-page h1, #fs-b2b-page h2, #fs-b2b-page h3 {
    font-family: "FS Display", "Arial Narrow", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .005em;
    color: var(--fsb-ink);
    text-wrap: balance;
}
#fs-b2b-page p { color: #332d33; line-height: 1.6; }
#fs-b2b-page strong { color: var(--fsb-ink); }

/* ---------- Kicker & Badges ---------- */
.fs-b2b-topline { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 26px; }
.fs-b2b-topbadge {
    font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--fsb-ink-soft); border: 1px solid var(--fsb-hairline);
    padding: 6px 10px; white-space: nowrap;
}
.fs-b2b-eyebrow, .fs-b2b-kicker, .fs-b2b-info-kicker, .fs-b2b-card-label {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--fsb-violet); margin-bottom: 10px;
}
.fs-b2b-kicker-dark { color: #d9a3d2; }

/* ---------- Hero ---------- */
.fs-b2b-hero { padding: 8px 0 26px; }
.fs-b2b-hero-grid {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 64px); align-items: start;
}
.fs-b2b-hero-copy h1 {
    font-size: clamp(26px, 3vw, 42px); line-height: 1.1; margin: 6px 0 16px;
}
.fs-b2b-lead { font-size: 16.5px; max-width: 34em; margin-bottom: 12px; }
.fs-b2b-sublead { font-size: 14.5px; color: var(--fsb-ink-soft); max-width: 36em; margin-bottom: 20px; }
.fs-b2b-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.fs-b2b-mini-points { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fs-b2b-mini-points span {
    position: relative; padding-left: 20px; font-size: 13px; color: var(--fsb-ink-soft);
}
.fs-b2b-mini-points span::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: var(--fsb-violet); font-weight: 700;
}

/* dunkle Registrierungs-Karte rechts */
.fs-b2b-hero-card {
    display: block; background: var(--fsb-dark); color: #e9e4e9;
    padding: 26px 26px 24px; position: relative;
}
.fs-b2b-hero-card::after {           /* kurze violette Diagonale, wie Sektionskante */
    content: ""; position: absolute; left: 26px; bottom: -4px;
    width: 110px; height: 8px; background: var(--fsb-violet); transform: skewX(-24deg);
}
.fs-b2b-hero-card h2 { color: #fff; font-size: 24px; margin: 4px 0 10px; }
.fs-b2b-hero-card p { color: #b9aeb7; font-size: 14px; margin-bottom: 14px; }
.fs-b2b-quick-steps { list-style: none; counter-reset: fsb; margin: 0 0 18px; padding: 0; }
.fs-b2b-quick-steps li {
    counter-increment: fsb; position: relative;
    padding: 9px 0 9px 40px; border-top: 1px solid rgba(233,228,233,.14);
    font-size: 14px; color: #e9e4e9;
}
.fs-b2b-quick-steps li::before {
    content: "0" counter(fsb);
    position: absolute; left: 0; top: 8px;
    font-family: "FS Display", "Arial Narrow", sans-serif; font-weight: 400;
    font-size: 15px; letter-spacing: .06em; color: var(--fsb-violet);
}

/* ---------- Buttons ---------- */
.fs-b2b-btn {
    display: inline-block; padding: 13px 22px;
    font-family: "FS Body", "FS Text", Arial, sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; text-align: center; border: 2px solid transparent;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.fs-b2b-btn-primary { background: var(--fsb-violet); color: #fff; }
.fs-b2b-btn-primary:hover, .fs-b2b-btn-primary:focus-visible { background: var(--brand-ruhig); color: #fff; text-decoration: none; }
.fs-b2b-btn-secondary { border-color: var(--fsb-ink); color: var(--fsb-ink); background: transparent; }
.fs-b2b-btn-secondary:hover, .fs-b2b-btn-secondary:focus-visible { border-color: var(--fsb-violet); color: var(--fsb-violet); text-decoration: none; }
.fs-b2b-btn-secondary-dark { border-color: #fff; color: #fff; }
.fs-b2b-btn-secondary-dark:hover, .fs-b2b-btn-secondary-dark:focus-visible { border-color: #d9a3d2; color: #d9a3d2; }
.fs-b2b-btn-full { display: block; width: 100%; }
.fs-b2b-btn:focus-visible { outline: 2px solid var(--fsb-violet); outline-offset: 3px; }

/* ---------- Sektionen & Grids ---------- */
.fs-b2b-section { padding: clamp(34px, 4vw, 56px) 0; border-top: 1px solid var(--fsb-hairline); }
.fs-b2b-section-head { margin-bottom: clamp(20px, 2.5vw, 32px); }
.fs-b2b-section-head h2 { font-size: clamp(22px, 2.4vw, 32px); margin: 2px 0 6px; }
.fs-b2b-section-head p { max-width: 46em; color: var(--fsb-ink-soft); font-size: 14.5px; }
.fs-b2b-grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.fs-b2b-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-b2b-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-b2b-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Intro-Strip: vier Punkte auf Off-White-Buehne, Hairline-Kanten statt Kaesten */
.fs-b2b-intro-strip { background: var(--fsb-paper); border-top: 0; padding: clamp(24px, 3vw, 40px) clamp(18px, 2.5vw, 32px); margin-top: 30px; }
.fs-b2b-info-card { border-left: 1px solid var(--fsb-hairline); padding-left: 18px; }
.fs-b2b-info-card:first-child { border-left: 0; padding-left: 0; }
.fs-b2b-info-card h3 { font-family: "FS Body", "FS Text", Arial, sans-serif; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 0 6px; }
.fs-b2b-info-card p { font-size: 13.5px; color: var(--fsb-ink-soft); margin: 0; }
.fs-b2b-info-kicker { margin-bottom: 6px; font-size: 10px; }

/* Inhaltskarten: Hairline-Rahmen, kein Schatten, Hover fuehrt mit Violett */
.fs-b2b-card {
    border: 1px solid var(--fsb-hairline); padding: 22px 22px 18px;
    background: transparent; transition: border-color 160ms ease;
}
.fs-b2b-card:hover { border-color: var(--fsb-violet); }
.fs-b2b-card h3 { font-size: 19px; margin: 2px 0 10px; }
.fs-b2b-card p { font-size: 14px; margin-bottom: 10px; }
.fs-b2b-card-highlight { background: var(--fsb-paper); }
.fs-b2b-card-dark { background: var(--fsb-dark); border-color: var(--fsb-dark); }
.fs-b2b-card-dark h3 { color: #fff; }
.fs-b2b-card-dark p { color: #b9aeb7; }
.fs-b2b-list { list-style: none; margin: 0; padding: 0; }
.fs-b2b-list li {
    position: relative; padding: 7px 0 7px 20px; font-size: 14px; color: #332d33;
    border-top: 1px solid var(--fsb-hairline);
}
.fs-b2b-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 3px; background: var(--fsb-violet); transform: skewX(-24deg); }

/* ---------- Logo-Beweisband ---------- */
.fs-b2b-logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.fs-b2b-logo-card { text-align: center; }
.fs-b2b-logo-stage {
    display: flex; align-items: center; justify-content: center;
    height: 84px; padding: 14px; border: 1px solid var(--fsb-hairline); background: #fff;
}
.fs-b2b-logo-stage img {
    max-height: 100%; max-width: 100%; width: auto; object-fit: contain;
    filter: grayscale(1); opacity: .8; transition: filter 160ms ease, opacity 160ms ease;
}
.fs-b2b-logo-card:hover .fs-b2b-logo-stage img { filter: none; opacity: 1; }
.fs-b2b-logo-card > span { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fsb-ink-soft); }

/* ---------- Registrierungs-Schritte: Editorial-Nummern ---------- */
.fs-b2b-steps { counter-reset: none; }
.fs-b2b-step { border-top: 1px solid var(--fsb-hairline); padding-top: 14px; }
.fs-b2b-step-num {
    display: block; font-family: "FS Display", "Arial Narrow", sans-serif; font-weight: 400;
    font-size: 26px; line-height: 1; letter-spacing: .04em; color: var(--fsb-violet);
    margin-bottom: 8px;
}
.fs-b2b-step-num::before { content: "0"; }   /* 1 -> 01, Ziffern im Markup bleiben */
.fs-b2b-step h3 { font-family: "FS Body", "FS Text", Arial, sans-serif; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 0 6px; }
.fs-b2b-step p { font-size: 13.5px; color: var(--fsb-ink-soft); margin: 0; }

/* ---------- Zitate & Kontakt ---------- */
.fs-b2b-quote { margin: 0 0 12px; padding-left: 16px; border-left: 3px solid var(--fsb-violet); font-size: 14.5px; }
.fs-b2b-card-dark .fs-b2b-quote { color: #e9e4e9; }
.fs-b2b-quote-author { font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--fsb-ink-soft) !important; margin-bottom: 16px; }
.fs-b2b-card-dark .fs-b2b-quote-author { color: #a294a0 !important; }
.fs-b2b-contact-list { display: flex; flex-direction: column; }
.fs-b2b-contact-item {
    display: block; padding: 12px 26px 12px 2px; position: relative;
    border-top: 1px solid var(--fsb-hairline);
    font-size: 14.5px; font-weight: 500; color: var(--fsb-ink); text-decoration: none;
}
.fs-b2b-contact-item::after { content: "→"; position: absolute; right: 4px; top: 12px; color: var(--fsb-violet); transition: transform 160ms ease; }
.fs-b2b-contact-item:hover { color: var(--fsb-violet); text-decoration: none; }
.fs-b2b-contact-item:hover::after { transform: translateX(4px); }

/* ---------- FAQ: Zeilen wie im INFO REVEAL, natives details/summary ---------- */
.fs-b2b-faq details { border-bottom: 1px solid var(--fsb-hairline); }
.fs-b2b-faq details:first-of-type { border-top: 1px solid var(--fsb-hairline); }
.fs-b2b-faq summary {
    list-style: none; cursor: pointer; position: relative;
    min-height: 56px; display: flex; align-items: center;
    padding: 10px 44px 10px 2px; font-size: 15.5px; font-weight: 500; color: var(--fsb-ink);
}
.fs-b2b-faq summary::-webkit-details-marker { display: none; }
.fs-b2b-faq summary::before, .fs-b2b-faq summary::after {
    content: ""; position: absolute; right: 12px; background: var(--fsb-violet);
    transition: transform 220ms ease;
}
.fs-b2b-faq summary::before { width: 16px; height: 3px; top: calc(50% - 1.5px); right: 6px; }
.fs-b2b-faq summary::after  { width: 3px;  height: 16px; top: calc(50% - 8px); right: 12.5px; }
.fs-b2b-faq details[open] summary::before { transform: rotate(45deg); }
.fs-b2b-faq details[open] summary::after  { transform: rotate(45deg); }
.fs-b2b-faq details > p { font-size: 14px; color: #3d363d; max-width: 50em; padding: 0 44px 18px 2px; margin: 0; }
.fs-b2b-faq summary:focus-visible { outline: 2px solid var(--fsb-violet); outline-offset: 3px; }

/* ---------- Final-CTA: dunkles Band mit Diagonale ---------- */
.fs-b2b-final-cta {
    background: var(--fsb-dark); color: #e9e4e9; position: relative;
    padding: clamp(28px, 4vw, 48px);
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px; align-items: center;
}
.fs-b2b-final-cta::after {
    content: ""; position: absolute; left: clamp(28px, 4vw, 48px); bottom: -4px;
    width: 130px; height: 8px; background: var(--fsb-violet); transform: skewX(-24deg);
}
.fs-b2b-final-copy h2 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); margin: 4px 0 8px; }
.fs-b2b-final-copy p { color: #b9aeb7; font-size: 14.5px; max-width: 40em; margin: 0; }
.fs-b2b-final-actions { display: flex; flex-direction: column; gap: 12px; }

/* Mobile-CTA erst im Media-Block sichtbar */
.fs-b2b-mobile-cta { display: none; }

/* ---------- Eintritt (nur mit JS verdeckt, wie .fs-rise) ---------- */
.fs-js #fs-b2b-page .fs-reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: var(--fsi-d, 0ms);
}
.fs-js #fs-b2b-page .fs-reveal.fs-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .fs-js #fs-b2b-page .fs-reveal { opacity: 1; transform: none; transition: none; }
    .fs-b2b-faq summary::before, .fs-b2b-faq summary::after { transition: none; }
}

/* ================= B2B Mobil ================= */
@media (max-width: 991.98px) {
    .fs-b2b-hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .fs-b2b-grid-3, .fs-b2b-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fs-b2b-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .fs-b2b-grid-2, .fs-b2b-grid-3, .fs-b2b-grid-4 { grid-template-columns: 1fr; }
    .fs-b2b-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fs-b2b-hero-copy h1 { font-size: 24px; }
    .fs-b2b-lead { font-size: 15px; }
    .fs-b2b-info-card { border-left: 0; padding-left: 0; border-top: 1px solid var(--fsb-hairline); padding-top: 12px; }
    .fs-b2b-final-cta { grid-template-columns: 1fr; }
    .fs-b2b-hero-actions .fs-b2b-btn { flex: 1 1 100%; }
    .fs-b2b-mobile-cta { display: block; position: sticky; bottom: 10px; z-index: 5; padding: 0 2px; margin-top: 18px; }
    .fs-b2b-mobile-cta .fs-b2b-btn { display: block; width: 100%; box-shadow: 0 0 0 4px rgba(246,245,243,.9); }
}