/* cf-abx.css — Abteilung "10BX" (Advisory Skills · 11xROAS · 11xSocial), 2026-07-30. * * DESIGN-HERKUNFT: die Higgsfield-Referenzen aus /home/dev/inbox (Higgsfiel Design Pack, * Fluence Marketing Suite, CallFluence Design & Function) — übernommen werden die MUSTER * (Glow-Banner, Icon-Kacheln mit eigenem Farbton je Modul, Pill-Chip-Leiste, schräg gestellte * Versal-Badges, gestreifte Fortschrittsbalken, Invers-Abschlussfläche), NICHT deren Farbwerte. * Jede Farbe kommt aus den Konsolen-Token (var(--lime) …) oder wird per color-mix daraus * abgeleitet — die White-Label-Wache (guard-whitelabel-tokens.mjs) bleibt damit gültig, * und der Dark/Light-Umschalter trägt die Abteilung ohne Sonderfall. */ /* ---- Glow-Hero: Banner mit Neon-Ausleuchtung (Higgsfield-Pack 20.58.45 / 20.59.31) ---- */ .bx-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--lime) 45%,var(--line));background: radial-gradient(120% 160% at 12% -20%,color-mix(in srgb,var(--lime) 26%,var(--surface)) 0%,var(--surface) 55%),var(--surface); padding:30px 32px;margin-bottom:26px} .bx-hero::after{content:'';position:absolute;inset:auto -12% -55% auto;width:52%;height:120%;pointer-events:none; background:radial-gradient(closest-side,color-mix(in srgb,var(--lime) 34%,transparent) 0%,transparent 72%)} .bx-hero h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.4px;line-height:1.08; font-size:clamp(1.35rem,2.6vw,1.9rem);margin:10px 0 8px;max-width:640px} .bx-hero .bx-sub{color:var(--ink-soft);font-size:.92rem;max-width:620px;position:relative;z-index:1} /* Schräg gestellte Versal-Badge (Higgsfield: "LEARN FOR FREE", "$0 UNLIMITED TRIAL") */ .bx-badge{display:inline-block;background:var(--lime);color:var(--on-lime);font-family:var(--disp);font-weight:800; text-transform:uppercase;letter-spacing:.6px;font-size:.68rem;padding:4px 11px;border-radius:6px;transform:skewX(-8deg)} .bx-badge>span{display:inline-block;transform:skewX(8deg)} .bx-badge.alt{background:var(--info-bg);color:var(--info)} /* ---- Icon-Kachel 28px mit eigenem Farbton je Modul (Skills-Sidebar 21.05.28) ---- */ .bx-tile-ic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:none} .bx-tile-ic .ic{width:16px;height:16px} .bx-hue-lime{background:color-mix(in srgb,var(--lime) 30%,var(--surface-2));color:color-mix(in srgb,var(--on-lime) 70%,var(--ink))} .bx-hue-info{background:var(--info-bg);color:var(--info)} .bx-hue-good{background:var(--good-bg);color:var(--good)} .bx-hue-warn{background:var(--warn-bg);color:var(--warn)} /* ---- Modul-Raster (6-up Feature-Grid 20.58.45) ---- */ .bx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px} .bx-mod{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px 16px 14px; display:flex;flex-direction:column;gap:9px;min-width:0;transition:border-color .18s var(--ease),transform .18s var(--ease)} .bx-mod:hover{border-color:color-mix(in srgb,var(--lime) 55%,var(--line));transform:translateY(-1px)} .bx-mod .bx-mh{display:flex;align-items:center;gap:10px;min-width:0} .bx-mod h4{font-size:.95rem;margin:0;min-width:0} .bx-mod .bx-md{font-size:.83rem;color:var(--ink-soft);flex:1} .bx-mod .bx-mf{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} /* Ueberlauf-Wurzel (Operator-Befund 2026-07-30): Kind-Elemente der Karte duerfen den Kasten nie verlassen — jedes Kind darf schrumpfen und umbrechen, Knoepfe bleiben ganz. */ .bx-mod>*{min-width:0;max-width:100%} .bx-mod .bx-mf>*{min-width:0;max-width:100%} .bx-mod .bx-mf .btn{flex:none;white-space:nowrap} /* Status ehrlich: bereit = es gibt den Weg wirklich; konzept = noch kein Klickweg */ .bx-st{font-size:.7rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 9px;border-radius:999px} .bx-st.on{background:var(--good-bg);color:var(--good)} .bx-st.plan{background:var(--surface-3);color:var(--ink-faint)} /* ---- Pill-Chip-Leiste (Filter-Rail 20.59.46, Komponenten-Zerlegung) ---- */ .bx-rail{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px} .bx-rail .bx-chip{border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:.8rem;color:var(--ink-soft); background:var(--surface);white-space:nowrap} .bx-rail .bx-chip b{color:var(--ink);font-weight:700} .bx-rail .bx-chip-on{background:var(--lime);color:var(--on-lime);border-color:var(--lime)} /* ---- Phasen-Karten (2-spaltige Modal-Bauform der Marketing Suite, hier als Flächen) ---- */ .bx-phasen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:26px} .bx-phase{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:18px} .bx-phase .bx-pk{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:.78rem; color:var(--ink-faint);margin-bottom:6px} .bx-phase h4{margin:0 0 6px;font-size:1rem} .bx-phase p{font-size:.85rem;color:var(--ink-soft);margin:0} .bx-phase ul{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px} .bx-phase li{font-size:.83rem;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start} .bx-phase li .ic{width:14px;height:14px;color:var(--good);flex:none;margin-top:2px} /* ---- Deal-Pipeline: gestreifter Fortschritt (Gamification 21.10.40) ---- */ .bx-deal{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--line);min-width:0} .bx-deal:first-of-type{border-top:0} .bx-deal .bx-dm{flex:1;min-width:0} .bx-deal b{font-size:.92rem} .bx-deal .bx-dd{font-size:.82rem;color:var(--ink-soft);margin-top:2px} .bx-prog{height:8px;border-radius:var(--r-bar,999px);background:var(--surface-3);overflow:hidden;margin-top:9px;max-width:420px} .bx-prog>i{display:block;height:100%;border-radius:inherit; background:repeating-linear-gradient(-55deg,var(--lime) 0 8px,color-mix(in srgb,var(--lime) 62%,var(--surface)) 8px 16px)} .bx-share{font-family:var(--disp);font-weight:800;font-size:1.05rem;white-space:nowrap} .bx-share small{display:block;font-family:var(--sans);font-weight:400;font-size:.72rem;color:var(--ink-faint)} /* ---- Konsultations-Konto (Tabellenzeilen mit einer Herkunft je Zeile) ---- */ .bx-konto{width:100%;border-collapse:collapse;font-size:.86rem} .bx-konto th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint); font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line-strong,var(--line))} .bx-konto td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top} .bx-konto td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .bx-konto tr:last-child td{border-bottom:0} /* ---- Invers-Abschlussfläche (Neon-Footer 21.00.41): Fläche kippt auf Akzent ---- */ .bx-invers{border-radius:var(--r-lg);background:var(--lime);color:var(--on-lime);padding:26px 28px;margin-top:28px; display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .bx-invers h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin:0 0 4px; font-size:clamp(1.05rem,2vw,1.35rem);color:inherit} .bx-invers p{margin:0;font-size:.88rem;color:color-mix(in srgb,var(--on-lime) 78%,var(--lime))} .bx-invers .btn{flex:none} /* Sektion-Kopf im Abteilungsstil */ .bx-sec{margin:26px 0 12px} .bx-sec .bx-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-faint);font-weight:700} .bx-sec h3{margin:2px 0 4px} .bx-sec .bx-ssub{font-size:.86rem;color:var(--ink-soft);max-width:680px} /* ---- War-Room-Bauformen (Control-Plane-Layout nach v27-Vorlage, Konsolen-Token) ---- */ .bx-hero-war{background: radial-gradient(120% 160% at 12% -20%,color-mix(in srgb,var(--ink) 10%,var(--surface)) 0%,var(--surface) 55%),var(--surface)} .bx-hero-war::after{background:radial-gradient(closest-side,color-mix(in srgb,var(--lime) 40%,transparent) 0%,transparent 72%)} .bx-mantra{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:1.2px; font-size:.82rem;color:var(--ink-faint);margin-top:14px} .bx-dir{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint)} .bx-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:18px;position:relative;z-index:1} .bx-pillar{border:1px solid var(--line);border-radius:var(--r-sm);background:color-mix(in srgb,var(--surface) 72%,transparent); padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0} .bx-pillar .ic{width:15px;height:15px;color:var(--lime-strong,var(--lime))} .bx-pillar b{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px} .bx-pillar span{font-size:.72rem;color:var(--ink-faint)} .bx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:8px} .bx-stat{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 16px} .bx-stat .bx-sv{font-family:var(--disp);font-weight:800;font-size:1.35rem} .bx-stat .bx-sl{font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);margin-top:2px} .bx-ask{padding:18px 20px} .bx-askrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .bx-askrow input{flex:1;min-width:220px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px; background:var(--surface-2);color:var(--ink);font:inherit} .bx-sel{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;background:var(--surface-2); color:var(--ink);font:inherit;max-width:100%} /* ---- Sitz-Bildnis (2026-07-31, Operator: "die einzelnen advisory brauchen ein icon") Das Bildnis nimmt denselben Platz wie die Icon-Kachel und traegt denselben Farbton-Ring, damit ein Raum mit und ohne Bildnis dieselbe Zeilenhoehe behaelt. Kein zweites Farbsystem: Ring und Flaeche kommen aus den Konsolen-Token. */ .bx-ava{width:30px;height:30px;flex:none;border-radius:9px;overflow:hidden;display:block; border:1px solid color-mix(in srgb,currentColor 45%,var(--line));background:var(--surface-3)} .bx-ava img{width:100%;height:100%;object-fit:cover;display:block} /* Auf der Sitz-Karte tragen Bildnis UND Icon-Kachel dieselbe groessere Flaeche — sonst stehen Karten mit Bildnis und Karten ohne Bildnis auf verschiedener Kopfhoehe. */ .bx-member .bx-mh .bx-ava,.bx-member .bx-mh .bx-tile-ic{width:44px;height:44px;border-radius:var(--r-sm,12px)} .bx-member .bx-mh .bx-tile-ic .ic{width:20px;height:20px} .bx-rat .bx-ava,.bx-rat .bx-tile-ic{width:40px;height:40px;border-radius:var(--r-sm,12px)} .bx-rat .bx-tile-ic .ic{width:19px;height:19px} .bx-ava-s{width:30px;height:30px;border-radius:999px} .bx-tile-s{width:30px;height:30px;flex:none;border-radius:999px} .bx-tile-s .ic{width:15px;height:15px} /* ---- CI-Waehler der Sitzwahl: die .cdd-Bauform der Konsole, mit Bildnis und zwei Zeilen. Vorher stand hier ein nacktes