/**
* FundSys UI Components | Financial Atelier
* Sharp corners, tonal surfaces, no explicit borders
*/
/* The `hidden` attribute must always win — utility/component display rules (.flex, .fs-button,
* .fa-*) otherwise override the UA [hidden]{display:none} and leave toggled elements stuck visible. */
[hidden] { display: none !important; }
/* ========== CARDS ========== */
.fs-card {
background: var(--fs-bg-card);
border-radius: var(--fs-radius-sm);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
transition: box-shadow var(--fs-transition-base),
background-color var(--fs-transition-base);
}
.dark .fs-card {
background: var(--fs-bg-card);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.fs-card-hover:hover {
box-shadow: 0 16px 48px rgba(15, 23, 42, 0.10);
}
/* ========== BUTTONS ========== */
/* i18n DE/EN locale tabs (admin branding editor). Chrome styling single-sourced here (B5) so the
active/inactive state no longer hardcodes brand navy / white inline in the JS template. */
.fs-i18n-tabs-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fs-i18n-tabs-head { display: flex; gap: 4px; margin-left: auto; }
.fs-i18n-tab {
padding: 3px 8px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border: 1px solid var(--fs-border-default);
border-radius: 2px;
cursor: pointer;
background: transparent;
color: var(--fs-text-secondary);
transition: background 0.15s, color 0.15s;
}
.fs-i18n-tab.active {
background: var(--fs-brand-primary);
color: var(--fs-on-brand-primary);
}
.fs-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--fs-space-2);
padding: var(--fs-space-3) var(--fs-space-5);
font-size: var(--fs-text-sm);
font-weight: 600;
line-height: var(--fs-leading-tight);
border-radius: var(--fs-radius-sm);
border: none;
cursor: pointer;
transition: all var(--fs-transition-base);
position: relative;
overflow: hidden;
min-height: 44px;
font-family: var(--fs-font-sans);
}
.fs-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* .fs-button sets display:inline-flex, which outranks the .hidden utility (same specificity,
later source order) and leaks hidden buttons back into view. 0,2,0 wins regardless of order. */
.fs-button.hidden {
display: none;
}
/* Primary Button, solid brand color */
.fs-button-primary {
background: var(--fs-brand-primary, #131b2e);
color: var(--fs-on-brand-primary, #ffffff);
box-shadow: 0 4px 16px rgba(var(--fs-brand-primary-rgb, 19, 27, 46), 0.2);
}
.fs-button-primary:hover:not(:disabled) {
filter: brightness(1.15);
box-shadow: 0 6px 20px rgba(var(--fs-brand-primary-rgb, 19, 27, 46), 0.3);
}
/* Secondary Button, ghost style */
.fs-button-secondary {
background: transparent;
color: var(--fs-brand-primary, #131b2e);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: transparent;
}
.dark .fs-button-secondary {
color: var(--fs-text-primary);
}
.fs-button-secondary:hover:not(:disabled) {
text-decoration-color: currentColor;
}
.fs-button-secondary .material-symbols-outlined {
text-decoration: none;
}
/* Icon+text ghost buttons: a flex container paints the underline under each flex item on its
own, so hover shows a stray line under the icon plus a second under the label. Move the
underline onto the label span so it reads as one clean line. */
.fs-button-secondary.fs-btn-icon {
text-decoration: none;
}
.fs-btn-icon .fs-btn-label {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: transparent;
transition: text-decoration-color var(--fs-transition-base);
}
.fs-button-secondary.fs-btn-icon:hover:not(:disabled) .fs-btn-label {
text-decoration-color: currentColor;
}
/* Active language option: neutral selected surface, not gold (gold is reserved for success). */
.js-lang-option.fs-lang-active {
background: var(--fs-bg-secondary);
color: var(--fs-text-primary);
font-weight: 600;
}
.dark .js-lang-option.fs-lang-active {
background: rgba(255, 255, 255, 0.08);
color: var(--fs-text-primary);
}
/* Tertiary Button, tonal surface */
.fs-button-tertiary {
background: var(--fs-bg-tertiary);
color: var(--fs-text-secondary);
}
.dark .fs-button-tertiary {
background: rgba(255, 255, 255, 0.08);
color: var(--fs-text-secondary);
}
.fs-button-tertiary:hover:not(:disabled) {
background: var(--fs-bg-surface-high);
}
.dark .fs-button-tertiary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
}
/* Danger Button */
.fs-button-danger {
background: rgba(186, 26, 26, 0.08);
color: var(--fs-error);
}
.fs-button-danger:hover:not(:disabled) {
background: var(--fs-error);
color: white;
}
.dark .fs-button-danger {
background: rgba(239, 83, 80, 0.12);
color: var(--fs-error);
}
.dark .fs-button-danger:hover:not(:disabled) {
background: var(--fs-error);
color: white;
}
/* Button Sizes */
.fs-button-sm {
padding: var(--fs-space-2) var(--fs-space-3);
font-size: var(--fs-text-xs);
min-height: 36px;
}
.fs-button-lg {
padding: var(--fs-space-4) var(--fs-space-6);
font-size: var(--fs-text-base);
}
/* Portfolio-Tabelle: Schritt-Fortschritt als duenner Balken unter der Zaehlung.
Gold nur wenn abgeschlossen (Success-Moment), sonst neutraler Brand-Ton. */
.fs-portfolio-progress {
display: inline-flex;
flex-direction: column;
gap: var(--fs-space-1);
min-width: 84px;
}
.fs-portfolio-progress .fs-progress-figure {
font-size: var(--fs-text-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--fs-text-secondary);
}
.fs-portfolio-bar {
height: 5px;
border-radius: 999px;
background: var(--fs-bg-surface-high);
overflow: hidden;
}
.dark .fs-portfolio-bar {
background: rgba(255, 255, 255, 0.08);
}
.fs-portfolio-bar > span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--fs-brand-secondary);
}
.fs-portfolio-bar.is-done > span {
background: var(--fs-gold);
}
/* ========== INPUTS ========== */
.fs-input {
width: 100%;
padding: var(--fs-space-3) var(--fs-space-4);
font-size: var(--fs-text-sm);
font-family: var(--fs-font-sans);
line-height: var(--fs-leading-normal);
color: var(--fs-text-primary);
background: transparent;
border: none;
border-bottom: 2px solid rgba(198, 198, 205, 0.5);
border-radius: 0;
box-shadow: inset 0 -4px 8px -4px rgba(0, 0, 0, 0.04);
transition: border-color var(--fs-transition-base),
background-color var(--fs-transition-base),
box-shadow var(--fs-transition-base);
min-height: 44px;
}
.dark .fs-input {
color: var(--fs-text-primary);
border-bottom-color: rgba(255, 255, 255, 0.25);
box-shadow: inset 0 -4px 8px -4px rgba(255, 255, 255, 0.04);
}
.fs-input:hover {
border-bottom-color: rgba(198, 198, 205, 0.8);
}
.dark .fs-input:hover {
border-bottom-color: rgba(255, 255, 255, 0.4);
}
.fs-input:focus {
outline: none;
border-bottom-color: var(--fs-brand-primary, #131b2e);
box-shadow: inset 0 -4px 8px -4px rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.02);
}
.dark .fs-input:focus {
border-bottom-color: rgba(255, 255, 255, 0.6);
box-shadow: inset 0 -4px 8px -4px rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
}
.fs-input:focus-visible {
box-shadow: var(--fs-focus-ring), inset 0 -4px 8px -4px rgba(0, 0, 0, 0.08);
}
.dark .fs-input:focus-visible {
box-shadow: var(--fs-focus-ring), inset 0 -4px 8px -4px rgba(255, 255, 255, 0.12);
}
.fs-input::placeholder {
color: var(--fs-text-muted);
}
.fs-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Kurzes 'gespeichert'-Feedback: Underline wird success-gruen + fainter Tint, fadet ueber die
bestehende fs-input-Transition zurueck (Klasse wird nach ~1.4s per JS entfernt). Dezent, aber klar. */
.fs-input.fs-input--saved {
border-bottom-color: var(--fs-success);
background: color-mix(in srgb, var(--fs-success) 9%, transparent);
}
/* Onboarding/inline inputs, used when .fs-input is not applied */
/* [class] bumps specificity to 0,2,0 so we beat single Tailwind utilities */
.fs-onboarding-input[class] {
background: transparent;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid rgba(198, 198, 205, 0.5);
border-radius: 0;
box-shadow: inset 0 -4px 8px -4px rgba(0, 0, 0, 0.04);
}
.fs-onboarding-input[class]:hover {
border-bottom-color: rgba(198, 198, 205, 0.8);
}
.dark .fs-onboarding-input[class] {
background: transparent;
border-bottom-color: rgba(255, 255, 255, 0.25);
box-shadow: inset 0 -4px 8px -4px rgba(255, 255, 255, 0.04);
}
.dark .fs-onboarding-input[class]:hover {
border-bottom-color: rgba(255, 255, 255, 0.4);
}
.fs-onboarding-input[class]:focus {
outline: none;
border-bottom-color: var(--fs-brand-primary, #131b2e);
box-shadow: inset 0 -4px 8px -4px rgba(0, 0, 0, 0.08);
}
/* --- Read-only step review (history accordion -> locked past step) ------------- */
/* Hand-written rather than Tailwind disabled:* utilities: the prebuilt tailwind.css is
stale until `make css`, and verify-css-build.php gates that. */
/* A locked field reads as a record, not a form: no hover affordance, dotted rule.
Both hover rules are needed: they tie with .dark .fs-onboarding-input[class]:hover on
specificity and only win by coming later, so each mode needs its own. */
.fs-onboarding-input[class]:disabled {
opacity: 0.75;
cursor: default;
border-bottom-style: dotted;
box-shadow: none;
}
.fs-onboarding-input[class]:disabled:hover {
border-bottom-color: rgba(198, 198, 205, 0.5);
}
.dark .fs-onboarding-input[class]:disabled:hover {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.fs-readonly-banner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.125rem;
/* Elevation over the card (--fs-bg-card): tertiary is a step lighter in dark (#1e293b vs #1a2540)
and a step darker in light, so the banner reads as an inset in both. bg-secondary would equal
the card in dark and vanish. */
background: var(--fs-bg-tertiary);
}
.fs-readonly-badge {
flex-shrink: 0;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.125rem 0.5rem;
border-radius: 0.125rem;
/* One step off the banner (--fs-bg-tertiary) so the pill stays distinct. */
background: var(--fs-bg-secondary);
color: var(--fs-text-secondary);
}
.fs-readonly-note {
flex: 1 1 16rem;
min-width: 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--fs-text-secondary);
}
.fs-readonly-back {
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 700;
color: var(--fs-text-primary);
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease;
}
.fs-readonly-back:hover {
border-bottom-color: var(--fs-text-primary);
}
/* Accordion step titles are the navigation into the read-only view. */
.fs-history-link {
text-align: left;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease, color 0.15s ease;
}
.fs-history-link:hover {
border-bottom-color: currentColor;
}
.fs-history-link[aria-current] {
border-bottom-color: currentColor;
}
.dark .fs-onboarding-input[class]:focus {
border-bottom-color: rgba(255, 255, 255, 0.6);
box-shadow: inset 0 -4px 8px -4px rgba(255, 255, 255, 0.12);
}
.fs-onboarding-input[class]:focus-visible {
box-shadow: var(--fs-focus-ring), inset 0 -4px 8px -4px rgba(0, 0, 0, 0.08);
}
.dark .fs-onboarding-input[class]:focus-visible {
box-shadow: var(--fs-focus-ring), inset 0 -4px 8px -4px rgba(255, 255, 255, 0.12);
}
/* Mobile: bump input font-size to 16px to prevent iOS auto-zoom on focus */
@media (max-width: 767px) {
.fs-input,
.fs-onboarding-input[class] {
font-size: 1rem;
}
}
/* Date Triad: three-part date input (Day / Month / Year) */
.fs-date-triad {
border: none;
padding: 0;
margin: 0;
min-width: 0;
}
.fs-date-triad-grid {
display: grid;
grid-template-columns: 1fr 2fr 1.4fr;
gap: var(--fs-space-3);
align-items: end;
}
@media (max-width: 480px) {
.fs-date-triad-grid {
grid-template-columns: 1fr 1.6fr 1.2fr;
gap: var(--fs-space-2);
}
}
.fs-date-triad-part {
display: flex;
flex-direction: column;
min-width: 0;
}
.fs-date-triad-part label {
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fs-text-muted, #505f76);
margin-bottom: 0.375rem;
}
.fs-date-triad-error {
display: none;
font-size: 0.75rem;
color: var(--fs-status-error, #ba1a1a);
background: var(--fs-status-error-bg, rgba(186, 26, 26, 0.08));
border-radius: 0.125rem;
padding: 0.5rem 0.75rem;
margin-top: 0.5rem;
}
.fs-date-triad[data-state="invalid"] .fs-date-triad-error {
display: block;
}
.fs-date-triad[data-state="invalid"] .fs-onboarding-input {
border-bottom-color: var(--fs-status-error, #ba1a1a);
}
/* Input with Icon */
.fs-input-wrapper {
position: relative;
}
.fs-input-wrapper .fs-input-icon {
position: absolute;
left: var(--fs-space-4);
top: 50%;
transform: translateY(-50%);
color: var(--fs-text-muted);
pointer-events: none;
}
.fs-input-wrapper .fs-input {
padding-left: var(--fs-space-10);
}
.fs-input-wrapper-trailing .fs-input {
padding-right: calc(var(--fs-space-10) + var(--fs-space-4));
}
/* Floating Label Input */
.fs-input-floating {
position: relative;
}
.fs-input-floating label {
position: absolute;
left: var(--fs-space-4);
top: 50%;
transform: translateY(-50%);
color: var(--fs-text-muted);
font-size: var(--fs-text-sm);
transition: all var(--fs-transition-base);
pointer-events: none;
background: transparent;
padding: 0 var(--fs-space-1);
}
.fs-input-floating .fs-input:focus ~ label,
.fs-input-floating .fs-input:not(:placeholder-shown) ~ label {
top: 0;
font-size: var(--fs-text-xs);
color: var(--fs-brand-primary, #131b2e);
}
.dark .fs-input-floating .fs-input:focus ~ label,
.dark .fs-input-floating .fs-input:not(:placeholder-shown) ~ label {
color: var(--fs-text-primary);
}
/* ========== BADGES / CHIPS ========== */
.fs-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.6rem;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: var(--fs-radius-sm);
}
.fs-badge-success {
background: rgba(46, 125, 50, 0.10);
color: var(--fs-success);
}
.fs-badge-warning {
background: rgba(230, 81, 0, 0.10);
color: var(--fs-warning);
}
.fs-badge-error {
background: rgba(186, 26, 26, 0.10);
color: var(--fs-error);
}
.fs-badge-info {
background: var(--fs-info-bg-strong);
color: var(--fs-info);
}
.fs-badge-neutral {
background: var(--fs-bg-tertiary);
color: var(--fs-text-secondary);
}
.fs-badge-gold {
background: var(--fs-gold-light);
color: var(--fs-brand-primary, #131b2e);
}
/* Like .fs-badge-gold, but follows the org's accent instead of the static gold.
Ink is fixed, not --fs-on-brand-accent: that is contrast-picked against the base accent while
the surface here is accentLight (0.4c + 153 per channel, so never darker than #999999). */
.fs-badge-brand {
background: var(--fs-brand-accent-light);
color: #131b2e;
}
.dark .fs-badge-success {
background: rgba(102, 187, 106, 0.15);
color: var(--fs-success);
}
.dark .fs-badge-warning {
background: rgba(255, 183, 77, 0.15);
color: var(--fs-warning);
}
.dark .fs-badge-error {
background: rgba(239, 83, 80, 0.15);
color: var(--fs-error);
}
.dark .fs-badge-info {
background: rgba(144, 202, 249, 0.15);
color: var(--fs-info);
}
.dark .fs-badge-neutral {
background: rgba(255, 255, 255, 0.08);
color: var(--fs-text-secondary);
}
.dark .fs-badge-gold {
background: rgba(233, 193, 118, 0.2);
color: var(--fs-gold-light);
}
.dark .fs-badge-brand {
background: rgba(var(--fs-brand-accent-rgb, 233, 193, 118), 0.2);
color: var(--fs-brand-accent-light);
}
/* ========== SPACING UTILITIES ========== */
.fs-mb-4 { margin-bottom: var(--fs-space-4); }
/* ========== ALERTS / MESSAGES ========== */
.fs-alert {
display: flex;
align-items: flex-start;
gap: var(--fs-space-3);
padding: var(--fs-space-4);
border-radius: var(--fs-radius-sm);
font-size: var(--fs-text-sm);
border-left: 3px solid;
}
.fs-alert-success {
background: rgba(46, 125, 50, 0.08);
color: var(--fs-success-text);
border-left-color: var(--fs-success);
}
.fs-alert-error {
background: rgba(186, 26, 26, 0.08);
color: var(--fs-error-text);
border-left-color: var(--fs-error);
}
.fs-alert-warning {
background: rgba(230, 81, 0, 0.08);
color: var(--fs-warning-text);
border-left-color: var(--fs-warning);
}
.fs-alert-info {
background: rgba(80, 95, 118, 0.08);
color: var(--fs-info-text);
border-left-color: var(--fs-info);
}
/* ========== ONBOARDING ARTEFACT-WAIT (FUN-061 S2) ========== */
/* Flächen über Farbabstufung statt Border (No-Line-Rule), ambient shadow, scharfe Ecken. */
.fs-onboarding-wait {
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-sm);
padding: var(--fs-space-8) var(--fs-space-6);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}
.dark .fs-onboarding-wait {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.fs-onboarding-wait-badge {
display: inline-block;
margin-bottom: var(--fs-space-4);
padding: var(--fs-space-1) var(--fs-space-3);
background: var(--fs-bg-tertiary);
color: var(--fs-text-secondary);
font-size: var(--fs-text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--fs-radius-sm);
}
.fs-onboarding-wait-title {
margin: 0;
font-family: var(--fs-font-serif);
font-size: var(--fs-text-2xl);
line-height: 1.25;
color: var(--fs-text-primary);
}
.fs-onboarding-wait-step {
margin: var(--fs-space-2) 0 0;
font-size: var(--fs-text-sm);
font-weight: 600;
color: var(--fs-text-secondary);
}
.fs-onboarding-wait-body {
margin: var(--fs-space-4) 0 0;
font-size: var(--fs-text-sm);
line-height: 1.6;
color: var(--fs-text-secondary);
}
.fs-onboarding-wait-duration {
margin: var(--fs-space-4) 0 0;
padding-top: var(--fs-space-4);
font-size: var(--fs-text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fs-text-secondary);
}
/* ========== TABS ========== */
.fs-tabs {
display: flex;
gap: var(--fs-space-1);
background: var(--fs-bg-secondary);
padding: 0.25rem;
border-radius: var(--fs-radius-sm);
margin-bottom: var(--fs-space-6);
}
.fs-tab {
padding: var(--fs-space-2) var(--fs-space-4);
font-size: var(--fs-text-sm);
font-weight: 500;
color: var(--fs-text-muted);
background: transparent;
border: none;
border-radius: var(--fs-radius-sm);
cursor: pointer;
transition: all var(--fs-transition-base);
white-space: nowrap; /* tab labels scroll (overflow-x-auto nav), never wrap mid-label */
}
.fs-tab:hover {
color: var(--fs-text-primary);
background: var(--fs-bg-card);
}
.fs-tab-active {
color: var(--fs-brand-primary, #131b2e);
background: var(--fs-bg-card);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.dark .fs-tabs {
background: rgba(255, 255, 255, 0.05);
}
.dark .fs-tab:hover {
background: rgba(255, 255, 255, 0.08);
}
.dark .fs-tab-active {
color: var(--fs-text-primary);
background: var(--fs-bg-card);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* White-label sub-nav: hug-width segmented control, icon + label per link tab */
.fs-whitelabel-tabs { display: inline-flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fs-whitelabel-tabs .fs-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--fs-space-2); text-decoration: none; white-space: nowrap; }
.fs-whitelabel-tabs .fs-tab .material-symbols-outlined { font-size: 18px; line-height: 1; }
/* Tab Panels */
.fs-tab-panel {
display: none;
}
.fs-tab-panel-active {
display: block;
animation: fs-fade-in 0.2s ease;
}
@keyframes fs-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ========== EMPTY STATES ========== */
.fs-empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--fs-space-12) var(--fs-space-6);
background: var(--fs-bg-primary);
border-radius: var(--fs-radius-sm);
}
.fs-empty-state-icon {
width: 64px;
height: 64px;
margin-bottom: var(--fs-space-4);
color: var(--fs-text-muted);
}
.fs-empty-state-title {
font-size: var(--fs-text-xl);
font-weight: 400;
font-family: var(--fs-font-serif);
color: var(--fs-text-primary, #131b2e);
margin-bottom: var(--fs-space-2);
}
.fs-empty-state-text {
font-size: var(--fs-text-sm);
color: var(--fs-text-secondary);
max-width: 400px;
}
/* Only gap before a following actions block; a text-only empty state stays vertically centered. */
.fs-empty-state-text:not(:last-child) {
margin-bottom: var(--fs-space-6);
}
.dark .fs-empty-state {
background: var(--fs-bg-card);
}
.dark .fs-empty-state-title {
color: var(--fs-text-primary);
}
/* ========== LOADING STATES ========== */
.fs-skeleton {
background: linear-gradient(
90deg,
var(--fs-bg-tertiary) 25%,
var(--fs-bg-secondary) 50%,
var(--fs-bg-tertiary) 75%
);
background-size: 200% 100%;
animation: fs-skeleton-loading 1.5s infinite;
border-radius: var(--fs-radius-sm);
}
@keyframes fs-skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.dark .fs-skeleton {
background: linear-gradient(
90deg,
var(--fs-skeleton-dark-base) 25%,
var(--fs-skeleton-dark-accent) 50%,
var(--fs-skeleton-dark-base) 75%
);
background-size: 200% 100%;
}
.fs-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid rgba(var(--fs-brand-primary-rgb, 19, 27, 46), 0.15);
border-top-color: var(--fs-brand-primary, #131b2e);
border-radius: 50%;
animation: fs-spin 0.7s linear infinite;
}
.dark .fs-spinner {
border-color: rgba(255, 255, 255, 0.15);
border-top-color: var(--fs-text-primary);
}
@keyframes fs-spin {
to { transform: rotate(360deg); }
}
/* ========== TOOLTIPS ========== */
.fs-tooltip {
position: relative;
}
.fs-tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
padding: var(--fs-space-2) var(--fs-space-3);
background: var(--fs-brand-primary, #131b2e);
color: var(--fs-on-brand-primary, #ffffff);
font-size: var(--fs-text-xs);
font-weight: 500;
border-radius: var(--fs-radius-sm);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all var(--fs-transition-fast);
z-index: 50;
}
.fs-tooltip:hover::after,
.fs-tooltip:focus::after,
.fs-tooltip:focus-within::after,
.fs-tooltip.is-active::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-4px);
}
.dark .fs-breadcrumb a:hover {
color: var(--fs-text-primary);
}
.dark .fs-breadcrumb-current {
color: var(--fs-text-primary);
}
/* ========== FINANCIAL ATELIER SPECIFICS ========== */
/* Serif display text */
.fa-display {
font-family: 'Noto Serif', serif;
font-weight: 400;
}
.fa-display-italic {
font-family: 'Noto Serif', serif;
font-style: italic;
font-weight: 300;
}
/* Success gold progress bar */
.fa-progress-gold {
background: linear-gradient(to right, var(--fs-gold), var(--fs-gold-light));
height: 4px;
border-radius: 0;
}
/* Ledger table rows */
.fa-ledger-row {
padding: 0.875rem 1rem;
transition: background-color var(--fs-transition-fast);
border-radius: var(--fs-radius-sm);
}
.fa-ledger-row:hover {
background: var(--fs-bg-secondary);
}
.dark .fa-ledger-row:hover {
background: rgba(255, 255, 255, 0.05);
}
/* Dark surface card (primary-container) */
.fa-card-dark {
background: var(--fs-brand-primary, #131b2e);
color: var(--fs-on-brand-primary, #ffffff);
border-radius: var(--fs-radius-sm);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
}
/* Glass panel for upload areas */
.fa-glass-panel {
background: rgba(236, 238, 240, 0.7);
backdrop-filter: blur(20px);
border-radius: var(--fs-radius-sm);
}
.dark .fa-glass-panel {
background: rgba(var(--fs-bg-secondary-rgb), 0.7);
}
/* ========== BANKING PREMIUM (BP1): hero + credit utilization ========== */
/* padding + line-height live here (not Tailwind utilities) so they don't depend on the prebuilt build */
.fa-hero { padding: 1.5rem; }
@media (min-width: 640px) { .fa-hero { padding: 1.75rem; } }
.fa-hero .fa-display {
font-size: clamp(1.9rem, 4vw, 2.6rem);
line-height: 1;
color: var(--fs-text-primary);
}
/* Hero stat-band: debt / cash / net spread across the full card width (no left-hugging waste) */
.fa-hero-band { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; }
.fa-hero-debt { display: flex; align-items: center; gap: 1.25rem; }
.fa-hero-util { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.fa-hero-cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fs-text-muted); text-align: center; }
.fa-hero-stat { display: flex; flex-direction: column; gap: 0.2rem; min-width: 8rem; }
.fa-hero-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fs-text-muted); }
.fa-hero-owe { color: var(--fs-warning); }
.fa-hero-have { color: var(--fs-info); }
.fa-hero-figure { font-family: 'Noto Serif', serif; font-weight: 400; font-size: 1.9rem; line-height: 1.05; color: var(--fs-text-primary); }
.fa-hero-figure-lg { font-size: 2.4rem; }
.fa-hero-neg { color: var(--fs-text-secondary); }
.fa-hero-note { font-size: 12px; color: var(--fs-text-secondary); }
.fa-hero-net { padding-left: 2rem; border-left: 2px solid var(--fs-border-strong); }
@media (max-width: 820px) {
.fa-hero-net { padding-left: 0; border-left: 0; border-top: 1px solid var(--fs-border-strong); padding-top: 1rem; width: 100%; }
}
/* Tone drives one custom prop, shared by the ring stroke and the bar fill */
.fa-util-success { --fa-util-color: var(--fs-success); }
.fa-util-info { --fa-util-color: var(--fs-info); }
.fa-util-warning { --fa-util-color: var(--fs-warning); }
.fa-util-track { stroke: var(--fs-bg-secondary); }
.dark .fa-util-track { stroke: rgba(255, 255, 255, 0.10); }
.fa-util-value { stroke: var(--fa-util-color, var(--fs-info)); }
.fa-util-text { fill: var(--fs-text-primary); font-family: 'Manrope', sans-serif; font-size: 8px; font-weight: 700; }
.fa-util-bar-track { height: 4px; background: var(--fs-bg-secondary); border-radius: 999px; overflow: hidden; }
.dark .fa-util-bar-track { background: rgba(255, 255, 255, 0.10); }
.fa-util-bar-value { height: 100%; background: var(--fa-util-color, var(--fs-info)); border-radius: 999px; transition: width var(--fs-transition-base); }
/* ========== BANKING PREMIUM (BP2): ledger avatars + category chips + day header + skeleton ========== */
.fa-avatar {
position: relative; overflow: hidden;
width: 36px; height: 36px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
/* Merchant logo over the tinted initials fallback; onerror removes it so the initials show through. */
.fa-avatar-logo {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; border-radius: inherit;
background: #fff;
}
/* 6 muted, gold-free tints, stable per merchant (variant = crc32 % 6) */
.fa-avatar-0 { background: hsl(210 40% 92%); color: hsl(210 45% 34%); }
.fa-avatar-1 { background: hsl(160 38% 90%); color: hsl(160 40% 28%); }
.fa-avatar-2 { background: hsl(265 38% 93%); color: hsl(265 38% 42%); }
.fa-avatar-3 { background: hsl(340 42% 93%); color: hsl(340 42% 42%); }
.fa-avatar-4 { background: hsl(190 42% 90%); color: hsl(190 45% 30%); }
.fa-avatar-5 { background: hsl(120 30% 90%); color: hsl(120 32% 30%); }
.dark .fa-avatar-0 { background: hsl(210 30% 24%); color: hsl(210 45% 80%); }
.dark .fa-avatar-1 { background: hsl(160 28% 22%); color: hsl(160 40% 78%); }
.dark .fa-avatar-2 { background: hsl(265 28% 26%); color: hsl(265 40% 82%); }
.dark .fa-avatar-3 { background: hsl(340 30% 26%); color: hsl(340 42% 82%); }
.dark .fa-avatar-4 { background: hsl(190 30% 22%); color: hsl(190 45% 78%); }
.dark .fa-avatar-5 { background: hsl(120 22% 22%); color: hsl(120 32% 78%); }
.fa-cat-chip {
display: inline-flex; align-items: center; gap: 3px;
padding: 1px 7px 1px 5px; border-radius: 999px;
background: var(--fs-bg-secondary); color: var(--fs-text-secondary);
font-size: 11px; font-weight: 600; white-space: nowrap;
}
.fa-cat-chip .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
.dark .fa-cat-chip { background: rgba(255, 255, 255, 0.07); }
.fa-day-header { background: var(--fs-bg-primary); }
.dark .fa-day-header { background: rgba(255, 255, 255, 0.03); }
.fa-skeleton-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.fa-sk-avatar { width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0; }
.fa-sk-line { height: 10px; border-radius: 4px; }
/* ========== LEDGER CONTROLS (slim bar + collapsible advanced filters) ========== */
.fa-ledger-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.fa-ledger-search {
display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0;
padding: 0.5rem 0.75rem; background: var(--fs-bg-card);
border: 1px solid var(--fs-border-strong); border-radius: var(--fs-radius-lg);
transition: border-color var(--fs-transition-fast);
}
.fa-ledger-search:focus-within { border-color: var(--fs-brand-primary); }
.fa-ledger-search .material-symbols-outlined { font-size: 18px; color: var(--fs-text-muted); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
.fa-ledger-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--fs-text-primary); outline: none; }
.fa-ledger-tools { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.fa-ledger-sort.fs-select { width: auto; min-width: 9.5rem; }
.fa-ledger-btn {
display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem;
background: var(--fs-bg-card); border: 1px solid var(--fs-border-strong); border-radius: var(--fs-radius-lg);
font-size: 13px; font-weight: 600; color: var(--fs-text-secondary); cursor: pointer; white-space: nowrap;
transition: background var(--fs-transition-fast), color var(--fs-transition-fast), border-color var(--fs-transition-fast);
}
.fa-ledger-btn:hover { color: var(--fs-text-primary); }
.fa-ledger-btn .material-symbols-outlined { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.fa-ledger-btn[aria-expanded="true"] { background: var(--fs-bg-secondary); color: var(--fs-text-primary); border-color: transparent; }
.fa-ledger-badge {
display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
padding: 0 5px; border-radius: 999px; background: var(--fs-brand-primary); color: var(--fs-on-brand-primary, #fff);
font-size: 11px; font-weight: 700; line-height: 1;
}
.fa-ledger-adv {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem;
padding: 0.875rem 1rem; margin-bottom: 0.75rem;
background: var(--fs-bg-secondary); border-radius: var(--fs-radius-lg);
}
.fa-field { display: flex; flex-direction: column; gap: 0.3rem; }
.fa-field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fs-text-muted); }
.fa-field .fs-select, .fa-field input[type="date"] { width: auto; min-width: 8rem; }
.fa-date-range { display: flex; align-items: flex-end; gap: 0.5rem; }
.fa-date-sep { padding-bottom: 0.5rem; color: var(--fs-text-muted); }
.fa-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 13px; color: var(--fs-text-secondary); padding-bottom: 0.4rem; white-space: nowrap; }
.fa-ledger-reset { font-size: 12px; font-weight: 600; color: var(--fs-text-secondary); text-decoration: underline; text-underline-offset: 2px; padding-bottom: 0.4rem; background: none; border: 0; cursor: pointer; }
.fa-ledger-reset:hover { color: var(--fs-text-primary); }
/* FX-fee summary strip + bundle toggle (bundling is CSS-only via .fx-bundled on #js-ledger-body) */
.fa-fx-strip {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding: 0.625rem 0.875rem; margin-bottom: 0.75rem;
background: var(--fs-bg-secondary); border-radius: var(--fs-radius-lg);
font-size: 13px; color: var(--fs-text-secondary);
}
.fa-fx-strip .material-symbols-outlined { font-size: 18px; color: var(--fs-text-muted); }
.js-fx-annot { display: none; margin-left: 0.25rem; font-size: 12px; color: var(--fs-text-muted); }
.fx-bundled .js-fx-annot { display: inline; }
.fx-bundled .js-fx-fee { display: none; }
/* bundled: the matched purchase shows the COMBINED total (purchase + fee), not just the purchase */
.js-amt-bundled { display: none; }
.fx-bundled .js-fx-parent .js-amt-base { display: none; }
.fx-bundled .js-fx-parent .js-amt-bundled { display: inline; }
/* infinite-scroll: JS hides the manual button once the observer takes over; the auto-spinner shows mid-fetch */
.js-ledger-more-wrap.js-autoload .js-ledger-more { display: none; }
.fa-ledger-autospin { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0; color: var(--fs-text-muted); }
/* per-card ⋮ actions menu (account cards): manage a connection in place, no separate bank list */
.fa-cardmenu { position: relative; }
.fa-cardmenu-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 1.75rem; height: 1.75rem; border-radius: var(--fs-radius-sm);
color: var(--fs-text-muted); background: transparent; transition: background 0.15s, color 0.15s;
}
.fa-cardmenu-btn:hover { background: var(--fs-bg-secondary); color: var(--fs-text-primary); }
.fa-cardmenu-btn[aria-expanded="true"] { background: var(--fs-bg-secondary); color: var(--fs-text-primary); }
.fa-cardmenu-pop {
position: absolute; top: calc(100% + 0.25rem); right: 0; z-index: 30; min-width: 12rem;
padding: 0.25rem; background: var(--fs-bg-surface-high); border-radius: var(--fs-radius-md);
box-shadow: var(--fs-shadow-lg); transform-origin: top right;
}
.fa-cardmenu-item {
display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.625rem;
border-radius: var(--fs-radius-sm); font-size: 13px; font-weight: 500; text-align: left;
color: var(--fs-text-primary); background: transparent; transition: background 0.12s;
}
.fa-cardmenu-item:hover { background: var(--fs-bg-secondary); }
.fa-cardmenu-item .material-symbols-outlined { color: var(--fs-text-muted); }
.fa-cardmenu-danger { color: var(--fs-error); }
.fa-cardmenu-danger .material-symbols-outlined { color: var(--fs-error); }
.fa-cardmenu-danger:hover { background: var(--fs-error-bg); }
/* inline per-account edit panel (rename / private-business / link-to-business) */
.fa-acct-edit {
display: flex; flex-direction: column; gap: 0.625rem;
margin-top: 0.5rem; padding: 0.75rem;
background: var(--fs-bg-secondary); border-radius: var(--fs-radius-md);
}
.fa-acct-row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.fa-acct-row .fa-acct-field { flex: 1 1 8rem; min-width: 0; }
.fa-acct-field { display: flex; flex-direction: column; gap: 0.25rem; }
.fa-acct-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fs-text-muted); }
.fa-acct-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.fa-acct-chip {
display: inline-flex; align-items: center; padding: 0.0625rem 0.4375rem;
border-radius: var(--fs-radius-sm); font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
background: var(--fs-bg-secondary); color: var(--fs-text-secondary);
}
.fa-acct-chip-business { background: var(--fs-bg-surface-high); color: var(--fs-text-primary); }
/* Compliance T3: selected list row drives the right detail rail. Inset ring keeps the no-visible-border
look (no layout shift) and reads on both the dark blocker cards and the light agenda rows. */
.ci-row { transition: box-shadow var(--fs-transition-base); }
.ci-row-selected { box-shadow: inset 0 0 0 2px var(--fs-brand-accent); }
/* Entities S4: zweispaltiges Entity-Detail (links Identität/Eckdaten/Checkliste, rechts
Dashboard/Leitfaden). Handgeschrieben, weil arbitrary-/lg:-Grid-Utilities nicht im prebuilt
tailwind.css liegen (sonst inert bis make css). */
.fs-entity-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .fs-entity-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
/* compact activity/insights tab bar (fs-tabs default margin is too tall for the ledger header) */
.fs-tabs.fa-tabs-compact { display: inline-flex; margin-bottom: 0; }
/* cashflow insights — hand-CSS bar charts */
.fa-chart-months { display: flex; align-items: flex-end; gap: 0.5rem; height: 140px; }
.fa-chart-month { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; height: 100%; justify-content: flex-end; }
.fa-chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; justify-content: center; }
.fa-chart-bar { width: 14px; max-width: 42%; min-height: 2px; border-radius: 2px 2px 0 0; }
.fa-chart-bar-out { background: var(--fs-error); }
.fa-chart-bar-in { background: var(--fs-success); }
.fa-chart-mlabel { font-size: 11px; color: var(--fs-text-muted); font-weight: 600; }
.fa-chart-key { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.fa-chart-key-out { background: var(--fs-error); }
.fa-chart-key-in { background: var(--fs-success); }
.fa-chart-cats { display: flex; flex-direction: column; gap: 0.625rem; }
.fa-chart-cat { display: grid; grid-template-columns: minmax(120px, 1.4fr) 2fr minmax(92px, auto); align-items: center; gap: 0.75rem; }
.fa-chart-cat-head { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 13px; color: var(--fs-text-primary); min-width: 0; }
.fa-chart-cat-head .material-symbols-outlined { color: var(--fs-text-muted); }
.fa-chart-cat-track { height: 8px; background: var(--fs-bg-secondary); border-radius: 999px; overflow: hidden; }
.fa-chart-cat-bar { height: 100%; background: var(--fs-brand-primary); border-radius: 999px; min-width: 2px; }
/* dark mode: brand-primary == the dark card family and bg-secondary == the card → dark-on-dark, bars vanish.
Give the rail a faint elevation and the fill a legible slate so magnitude reads in both themes. */
.dark .fa-chart-cat-track { background: rgba(255, 255, 255, 0.07); }
.dark .fa-chart-cat-bar { background: var(--fs-text-secondary); }
.fa-chart-cat-amt { font-size: 12px; color: var(--fs-text-secondary); text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
.fa-chart-cat { grid-template-columns: 1fr auto; }
.fa-chart-cat-track { display: none; }
}
/* ========== TRANSACTION DETAIL SLIDE-OVER ========== */
.fs-txn-detail-overlay { position: fixed; inset: 0; z-index: 9999; }
.fs-txn-detail-backdrop {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px);
opacity: 0; transition: opacity var(--fs-transition-base);
}
.fs-txn-detail-overlay.is-open .fs-txn-detail-backdrop { opacity: 1; }
.fa-detail-panel {
position: absolute; top: 0; right: 0; height: 100dvh;
width: min(420px, 100%); overflow-y: auto;
background: var(--fs-bg-card); color: var(--fs-text-primary);
padding: var(--fs-space-6, 1.5rem);
box-shadow: var(--fs-shadow-xl, -8px 0 32px rgba(0, 0, 0, 0.18));
transform: translateX(100%); transition: transform var(--fs-transition-base);
}
.fs-txn-detail-overlay.is-open .fa-detail-panel { transform: none; }
.fa-detail-panel .fa-display { font-size: 2rem; line-height: 1.1; }
.fa-detail-panel .fa-display.text-error { color: var(--fs-error); }
.fa-detail-close {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--fs-radius-lg, 0.25rem);
color: var(--fs-text-secondary); transition: background var(--fs-transition-fast), color var(--fs-transition-fast);
}
.fa-detail-close:hover { background: var(--fs-bg-secondary); color: var(--fs-text-primary); }
.fa-detail-close .material-symbols-outlined { font-size: 20px; }
.fa-detail-list { margin-top: var(--fs-space-5, 1.25rem); display: grid; gap: 0; }
.fa-detail-item {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: 0.625rem 0; border-top: 1px solid var(--fs-bg-secondary);
}
.fa-detail-item:first-child { border-top: 0; }
.fa-detail-item dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fs-text-secondary); white-space: nowrap; }
.fa-detail-item dd { font-size: 14px; color: var(--fs-text-primary); text-align: right; min-width: 0; }
.fa-detail-cat { margin-top: var(--fs-space-5, 1.25rem); padding-top: var(--fs-space-4, 1rem); border-top: 1px solid var(--fs-bg-secondary); }
.fa-detail-reset {
display: inline-block; margin-top: 0.625rem; font-size: 12px; font-weight: 600;
color: var(--fs-text-secondary); text-decoration: underline; text-underline-offset: 2px;
transition: color var(--fs-transition-fast);
}
.fa-detail-reset:hover { color: var(--fs-text-primary); }
.dark .fa-detail-close:hover { background: rgba(255, 255, 255, 0.07); }
.dark .fa-detail-item { border-top-color: rgba(255, 255, 255, 0.08); }
.dark .fa-detail-cat { border-top-color: rgba(255, 255, 255, 0.08); }
@media (prefers-reduced-motion: reduce) {
.fs-txn-detail-backdrop, .fa-detail-panel { transition: none; }
}
/* ========== SERIF UTILITY ========== */
.fs-serif {
font-family: var(--fs-font-serif);
}
.fs-phase-title {
font-family: var(--fs-font-serif);
font-weight: 400;
letter-spacing: -0.01em;
}
.fs-tagline {
font-family: var(--fs-font-serif);
font-style: italic;
font-weight: 300;
color: var(--fs-text-secondary);
}
/* ========== PHASE AMBIENT ========== */
.fs-phase-0 { background-color: var(--fs-bg-primary); }
.fs-phase-1 { background-color: color-mix(in srgb, var(--fs-bg-primary) 97%, #2e7d32 3%); }
.fs-phase-2 { background-color: color-mix(in srgb, var(--fs-bg-primary) 97%, #1565c0 3%); }
.fs-phase-3 { background-color: color-mix(in srgb, var(--fs-bg-primary) 97%, #6a1b9a 3%); }
.fs-phase-4 { background-color: color-mix(in srgb, var(--fs-bg-primary) 97%, var(--fs-gold, #e9c176) 3%); }
.fs-phase-5 { background-color: color-mix(in srgb, var(--fs-bg-primary) 97%, #131b2e 3%); }
/* ========== SCROLL-AWARE NAV ========== */
.fs-scroll-indicator {
position: absolute;
left: 0;
width: 2px;
height: 1.5rem;
background: var(--fs-brand-primary);
border-radius: 1px;
transition: top var(--fs-transition-base), opacity var(--fs-transition-base);
opacity: 0;
}
.fs-scroll-indicator.visible {
opacity: 1;
}
/* ========== AI CHAT ========== */
.fs-ai-chat-body {
scroll-behavior: smooth;
}
.fs-ai-message {
max-width: 90%;
padding: var(--fs-space-4) var(--fs-space-5);
border-radius: var(--fs-radius-sm);
font-size: var(--fs-text-sm);
line-height: var(--fs-leading-relaxed);
position: relative;
overflow: visible;
word-wrap: break-word;
}
.fs-ai-message-user {
align-self: flex-end;
background: var(--fs-brand-primary, #131b2e);
color: var(--fs-on-brand-primary, #ffffff);
}
.dark .fs-ai-message-user {
background: #1e3a5f;
color: #ffffff;
}
.fs-ai-message-assistant {
align-self: flex-start;
background: var(--fs-bg-secondary);
color: var(--fs-text-secondary);
}
.dark .fs-ai-message-assistant {
background: #1e293b;
color: var(--fs-text-secondary);
}
.fs-ai-gold-accent {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background: var(--fs-gold, #e9c176);
}
.fs-ai-message-assistant .fs-ai-content strong {
color: var(--fs-text-primary);
}
.dark .fs-ai-message-assistant .fs-ai-content strong {
color: var(--fs-text-primary);
}
.fs-ai-inline-code {
background: rgba(0, 0, 0, 0.06);
padding: 1px 4px;
border-radius: 2px;
font-family: var(--fs-font-mono, 'SF Mono', monospace);
font-size: 0.85em;
}
.dark .fs-ai-inline-code {
background: rgba(255, 255, 255, 0.08);
}
/* Typing indicator */
.fs-ai-typing-indicator {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 0;
}
.fs-ai-typing-indicator span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--fs-gold, #e9c176);
animation: fsAiTypingPulse 1.4s ease-in-out infinite;
}
.fs-ai-typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.fs-ai-typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes fsAiTypingPulse {
0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
30% { opacity: 1; transform: scale(1); }
}
/* ========== AI DRAWER: Frank/Team tab switcher ========== */
.fs-chat-tab-btn {
color: var(--fs-text-muted);
background: transparent;
}
.fs-chat-tab-btn.is-active {
background: var(--fs-bg-primary);
color: var(--fs-text-primary);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.dark .fs-chat-tab-btn.is-active {
background: var(--fs-bg-tertiary);
color: var(--fs-text-primary);
}
/* Team pane reuses chat-thread.php (no page-shell here) — give thread/composer the
drawer-native horizontal rhythm; #chatHeader already carries its own px-6 py-4. */
#teamPane #chatHeader {
flex-shrink: 0;
}
#teamPane .fs-chat-thread {
flex: 1 1 auto;
min-height: 0;
max-height: none;
padding-left: var(--fs-space-6);
padding-right: var(--fs-space-6);
}
#teamPane #chatComposer {
flex-shrink: 0;
padding: 0 var(--fs-space-6) var(--fs-space-4);
}
/* ========== CHAT (customer + org messages, mirrors Frank AI chat) ========== */
.fs-chat-header-avatar {
background: var(--fs-bg-secondary);
}
.dark .fs-chat-header-avatar {
background: var(--fs-bg-tertiary);
}
.fs-chat-header-initial {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--fs-brand-primary, #131b2e);
color: var(--fs-on-brand-primary, #ffffff);
font-family: var(--fs-font-serif, 'Noto Serif', serif);
font-weight: 600;
font-size: 1.125rem;
}
.fs-chat-header-dot {
background: var(--fs-text-muted);
opacity: 0.35;
transition: background 0.2s ease, opacity 0.2s ease;
}
.fs-chat-header-dot.is-online {
background: var(--fs-success, #2e7d32);
opacity: 1;
}
/* gelb = in der App, aber nicht in diesem Chat */
.fs-chat-header-dot.is-away {
background: var(--fs-warning, #bf360c);
opacity: 1;
}
/* ── Kontaktliste: Avatar mit Präsenzpunkt ── */
.fs-chat-inbox-avatar {
position: relative;
flex: 0 0 auto;
width: 2rem;
height: 2rem;
border-radius: 9999px;
overflow: visible;
background: var(--fs-bg-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.dark .fs-chat-inbox-avatar { background: var(--fs-bg-tertiary); }
.fs-chat-inbox-avatar img {
border-radius: 9999px;
}
.fs-chat-inbox-dot {
position: absolute;
right: -1px;
bottom: -1px;
width: 0.625rem;
height: 0.625rem;
border-radius: 9999px;
border: 2px solid var(--fs-bg-card);
}
.fs-chat-inbox-text {
display: flex;
flex-direction: column;
gap: var(--fs-space-1);
min-width: 0;
flex: 1 1 auto;
}
.fs-chat-thread {
display: flex;
flex-direction: column;
max-height: 60vh;
overflow-y: auto;
scroll-behavior: smooth;
padding: var(--fs-space-4) 0;
}
.fs-chat-loading {
display: flex;
justify-content: center;
padding: var(--fs-space-6) 0;
}
.fs-chat-empty {
padding: var(--fs-space-6) 0;
text-align: center;
font-size: var(--fs-text-sm);
color: var(--fs-text-muted);
}
.fs-chat-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--fs-space-4);
margin: 0;
padding: 0;
}
.fs-chat-bubble {
max-width: 90%;
padding: var(--fs-space-4) var(--fs-space-5);
border-radius: var(--fs-radius-sm);
font-size: var(--fs-text-sm);
line-height: var(--fs-leading-relaxed);
word-wrap: break-word;
white-space: pre-wrap;
position: relative;
}
.fs-chat-bubble.is-mine {
align-self: flex-end;
background: var(--fs-brand-primary, #131b2e);
color: var(--fs-on-brand-primary, #ffffff);
}
.dark .fs-chat-bubble.is-mine {
background: #1e3a5f;
color: #ffffff;
}
.fs-chat-bubble.is-org {
align-self: flex-start;
background: var(--fs-bg-secondary);
color: var(--fs-text-secondary);
padding-left: calc(var(--fs-space-5) + 3px);
}
.dark .fs-chat-bubble.is-org {
background: #1e293b;
color: var(--fs-text-secondary);
}
.fs-chat-bubble.is-org::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background: var(--fs-gold, #e9c176);
}
.fs-chat-bubble.is-system {
align-self: center;
background: transparent;
color: var(--fs-text-muted);
font-size: var(--fs-text-xs);
}
.fs-chat-who {
display: block;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--fs-text-muted);
margin-bottom: var(--fs-space-1);
opacity: 0.85;
}
.fs-chat-bubble.is-mine .fs-chat-who {
color: rgba(255, 255, 255, 0.7);
}
.fs-chat-bubble.is-read .fs-chat-body::after {
content: " \2713";
color: var(--fs-text-muted);
}
.fs-chat-bubble.is-mine.is-read .fs-chat-body::after {
color: rgba(255, 255, 255, 0.6);
}
.fs-chat-bubble.is-sending { opacity: 0.55; }
.fs-chat-bubble.is-failed { opacity: 1; }
.fs-chat-bubble.is-failed::after {
content: "!";
position: absolute;
right: calc(var(--fs-space-5) * -1);
top: 50%;
transform: translateY(-50%);
color: var(--fs-error, #b3261e);
font-weight: 700;
}
.fs-chat-bubble-enter {
animation: fsChatBubbleIn 150ms ease-out;
}
@keyframes fsChatBubbleIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.fs-chat-bubble-enter { animation: none; }
}
.fs-chat-composer {
display: flex;
flex-direction: column;
gap: var(--fs-space-2);
margin-top: var(--fs-space-4);
}
.fs-chat-ai-suggest {
align-self: flex-start;
}
.fs-chat-file-chip {
align-self: flex-start;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-text-xs);
color: var(--fs-text-muted);
}
.fs-chat-attachment {
display: inline-flex;
align-items: center;
margin-top: var(--fs-space-1);
font-size: var(--fs-text-sm);
text-decoration: underline;
color: inherit;
word-break: break-all;
}
/* ── Org inbox: two-pane shell ── */
.fs-chat-shell {
display: grid;
grid-template-columns: minmax(0, 320px) 1fr;
gap: var(--fs-space-6);
align-items: start;
}
@media (max-width: 768px) {
.fs-chat-shell { grid-template-columns: 1fr; }
}
.fs-chat-inbox-pane {
display: flex;
flex-direction: column;
gap: var(--fs-space-3);
min-width: 0;
}
/* ── Org-Chat als schwebendes Fenster (Standard) bzw. Vollbild (per Toggle) ──
Positionsbox ist klickdurchlässig, nur die Karte fängt Klicks — so bleibt beim
kleinen Fenster der Rest der Seite sichtbar und der Slide-in unverändert. */
.fs-chat-drawer {
top: auto;
bottom: var(--fs-space-4);
right: var(--fs-space-4);
width: min(400px, calc(100vw - 2 * var(--fs-space-4)));
height: min(560px, calc(100vh - 2 * var(--fs-space-4)));
display: flex;
pointer-events: none;
}
.fs-chat-window {
pointer-events: auto;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
min-height: 0;
background: var(--fs-bg-card);
border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow-xl);
overflow: hidden;
}
.fs-chat-window-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fs-space-3);
padding: var(--fs-space-3) var(--fs-space-5);
border-bottom: 1px solid var(--fs-border-default);
flex-shrink: 0;
}
.fs-chat-window-body {
flex: 1;
min-height: 0;
padding: var(--fs-space-4) var(--fs-space-5) var(--fs-space-2);
}
.fs-chat-drawer .fs-chat-shell {
grid-template-columns: 1fr; /* Standard: eine Spalte, Liste ODER Thread */
gap: var(--fs-space-3);
align-items: stretch;
height: 100%;
min-height: 0;
}
.fs-chat-drawer .fs-chat-inbox-pane {
min-height: 0;
overflow-y: auto;
}
.fs-chat-drawer .fs-chat-pane {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
/* Im Fenster füllt der Thread die Panelhöhe statt der 60vh-Kappung. */
.fs-chat-drawer .fs-chat-thread {
flex: 1;
max-height: none;
}
/* Eine Spalte: Liste bis zur Auswahl, danach Thread + Zurück-Button */
.fs-chat-back { display: none; }
.fs-chat-drawer .fs-chat-shell.is-thread-open .fs-chat-inbox-pane { display: none; }
.fs-chat-drawer .fs-chat-shell:not(.is-thread-open) .fs-chat-pane { display: none; }
.fs-chat-drawer .fs-chat-shell.is-thread-open .fs-chat-back { display: block; }
/* Platzhalter ohne Auswahl — nur im Vollbild sichtbar, im Fenster steht dort die Liste. */
.fs-chat-select-hint {
display: none;
margin: auto;
padding: var(--fs-space-6);
text-align: center;
font-size: var(--fs-text-sm);
color: var(--fs-text-secondary);
}
.fs-chat-drawer .fs-chat-shell:not(.is-thread-open) .fs-chat-select-hint { display: block; }
.fs-chat-drawer .fs-chat-shell:not(.is-thread-open) .fs-chat-pane > :not(.fs-chat-select-hint) { display: none; }
/* Vollbild: Zwei-Spalten-Layout, Liste und Thread gleichzeitig */
.fs-chat-drawer.is-fullscreen {
inset: 0;
width: 100%;
height: 100%;
}
.fs-chat-drawer.is-fullscreen .fs-chat-window {
border-radius: 0;
}
.fs-chat-drawer.is-fullscreen .fs-chat-shell {
grid-template-columns: minmax(0, 300px) 1fr;
gap: var(--fs-space-6);
}
.fs-chat-drawer.is-fullscreen .fs-chat-shell .fs-chat-inbox-pane,
.fs-chat-drawer.is-fullscreen .fs-chat-shell .fs-chat-pane { display: flex; }
.fs-chat-drawer.is-fullscreen .fs-chat-back { display: none; }
/* Vollbild lohnt sich erst ab großen Viewports */
.fs-chat-expand { display: none; }
@media (min-width: 1024px) {
.fs-chat-expand { display: inline-flex; }
}
.fs-chat-search {
width: 100%;
background: var(--fs-bg-secondary);
color: var(--fs-text-primary);
border: 0;
border-radius: var(--fs-radius-sm);
padding: var(--fs-space-3) var(--fs-space-4);
font-size: var(--fs-text-sm);
}
.dark .fs-chat-search { background: var(--fs-bg-tertiary); }
.fs-chat-search:focus {
outline: none;
box-shadow: var(--fs-focus-ring);
}
.fs-chat-inbox {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--fs-space-1);
max-height: 60vh;
overflow-y: auto;
}
.fs-chat-inbox-empty {
padding: var(--fs-space-6) 0;
text-align: center;
font-size: var(--fs-text-sm);
color: var(--fs-text-muted);
}
.fs-chat-inbox-item {
display: flex;
flex-direction: row; /* Avatar | Textspalte — die Stapelung lebt in .fs-chat-inbox-text */
align-items: center;
gap: var(--fs-space-3);
width: 100%;
text-align: left;
background: transparent;
border: 0;
border-radius: var(--fs-radius-sm);
padding: var(--fs-space-3) var(--fs-space-4);
cursor: pointer;
transition: background 0.15s ease;
}
.fs-chat-inbox-item:hover { background: var(--fs-bg-secondary); }
.dark .fs-chat-inbox-item:hover { background: var(--fs-bg-tertiary); }
.fs-chat-inbox-item.is-active { background: var(--fs-bg-secondary); }
.dark .fs-chat-inbox-item.is-active { background: var(--fs-bg-tertiary); }
.fs-chat-inbox-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fs-space-2);
}
.fs-chat-inbox-name {
font-size: var(--fs-text-sm);
font-weight: 600;
color: var(--fs-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fs-chat-unread {
flex-shrink: 0;
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background: var(--fs-brand-primary, #131b2e);
}
.dark .fs-chat-unread { background: var(--fs-text-primary); }
/* Read-only grant on an org<->client thread: badge in the inbox row, notice in place of the composer. */
.fs-chat-readonly-badge {
flex-shrink: 0;
margin-left: 0.375rem;
padding: 0.05rem 0.4rem;
border-radius: var(--fs-radius-sm, 0.125rem);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fs-text-muted);
background: var(--fs-bg-tertiary, rgba(19, 27, 46, 0.06));
}
.fs-chat-readonly-note {
padding: 0.85rem 1.25rem;
font-size: var(--fs-text-xs);
color: var(--fs-text-muted);
background: var(--fs-bg-tertiary, rgba(19, 27, 46, 0.04));
border-top: 1px solid var(--fs-border-default);
text-align: center;
}
.fs-chat-inbox-preview {
font-size: var(--fs-text-xs);
color: var(--fs-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fs-chat-pane { min-width: 0; }
/* ========== TOGGLE SWITCH ========== */
.fs-toggle {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.fs-toggle input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.fs-toggle-track {
width: 2.75rem;
height: 1.5rem;
background: #d1d5db;
border-radius: 9999px;
position: relative;
transition: background-color var(--fs-transition-base);
}
.dark .fs-toggle-track {
background: rgba(255, 255, 255, 0.15);
}
.fs-toggle-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 1.25rem;
height: 1.25rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 9999px;
transition: transform var(--fs-transition-base);
}
.fs-toggle input:checked + .fs-toggle-track {
background: var(--fs-brand-primary, #131b2e);
}
.fs-toggle input:checked + .fs-toggle-track::after {
transform: translateX(100%);
border-color: white;
}
/* ========== RESPONSIVE TABLES ========== */
.fs-table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
.fs-table-responsive table {
display: block;
}
.fs-table-responsive thead {
display: none;
}
.fs-table-responsive tbody {
display: flex;
flex-direction: column;
gap: var(--fs-space-3);
}
.fs-table-responsive tr {
display: flex;
flex-direction: column;
background: var(--fs-bg-card);
border-radius: var(--fs-radius-sm);
padding: var(--fs-space-4);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.fs-table-responsive td {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--fs-space-3);
padding: var(--fs-space-2) 0;
border-bottom: 1px solid var(--fs-border-default, rgba(0,0,0,0.06));
font-size: var(--fs-text-sm);
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.fs-table-responsive td:last-child {
border-bottom: none;
}
.fs-table-responsive td::before {
content: attr(data-label);
font-weight: 600;
font-size: var(--fs-text-xs);
color: var(--fs-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
margin-right: var(--fs-space-3);
}
.dark .fs-table-responsive tr {
background: var(--fs-bg-card);
}
}
/* Tablet: keep tabular layout but tighten density */
@media (min-width: 768px) and (max-width: 1023px) {
.fs-table-responsive th,
.fs-table-responsive td {
padding: var(--fs-space-2) var(--fs-space-3);
font-size: var(--fs-text-sm);
}
}
/* Toast, comfortable min width on desktop, edge-safe on tiny phones (≤360px) */
.fs-toast {
min-width: 300px;
max-width: 100%;
}
@media (max-width: 360px) {
.fs-toast-container {
left: var(--fs-space-4);
right: var(--fs-space-4);
}
.fs-toast {
min-width: 0;
}
}
/* Concierge Mode, amber admin workspace */
.fs-concierge-banner {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between; gap: var(--fs-space-4);
padding: var(--fs-space-3) var(--fs-space-6);
background: color-mix(in srgb, var(--fs-warning) 10%, var(--fs-bg-card));
border-bottom: 2px solid var(--fs-warning);
color: var(--fs-text-primary);
}
.fs-concierge-banner__text { display: flex; flex-direction: column; gap: 2px; }
.fs-concierge-banner__text strong { font-weight: 600; }
.fs-concierge-banner__text span { font-size: var(--fs-text-sm); opacity: .8; }
.fs-attribution-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 999px;
font-size: var(--fs-text-xs); font-weight: 500; letter-spacing: 0.02em;
}
.fs-attribution-pill.--admin { background: var(--fs-warning-bg); color: var(--fs-warning); }
.fs-attribution-pill.--member { background: var(--fs-info-bg); color: var(--fs-info); }
.fs-step-readonly-notice {
padding: var(--fs-space-4);
border-left: 3px solid var(--fs-warning);
background: var(--fs-warning-bg);
color: var(--fs-text-primary);
margin: var(--fs-space-4) 0;
}
.fs-step-readonly-notice__title { font-weight: 600; margin-bottom: 4px; }
.fs-step-readonly-notice__body { font-size: var(--fs-text-sm); opacity: .85; }
.fs-concierge-confirm {
position: fixed; inset: 0; background: rgba(0,0,0,.5);
display: flex; align-items: center; justify-content: center; z-index: 100;
}
.fs-concierge-confirm__card {
max-width: 420px; background: var(--fs-bg-card);
padding: var(--fs-space-6); border-radius: var(--fs-radius-md);
box-shadow: var(--fs-shadow-xl);
}
.fs-concierge-finish-button {
position: fixed; bottom: var(--fs-space-5); right: var(--fs-space-6);
z-index: 90;
padding: var(--fs-space-3) var(--fs-space-5);
background: var(--fs-brand-primary); color: var(--fs-on-brand-primary);
font-size: var(--fs-text-sm); font-weight: 600; letter-spacing: 0.02em;
border: 1px solid color-mix(in srgb, var(--fs-text-primary) 12%, transparent);
border-radius: var(--fs-radius-sm);
box-shadow: var(--fs-shadow-lg);
cursor: pointer; transition: opacity var(--fs-transition-base);
}
.dark .fs-concierge-finish-button { background: var(--fs-bg-tertiary); color: var(--fs-text-primary); }
.fs-concierge-finish-button:hover { opacity: 0.92; }
.fs-concierge-finish-button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Compliance fulfilled-history: desktop ledger grid, mobile stacked card */
.fs-fulfilled-head,
.fs-fulfilled-row {
display: grid;
grid-template-columns: 5fr 2fr 2fr 1fr;
}
@media (max-width: 767px) {
.fs-fulfilled-head {
display: none;
}
.fs-fulfilled-row {
grid-template-columns: 1fr;
align-items: flex-start;
gap: var(--fs-space-2);
}
}
/* ---------- Cockpit head --------------------------------------------------- */
.fs-concierge-cockpit {
display: flex;
align-items: center;
gap: var(--fs-space-4);
max-width: 968px;
margin: 0 auto;
padding: var(--fs-space-4) var(--fs-space-6) 0;
}
.fs-concierge-cockpit__main { flex: 1; min-width: 0; }
.fs-concierge-cockpit__eyebrow {
font-size: var(--fs-text-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fs-text-muted);
}
.fs-concierge-cockpit__action {
font-family: var(--fs-font-serif, serif);
font-size: var(--fs-text-lg);
color: var(--fs-text-primary);
margin-top: 2px;
}
.fs-concierge-cockpit__docs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--fs-space-2);
margin-top: var(--fs-space-2);
}
.fs-concierge-cockpit__docs-label { font-size: var(--fs-text-xs); opacity: 0.6; }
.fs-concierge-cockpit__chip {
font-size: var(--fs-text-xs);
padding: 2px 8px;
border-radius: 0.125rem;
background: var(--fs-warning-bg);
color: var(--fs-warning);
}
@media (max-width: 900px) { .fs-concierge-cockpit { flex-wrap: wrap; } }
/* ---------- Gap-Worklist (Operator-Konsole, ersetzt den Step-Stepper) ------ */
.fs-cc-layout {
display: grid;
grid-template-columns: 200px minmax(0, 700px);
gap: var(--fs-space-5);
align-items: start;
padding: var(--fs-space-5) var(--fs-space-6);
max-width: 968px;
margin: 0 auto;
}
@media (max-width: 860px) { .fs-cc-layout { grid-template-columns: 1fr; } }
/* Rail: ruhiger, in sich geschlossener Fortschritts-Panel (Glance + Sprung), keine Hauptnavigation */
.fs-cc-rail {
position: sticky;
top: var(--fs-space-4);
display: flex;
flex-direction: column;
gap: var(--fs-space-4);
max-height: calc(100vh - var(--fs-space-12));
overflow-y: auto;
padding: var(--fs-space-4);
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-sm);
}
@media (max-width: 860px) { .fs-cc-rail { position: static; max-height: none; } }
.fs-cc-rail__phase-head {
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fs-text-muted);
margin-bottom: var(--fs-space-1);
}
.fs-cc-rail__step {
display: flex;
align-items: center;
gap: var(--fs-space-2);
width: 100%;
text-align: left;
padding: 3px 6px;
border-radius: var(--fs-radius-sm);
background: transparent;
color: var(--fs-text-secondary);
font-size: var(--fs-text-xs);
line-height: 1.35;
cursor: pointer;
transition: background 0.12s ease;
}
.fs-cc-rail__step:hover { background: var(--fs-bg-tertiary); }
.fs-cc-rail__step--attention { color: var(--fs-text-primary); }
.fs-cc-rail__step--cursor { font-weight: 600; }
.fs-cc-rail__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-cc-rail__cursor { color: var(--fs-brand-fg); font-size: 9px; }
/* Status-Marker, gemeinsam fuer Rail, Karten und Zeilen */
.fs-cc-marker { flex-shrink: 0; display: inline-flex; justify-content: center; width: 1.1em; font-weight: 700; }
.fs-cc-marker--done { color: var(--fs-success); }
.fs-cc-marker--attention { color: var(--fs-warning); }
.fs-cc-marker--open { color: color-mix(in srgb, var(--fs-text-primary) 32%, transparent); }
.fs-cc-marker--denied { opacity: 0.55; }
/* Worklist */
.fs-cc-worklist { display: flex; flex-direction: column; gap: var(--fs-space-5); min-width: 0; }
.fs-cc-section { display: flex; flex-direction: column; gap: var(--fs-space-2); }
.fs-cc-section__head {
font-family: var(--fs-font-serif);
font-size: var(--fs-text-base);
color: var(--fs-text-secondary);
margin-bottom: 2px;
}
.fs-cc-empty {
padding: var(--fs-space-4);
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-sm);
color: var(--fs-text-muted);
font-size: var(--fs-text-sm);
}
/* Karte: eine offene (oder aufgeklappte) Step-Arbeitseinheit — dicht, nicht luftig */
.fs-cc-card {
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-sm);
padding: var(--fs-space-4);
border-left: 2px solid transparent;
}
.fs-cc-card--attention { border-left-color: var(--fs-warning); }
.fs-cc-card__head { display: flex; align-items: center; gap: var(--fs-space-2); margin-bottom: var(--fs-space-3); }
.fs-cc-card__title { flex: 1; min-width: 0; font-family: var(--fs-font-serif); font-size: var(--fs-text-base); color: var(--fs-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-cc-card__advance, .fs-cc-card__complete { flex-shrink: 0; }
.fs-cc-card__here { flex-shrink: 0; font-size: var(--fs-text-xs); color: var(--fs-brand-fg); white-space: nowrap; }
.fs-cc-card__empty { color: var(--fs-text-muted); font-size: var(--fs-text-sm); }
.fs-cc-link { background: none; color: var(--fs-brand-fg); font-size: var(--fs-text-xs); cursor: pointer; padding: 0; white-space: nowrap; }
.fs-cc-link:hover { text-decoration: underline; }
/* FUN-039 interne Staff-Subtasks im Concierge — bewusst gedaempft (interner Arbeitsbereich, kein Klienten-Inhalt). */
.fs-cc-subtasks { margin-top: var(--fs-space-3); padding-top: var(--fs-space-3); border-top: 1px solid var(--fs-border-subtle, rgba(0,0,0,0.06)); }
.fs-cc-subtasks__head { font-size: var(--fs-text-xs); font-weight: 600; color: var(--fs-text-muted); margin-bottom: var(--fs-space-2); }
.fs-cc-subtasks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fs-space-1); }
.fs-cc-subtasks__item label { display: flex; align-items: flex-start; gap: var(--fs-space-2); font-size: var(--fs-text-sm); color: var(--fs-text-primary); cursor: pointer; }
.fs-cc-subtasks__item input { margin-top: 0.2em; flex-shrink: 0; }
.fs-cc-subtasks__item input:checked + span { color: var(--fs-text-muted); text-decoration: line-through; }
/* internal call sheet in the concierge cockpit */
.fs-cc-callform { margin-top: var(--fs-space-3); padding-top: var(--fs-space-3); border-top: 1px solid var(--fs-border-subtle, rgba(0,0,0,0.06)); }
.fs-cc-callform__head { font-size: var(--fs-text-xs); font-weight: 600; color: var(--fs-text-muted); margin-bottom: var(--fs-space-2); }
.fs-cc-callform__field { display: flex; flex-direction: column; gap: var(--fs-space-1); margin-bottom: var(--fs-space-2); }
.fs-cc-callform__label { font-size: var(--fs-text-xs); font-weight: 600; color: var(--fs-text-primary); }
.fs-cc-callform__field > input[type="checkbox"] { align-self: flex-start; }
.fs-cc-callform__help { font-size: var(--fs-text-xs); color: var(--fs-text-muted); }
.fs-cc-callform__foot { display: flex; align-items: center; gap: var(--fs-space-2); margin-top: var(--fs-space-2); }
/* Call recordings — handwritten (no Tailwind rebuild). */
.fs-cc-recordings { margin-top: var(--fs-space-3); padding-top: var(--fs-space-3); border-top: 1px solid var(--fs-border-subtle, rgba(0,0,0,0.06)); }
.fs-cc-recordings__head { font-size: var(--fs-text-xs); font-weight: 600; color: var(--fs-text-muted); margin-bottom: var(--fs-space-2); }
.fs-cc-recordings__list { display: flex; flex-direction: column; gap: var(--fs-space-1); }
.fs-cc-recordings__empty { font-size: var(--fs-text-xs); color: var(--fs-text-muted); }
.fs-cc-recordings__item { display: flex; align-items: center; gap: var(--fs-space-2); }
.fs-cc-recordings__icon { width: 1rem; text-align: center; color: var(--fs-text-muted); }
.fs-cc-recordings__name { background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: var(--fs-text-primary); font-size: var(--fs-text-sm); text-decoration: underline; text-underline-offset: 2px; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-cc-recordings__size { font-size: var(--fs-text-xs); color: var(--fs-text-muted); flex: 0 0 auto; }
.fs-cc-recordings__del { background: none; border: none; padding: 0; cursor: pointer; color: var(--fs-text-muted); font-size: var(--fs-text-xs); flex: 0 0 auto; }
.fs-cc-recordings__del:hover { color: var(--fs-danger, #b42318); }
.fs-cc-recordings__foot { display: flex; align-items: center; gap: var(--fs-space-2); margin-top: var(--fs-space-2); }
.fs-cc-recordings__progress { font-size: var(--fs-text-xs); color: var(--fs-text-muted); }
.fs-cc-recordings__player { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); padding: var(--fs-space-4); }
.fs-cc-recordings__player video { max-width: 90vw; max-height: 90vh; }
.fs-cc-recordings__player audio { width: min(90vw, 32rem); }
.fs-cc-group { margin-top: var(--fs-space-3); }
.fs-cc-group:first-child { margin-top: 0; }
.fs-cc-group__header { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fs-text-muted); margin-bottom: var(--fs-space-1); }
/* Formularfelder gepackt + auf lesbare Maxbreite gekappt (kein 400px-Namensfeld). auto-fill statt
auto-fit: leere Spuren bleiben leer, statt die Felder ueber die ganze Breite zu ziehen. */
/* Felder fuellen die (jetzt schmalere) Karte sauber ohne tote Zone: auto-fill 1fr statt fester Maxbreite. */
.fs-cc-group__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--fs-space-2) var(--fs-space-4); }
.fs-cc-group__grid .fs-concierge-field { gap: 2px; }
.fs-cc-group__grid .fs-concierge-field__label { font-size: var(--fs-text-xs); color: var(--fs-text-muted); }
.fs-cc-group__grid .fs-input { padding-top: var(--fs-space-1); padding-bottom: var(--fs-space-1); }
/* Zusammengeklappte Zeile fuer erledigte/bereite/denied Steps */
.fs-cc-rowholder + .fs-cc-rowholder { margin-top: 2px; }
.fs-cc-row {
display: flex; align-items: center; gap: var(--fs-space-3);
width: 100%; text-align: left;
padding: var(--fs-space-3) var(--fs-space-4);
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-sm);
color: var(--fs-text-secondary);
font-size: var(--fs-text-sm);
cursor: pointer;
transition: background 0.12s ease;
}
.fs-cc-row:hover { background: var(--fs-bg-tertiary); }
.fs-cc-row--denied { cursor: default; }
.fs-cc-row--denied:hover { background: var(--fs-bg-secondary); }
.fs-cc-row__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fs-text-primary); }
.fs-cc-row--done .fs-cc-row__label { color: var(--fs-text-secondary); }
.fs-cc-row__hint { font-size: var(--fs-text-xs); color: var(--fs-text-muted); }
.fs-cc-rowholder.is-open .fs-cc-row { background: var(--fs-bg-tertiary); border-radius: var(--fs-radius-sm) var(--fs-radius-sm) 0 0; }
.fs-cc-rowholder.is-open .fs-cc-card { background: var(--fs-bg-tertiary); border-radius: 0 0 var(--fs-radius-sm) var(--fs-radius-sm); }
.fs-concierge-field { display: flex; flex-direction: column; gap: var(--fs-space-1); }
.fs-concierge-field__label {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fs-space-2);
font-size: var(--fs-text-xs);
font-weight: 500;
letter-spacing: 0.02em;
opacity: 0.75;
}
.fs-concierge-field__file { display: flex; align-items: center; gap: var(--fs-space-3); }
.fs-concierge-field__file-info { font-size: var(--fs-text-sm); opacity: 0.75; }
/* ---------- Institution chip (communication) ------------------------------ */
.fs-inst-chip {
background: color-mix(in srgb, var(--fs-inst-color, var(--fs-info)) 8%, transparent);
}
.fs-inst-icon {
color: var(--fs-inst-color, var(--fs-info));
}
.dark .fs-inst-icon {
color: color-mix(in srgb, var(--fs-inst-color, #90caf9) 72%, #ffffff);
}
/* --- Consent checkbox -------------------------------------------------------- */
/* Hand-written rather than Tailwind utilities: the prebuilt tailwind.css is stale until
`make css`, and verify-css-build.php gates that.
The lever here is `color`, NOT accent-color: the prebuilt CSS carries @tailwindcss/forms,
which sets appearance:none on checkboxes (so accent-color does nothing) and paints :checked
with currentColor. Without this rule the box renders in the plugin's default #2563eb blue,
which is not a brand colour. Those base rules use :where(), i.e. zero specificity, so a plain
class wins.
--fs-brand-fg, not --fs-brand-primary: .dark redefines fg (design-system.css:144) and leaves
primary alone, so primary would stay near-black on a dark ground. */
.fs-consent {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--fs-space-3);
padding: var(--fs-space-3) 0;
cursor: pointer;
}
.fs-consent-box[class] {
order: 1;
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
margin: 0.1rem 0 0;
color: var(--fs-brand-fg);
border-color: var(--fs-border-strong);
border-radius: var(--fs-radius-sm);
cursor: pointer;
}
/* The plugin's focus rule hard-codes --tw-ring-color:#2563eb, so branding `color` alone leaves a
blue halo on focus. Re-point the ring at the brand; keep the ring itself — it is the only focus
affordance the box has, and appearance:none removed the native one. */
.fs-consent-box[class]:focus {
--tw-ring-color: var(--fs-brand-fg);
--tw-ring-offset-color: var(--fs-bg-card);
}
.fs-consent-label {
order: 2;
flex: 1;
font-size: var(--fs-text-sm);
line-height: 1.5;
color: var(--fs-text-secondary);
}
/* showFieldError inserts its with insertAdjacentElement('afterend'), i.e. directly after the
input — between the box and its text. Without an explicit order it would wrap the consent text
onto a third line. */
.fs-consent [data-input-error-for] {
order: 3;
flex: 1 0 100%;
margin-left: calc(1.15rem + var(--fs-space-3));
}
/* --- Reveal a masked answer -------------------------------------------------- */
/* Sensitive answers (JourneyStatePolicy::PII_FORM_KEYS) render as ••••1234 in the history and the
read-only card; the real value only reaches the screen on click. Read-only: this swaps text and
writes nothing. */
.fs-reveal-row {
display: flex;
align-items: center;
gap: var(--fs-space-2);
}
.fs-reveal-row > input { flex: 1; }
.fs-reveal {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--fs-radius-sm);
color: var(--fs-text-muted, var(--fs-text-secondary));
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease;
}
.fs-reveal:hover,
.fs-reveal.is-revealed {
color: var(--fs-brand-fg);
background: var(--fs-bg-surface-high, transparent);
}
.fs-reveal-icon {
width: 1rem;
height: 1rem;
}
/* The eye reads as "revealed" once it is — a struck-through eye would need a second icon. */
.fs-reveal.is-revealed .fs-reveal-icon { opacity: 0.55; }
/* === "Dein Weg" journey: segmented phase head bar + drawer ===
All colour/elevation via --fs-* tokens so light/dark and org-brand accent flow through. */
.fs-journey-bar {
margin-bottom: var(--fs-space-6);
padding: var(--fs-space-3) var(--fs-space-4);
background: var(--fs-bg-card);
border-radius: var(--fs-radius-sm);
box-shadow: 0 6px 20px rgba(9, 14, 28, 0.06);
border: 1px solid transparent;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.fs-journey-bar:hover { border-color: var(--fs-line, rgba(20,30,50,0.09)); box-shadow: 0 10px 28px rgba(9, 14, 28, 0.10); }
.fs-journey-bar-top { display: flex; align-items: center; gap: var(--fs-space-3); margin-bottom: var(--fs-space-2); }
.fs-journey-bar-lbl { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--fs-text-muted); }
.fs-journey-bar-open { margin-left: auto; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--fs-text-secondary); }
.fs-journey-bar:hover .fs-journey-bar-open { color: var(--fs-brand-accent); }
.fs-journey-bar-open svg { width: 0.75rem; height: 0.75rem; }
.fs-journey-segs { display: flex; gap: 0.3125rem; }
.fs-journey-seg { flex: 1; height: 0.375rem; border-radius: 0.1875rem; background: var(--fs-bg-tertiary); overflow: hidden; }
.fs-journey-seg i { display: block; height: 100%; background: var(--fs-brand-accent); }
/* Ring the active phase so it reads as "here" even before any of its steps are done (fill 0%). */
.fs-journey-seg.is-current { box-shadow: inset 0 0 0 1.5px var(--fs-brand-accent); }
.fs-journey-seglabels { display: flex; gap: 0.3125rem; margin-top: 0.5625rem; }
.fs-journey-seglabels span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.3125rem; font-size: 0.6875rem; color: var(--fs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-journey-seglabels span em { flex-shrink: 0; font-style: normal; font-size: 0.625rem; color: var(--fs-brand-accent); }
.fs-journey-seglabels span.is-done { color: var(--fs-text-secondary); }
.fs-journey-seglabels span.is-current { color: var(--fs-text-primary); font-weight: 700; }
@media (max-width: 900px) { .fs-journey-seglabels { display: none; } }
.fs-journey-scrim { position: fixed; inset: 0; background: rgba(6, 10, 20, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 55; }
.fs-journey-scrim.is-open { opacity: 1; pointer-events: auto; }
.fs-journey-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 23.125rem; max-width: 88vw; background: var(--fs-bg-card); box-shadow: -18px 0 50px rgba(6, 10, 20, 0.28); transform: translateX(100%); transition: transform 0.24s ease; z-index: 60; display: flex; flex-direction: column; }
.fs-journey-drawer.is-open { transform: translateX(0); }
.fs-journey-drawer-head { padding: var(--fs-space-5) var(--fs-space-5) var(--fs-space-3); display: flex; align-items: center; }
.fs-journey-drawer-head h3 { font-size: 1.1875rem; color: var(--fs-text-primary); }
.fs-journey-drawer-close { margin-left: auto; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--fs-bg-secondary); border: none; cursor: pointer; color: var(--fs-text-secondary); font-size: 0.9375rem; line-height: 1; }
.fs-journey-drawer-close:hover { color: var(--fs-text-primary); }
.fs-journey-drawer-prog { padding: 0 var(--fs-space-5); }
.fs-journey-drawer-bar { height: 0.3125rem; border-radius: 0.1875rem; background: var(--fs-bg-tertiary); overflow: hidden; }
.fs-journey-drawer-bar i { display: block; height: 100%; background: var(--fs-brand-accent); }
.fs-journey-drawer-prog p { font-size: 0.6875rem; color: var(--fs-text-muted); margin-top: 0.4375rem; }
.fs-journey-drawer-list { flex: 1; overflow-y: auto; padding: var(--fs-space-3); }
.fs-journey-phase { border-radius: var(--fs-radius-sm); }
.fs-journey-phead { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--fs-radius-sm); }
.fs-journey-phead::-webkit-details-marker { display: none; }
.fs-journey-phead:hover { background: var(--fs-bg-secondary); }
.fs-journey-pmark { width: 1.125rem; height: 1.125rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; background: var(--fs-bg-tertiary); color: var(--fs-brand-accent); }
.fs-journey-pmark.is-todo { background: transparent; border: 1.5px solid var(--fs-bg-tertiary); color: transparent; }
.fs-journey-pmeta { display: flex; flex-direction: column; min-width: 0; }
.fs-journey-pname { font-size: 0.8125rem; font-weight: 600; color: var(--fs-text-primary); }
.fs-journey-psub { font-size: 0.625rem; color: var(--fs-text-muted); }
.fs-journey-pchev { width: 0.8125rem; height: 0.8125rem; margin-left: auto; flex-shrink: 0; color: var(--fs-text-muted); transition: transform 0.18s; }
.fs-journey-phase[open] > .fs-journey-phead .fs-journey-pchev { transform: rotate(90deg); }
.fs-journey-steps { display: flex; flex-direction: column; padding: 0.125rem 0 0.5rem 1.25rem; margin-left: 1.25rem; border-left: 1px solid var(--fs-bg-tertiary); }
.fs-journey-step { display: flex; align-items: center; gap: 0.625rem; width: 100%; text-align: left; padding: 0.4375rem 0.625rem; border: none; background: none; border-radius: var(--fs-radius-sm); font-family: inherit; font-size: 0.78125rem; color: var(--fs-text-secondary); }
.fs-journey-step.is-done, .fs-journey-step.is-current { cursor: pointer; transition: background 0.12s, color 0.12s; }
.fs-journey-step.is-done:hover, .fs-journey-step.is-current:hover { background: var(--fs-bg-tertiary); color: var(--fs-text-primary); }
/* Completed steps navigate to a read-only review — a chevron fades in on hover so "click to go there" reads. */
.fs-journey-step.is-done::after { content: "\203A"; margin-left: auto; padding-left: 0.5rem; font-size: 1rem; line-height: 1; color: var(--fs-brand-accent); opacity: 0; transition: opacity 0.12s; }
.fs-journey-step.is-done:hover::after, .fs-journey-step.is-done:focus-visible::after { opacity: 1; }
.fs-journey-step.is-current { color: var(--fs-text-primary); font-weight: 700; background: var(--fs-bg-tertiary); }
.fs-journey-step.is-current:hover { background: var(--fs-bg-secondary); }
.fs-journey-step.is-todo { color: var(--fs-text-muted); }
.fs-journey-smark { width: 0.875rem; flex-shrink: 0; display: grid; place-items: center; color: var(--fs-brand-accent); }
.fs-journey-step.is-todo .fs-journey-smark { color: transparent; }
.fs-journey-step.is-todo .fs-journey-smark i { width: 0.375rem; height: 0.375rem; border-radius: 50%; border: 1.5px solid var(--fs-text-muted); opacity: 0.5; }
.fs-journey-stitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .fs-journey-drawer, .fs-journey-scrim, .fs-journey-pchev { transition: none; } }
/* Onboarding-Studio: einspaltiges Board — nur die Sequenz; der Editor lebt im aufgeklappten
(fs-studio-body). Die frühere rechte Inspector-Spalte gibt es nicht mehr (Accordion-Reshape). */
.fs-studio-board { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.fs-studio-seq { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* FUN-138 D1 — Schritt-Vollansicht als MODUS des Builders. Der Editor-Koerper bleibt, wo er haengt
(im unter seiner Zeile); die Leinwand raeumt drumherum alles weg. Ein Umhaengen des Knotens in
einen eigenen Container haette die auf #studio-list delegierten Handler stillgelegt. */
.fs-studio-editbar { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fs-studio-editback { display: flex; align-items: center; gap: 0.375rem; background: transparent; color: var(--fs-text-secondary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0.375rem 0; }
.fs-studio-editback:hover { color: var(--fs-text-primary); }
.fs-studio-editback:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 2px; }
.fs-studio-editback .material-symbols-outlined { font-size: 1.0625rem; line-height: 1; }
.fs-studio-editbar-note { flex: 1; min-width: 0; text-align: right; font-size: 0.6875rem; color: var(--fs-text-secondary); }
/* Die Werkzeugleiste verschwindet im Editor — ausser sie meldet gerade eine ungespeicherte Reihenfolge.
Eine Warnung wegzublenden, weil man in einen anderen Modus gewechselt ist, waere der falsche Handel. */
.fs-studio-seq.is-editing #studio-order-savebar:not(.is-dirty),
.fs-studio-seq.is-editing #studio-order-blocknote,
.fs-studio-seq.is-editing #studio-composers,
.fs-studio-seq.is-editing .fs-studio-profiles,
.fs-studio-seq.is-editing .fs-studio-library,
.fs-studio-seq.is-editing .fs-studio-flowhead,
.fs-studio-seq.is-editing .fs-studio-flowhint,
.fs-studio-seq.is-editing #studio-list > li[data-order-key],
.fs-studio-seq.is-editing #studio-list > .fs-studio-phase-head,
.fs-studio-seq.is-editing .fs-studio-editor-li:not(.is-open) { display: none; }
/* Zugeklappte Phase darf den geoeffneten Editor nicht mit verstecken: man kommt aus der Bibliothek auch
in einen Schritt, dessen Band gerade zu ist. */
.fs-studio-seq.is-editing .fs-studio-editor-li.is-open { display: block !important; }
.fs-studio-seq.is-editing .fs-studio-body { padding: 0; gap: 1.125rem; }
/* Bearbeiten ist ein fokussierter Modus AUSSERHALB des Tab-Modells: die Tab-Leiste weicht, und der Builder-
Bereich (der den Editor traegt) wird eingeblendet, egal welcher Tab selektiert war. So oeffnet „Bearbeiten"
aus der Bibliothek den Editor, ohne sichtbar auf den Flow-Builder-Tab zu springen. Zuruecknehmen der Klasse
zeigt den zuvor selektierten Tab wieder (sein Zustand im Controller bleibt unberuehrt). Das !important
schlaegt das globale [hidden]{display:none!important} des gerade nicht selektierten Builder-Panels. */
/* Im Library-Edit gehoert die Profil-Zugehoerigkeit nicht dazu: „Aus Profil nehmen" ausblenden. */
#onboarding-studio-root.is-library-edit .studio-remove-from-profile { display: none; }
#onboarding-studio-root.is-step-editing .fs-studio-viewtabs { display: none; }
#onboarding-studio-root.is-step-editing [data-view-panel] { display: none !important; }
#onboarding-studio-root.is-step-editing [data-view-panel="builder"] { display: block !important; }
/* Karten der Vollansicht. Wie im Entwurf: schwebende Flaechen mit Abstand statt einer Flaeche mit
Trennlinien — die Trennung entsteht durch Abstand und Schatten (No-Line-Regel). */
.fs-studio-edcard { background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-sm); padding: 1.375rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.fs-studio-edhead { border-top: 2px solid var(--fs-brand-secondary, #505f76); }
.fs-studio-edtype { display: flex; align-items: center; gap: 0.625rem; }
/* Kombi-Selektor, nicht nur .fs-studio-edtype-icon: app.css laedt NACH components.css und setzt dort
.material-symbols-outlined { display: inline-block }. Bei gleicher Spezifitaet gewinnt app.css, das
Glyph sitzt dann an der Baseline statt in der Mitte des Kastens. Gilt fuer jedes Icon-Element, dem wir
hier ein eigenes display geben. */
.fs-studio-edtype-icon.material-symbols-outlined { flex: none; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; line-height: 1; background: var(--fs-brand-primary, #131b2e); color: var(--fs-on-brand-primary, #fff); border-radius: var(--fs-radius-sm, 0.125rem); }
.fs-studio-edtype-label { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-text-secondary); }
.fs-studio-edtype-fixed { font-size: 0.625rem; color: var(--fs-text-secondary); opacity: 0.75; }
.fs-studio-edtype-own { font-size: 0.59375rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fs-text-secondary); background: var(--fs-bg-tertiary, #eceef0); padding: 0.1875rem 0.4375rem; border-radius: var(--fs-radius-sm, 0.125rem); }
.dark .fs-studio-edtype-own { background: rgba(255, 255, 255, 0.09); color: var(--fs-text-primary); }
.fs-studio-edtype-spacer { flex: 1 1 auto; }
.fs-studio-edhead .fs-studio-field-label { display: none; }
.fs-studio-edhead .studio-field { font-family: var(--fs-font-serif, 'Noto Serif', serif); font-size: 1.375rem; }
.fs-studio-edhint { font-size: 0.65625rem; color: var(--fs-text-secondary); }
.fs-studio-edlabel { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-text-secondary); }
.fs-studio-edphase { font-size: 0.6875rem; color: var(--fs-text-secondary); }
/* Review-Auswahl: zweispaltig, weil der Feldkatalog lang ist und eine einspaltige Liste den Editor
auseinanderzieht. Scrollt ab einer Hoehe, statt die Karte wachsen zu lassen. */
.fs-studio-reviewfields { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.125rem 1rem; max-height: 15rem; overflow-y: auto; }
.fs-studio-reviewfield, .fs-studio-reviewconfirm { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.75rem; color: var(--fs-text-primary); padding: 0.1875rem 0; }
.fs-studio-reviewconfirm { padding-top: 0.5rem; font-weight: 600; }
/* Editor + Beiwerk nebeneinander. Links steht der Inhalt des Schritts, rechts eine schmale Spalte mit
Vorschau, Einstellungen, Medien & Helfern und der Verwendung. Die rechte Spalte bleibt beim Scrollen
stehen — die linke ist lang, die rechte kurz. Unter 68rem faellt sie unter den Editor statt beide zu
quetschen. Die 22.5rem sind die Breite aus dem Entwurf (360px); breiter wuerde die Vorschau den Platz
nehmen, den die Formularfelder links brauchen. */
.fs-studio-split { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: clamp(1rem, 2.4vw, 2.2rem); align-items: start; }
.fs-studio-editor-col { display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; }
.fs-studio-edaside { position: sticky; top: 3.5rem; min-width: 0; display: flex; flex-direction: column; gap: 1.125rem; }
.fs-studio-preview-col { min-width: 0; }
@media (max-width: 68rem) {
.fs-studio-split { grid-template-columns: minmax(0, 1fr); }
.fs-studio-edaside { position: static; }
}
/* Karten der rechten Spalte sind schmaler bepolstert als die Inhaltskarten links — bei 22.5rem frisst die
Polsterung einer vollen Karte sonst ein Sechstel der Zeile. */
.fs-studio-sidecard { padding: 1rem 1.125rem; gap: 0.625rem; }
.fs-studio-sidenote { font-size: 0.65625rem; line-height: 1.55; color: var(--fs-text-secondary); }
/* „Intern" markiert, was der Klient nie sieht. Sie ersetzt die frueheren beschrifteten Ebenen: die trugen
dieselbe Aussage, kosteten dafuer aber die ganze Spaltenbreite. */
.fs-studio-inttag { margin-left: 0.4375rem; flex: none; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.125rem 0.375rem; border-radius: var(--fs-radius-sm, 0.125rem); background: rgba(80, 95, 118, 0.14); color: var(--fs-brand-secondary, #505f76); }
.dark .fs-studio-inttag { background: rgba(255, 255, 255, 0.08); color: var(--fs-text-primary); }
/* Eine ganze Karte, die intern ist (Call-Bogen), traegt die Marke oben rechts statt in einer Ueberschrift —
der Baustein bringt seine eigene mit. */
.fs-studio-edcard-int { position: relative; }
.fs-studio-edcard-int > .fs-studio-inttag { position: absolute; top: 1rem; right: 1.125rem; margin-left: 0; }
/* Medien & Helfer: schmale Klapp-Zeilen in EINER Karte statt vier Karten in voller Breite. Die meisten
Schritte tragen keinen einzigen Baustein — als eigene Karten standen sie trotzdem da und haben den Blick
vom Inhalt weggezogen. */
.fs-studio-mediacard { gap: 0; }
.fs-studio-mediacard > .fs-studio-edlabel { margin-bottom: 0.375rem; }
.fs-studio-mediarow + .fs-studio-mediarow { box-shadow: inset 0 1px 0 var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-mediarow + .fs-studio-mediarow { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.fs-studio-mediarow > .fs-studio-collapse-sum { padding: 0.5625rem 0; font-size: 0.75rem; font-weight: 600; }
.fs-studio-mediaic.material-symbols-outlined { flex: none; font-size: 1rem; line-height: 1; color: var(--fs-text-secondary); }
.fs-studio-mediabody { padding: 0 0 0.75rem 1.5rem; }
/* Die Baustein-Zeilen sind fuer volle Breite gebaut (Feld + zwei Knoepfe nebeneinander). In 22.5rem minus
Polsterung bleibt dafuer kein Platz: umbrechen lassen und das Eingabefeld die erste Zeile allein nehmen,
statt drei gequetschte Spalten. */
.fs-studio-mediabody .studio-checklist-row, .fs-studio-mediabody .studio-subtask-row,
.fs-studio-mediabody .studio-checklist > .flex, .fs-studio-mediabody .studio-subtask > .flex { flex-wrap: wrap; }
.fs-studio-mediabody .studio-checklist-row > .fs-input, .fs-studio-mediabody .studio-subtask-row > .fs-input,
.fs-studio-mediabody .studio-checklist > .flex > .fs-input, .fs-studio-mediabody .studio-subtask > .flex > .fs-input { flex: 1 0 100%; }
/* Ein zweispaltiges Bild-/Video-Raster ergibt hier zwei Spalten von je gut 8rem — unlesbar. Einspaltig. */
.fs-studio-mediabody .studio-guide-list, .fs-studio-mediabody .studio-video-list { grid-template-columns: minmax(0, 1fr); }
/* Formularfelder als klappbare Zeilen. Zugeklappt steht da, was man beim Ueberfliegen braucht — Name, Typ,
Zustand; der volle Editor kommt erst auf Klick. Vorher stand jedes Feld dauerhaft offen: acht Felder waren
eine Bildschirmseite Formular, in der das gesuchte Feld unauffindbar war.
Eine Zeile hat hier ausnahmsweise eine sichtbare Kante statt einer Flaechenabstufung: die Zeilen liegen
dicht gestapelt in einer Karte, und ohne Kante verschwimmen Griff, Name und Marken der Nachbarzeilen
ineinander. */
.fs-studio-fldhead { display: flex; align-items: baseline; gap: 0.625rem; }
.fs-studio-fldcount { margin-left: auto; font-size: 0.6875rem; color: var(--fs-text-secondary); font-variant-numeric: tabular-nums; }
.fs-studio-fldlist { display: flex; flex-direction: column; gap: 0.4375rem; margin: 0.75rem 0 0.625rem; }
.fs-studio-fld { border: 1px solid var(--fs-border, rgba(198, 198, 205, 0.45)); border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-card); }
.dark .fs-studio-fld { border-color: rgba(255, 255, 255, 0.09); }
.fs-studio-fld.is-dragging { opacity: 0.45; }
.fs-studio-fields.is-reordering { opacity: 0.6; pointer-events: none; }
.fs-studio-fld-sum { display: flex; align-items: center; gap: 0.125rem; }
.fs-studio-fld-grip.material-symbols-outlined { flex: none; font-size: 0.9375rem; line-height: 1; color: var(--fs-text-secondary); cursor: grab; padding: 0.6875rem 0.25rem 0.6875rem 0.5rem; }
.fs-studio-fld-grip.material-symbols-outlined:active { cursor: grabbing; }
.fs-studio-fld-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; border: 0; background: transparent; font: inherit; text-align: left; padding: 0.625rem 0.75rem 0.625rem 0.25rem; cursor: pointer; }
.fs-studio-fld-open:hover { background: var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-fld-open:hover { background: rgba(255, 255, 255, 0.04); }
.fs-studio-fld-open:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: -2px; }
.fs-studio-fld-name { flex: 0 1 auto; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--fs-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-studio-fld-badge { flex: none; font-size: 0.59375rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1875rem 0.4375rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-tertiary, #eceef0); color: var(--fs-text-secondary); }
.dark .fs-studio-fld-badge { background: rgba(255, 255, 255, 0.07); }
.fs-studio-fld-badge.is-soft { background: transparent; box-shadow: inset 0 0 0 1px var(--fs-border, rgba(198, 198, 205, 0.45)); }
.dark .fs-studio-fld-badge.is-soft { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.fs-studio-fld-caret.material-symbols-outlined { margin-left: auto; flex: none; font-size: 1.0625rem; line-height: 1; color: var(--fs-text-secondary); transition: transform 0.15s ease; }
.fs-studio-fld.is-open .fs-studio-fld-caret.material-symbols-outlined { transform: rotate(180deg); }
.fs-studio-fld-body { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.75rem 0.875rem 0.875rem; box-shadow: inset 0 1px 0 var(--fs-border, rgba(198, 198, 205, 0.45)); }
.dark .fs-studio-fld-body { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.fs-studio-fld-line { display: flex; align-items: center; gap: 0.5rem; }
.fs-studio-fld-nameinp { flex: 1; min-width: 0; font-weight: 600; }
.fs-studio-fld-del, .fs-studio-fld-optdel { flex: none; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--fs-text-secondary); cursor: pointer; padding: 0.25rem; border-radius: var(--fs-radius-sm, 0.125rem); }
.fs-studio-fld-del:hover, .fs-studio-fld-optdel:hover { color: var(--fs-error, #ba1a1a); }
.fs-studio-fld-del .material-symbols-outlined { font-size: 1rem; line-height: 1; }
.fs-studio-fld-optdel .material-symbols-outlined { font-size: 0.875rem; line-height: 1; }
.fs-studio-fld-sel { display: flex; align-items: center; gap: 0.5rem; font-size: 0.65625rem; color: var(--fs-text-secondary); }
.fs-studio-fld-sel > .fs-input { flex: 1; min-width: 0; }
.fs-studio-fld-opts, .fs-studio-fld-optlist { display: flex; flex-direction: column; gap: 0.375rem; }
.fs-studio-fld-optrow { display: flex; align-items: center; gap: 0.375rem; }
.fs-studio-fld-optrow > .studio-fields-f-opt-code { flex: none; width: 6.5rem; font-family: ui-monospace, Menlo, monospace; }
.fs-studio-fld-optrow > .studio-fields-f-opt-label { flex: 1; min-width: 0; }
.fs-studio-fld-optfoot { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.fs-studio-fld-optadd { border: 0; background: transparent; padding: 0; font: inherit; font-size: 0.71875rem; font-weight: 700; color: var(--fs-text-secondary); cursor: pointer; }
.fs-studio-fld-optadd:hover { color: var(--fs-text-primary); }
.fs-studio-fld-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; }
.fs-studio-fld-foot { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fs-studio-fld-req { display: flex; align-items: center; gap: 0.375rem; font-size: 0.71875rem; color: var(--fs-text-secondary); }
.fs-studio-fld-foot > .fs-button { margin-left: auto; }
.fs-studio-fld-fixed { display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; font-size: 0.65625rem; color: var(--fs-text-secondary); }
.fs-studio-fld-hint { font-size: 0.65625rem; line-height: 1.5; color: var(--fs-text-secondary); }
/* Die gestrichelte Flaeche ist im Entwurf der einzige Rahmen der Ansicht — sie sagt „hier waechst die Liste",
nicht „hier ist eine Grenze". Darum bleibt sie gestrichelt statt tonal. */
.fs-studio-fld-addbtn { width: 100%; border: 1px dashed var(--fs-border, rgba(198, 198, 205, 0.45)); background: transparent; color: var(--fs-text-secondary); padding: 0.625rem; font: inherit; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border-radius: var(--fs-radius-sm, 0.125rem); }
.fs-studio-fld-addbtn:hover { color: var(--fs-text-primary); }
.dark .fs-studio-fld-addbtn { border-color: rgba(255, 255, 255, 0.14); }
/* :not(.hidden), sonst schlaegt dieses display bei gleicher Spezifitaet Tailwinds .hidden — components.css
laedt nach tailwind.css, der Composer liesse sich nicht mehr schliessen. */
.fs-studio-fld-composer:not(.hidden) { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.625rem; }
.fs-studio-fld-composer .studio-field-list { display: flex; flex-direction: column; gap: 0.5rem; }
.fs-studio-fld-composer-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Verwendet in: Profilname plus Umfang. Die Zahlen sagen, wie weit eine Aenderung an diesem Schritt reicht. */
.fs-studio-uselist { display: flex; flex-direction: column; gap: 0.25rem; }
.fs-studio-userow { display: flex; flex-direction: column; gap: 0.0625rem; background: var(--fs-bg-tertiary, #eceef0); border-radius: var(--fs-radius-sm, 0.125rem); padding: 0.4375rem 0.5625rem; }
.dark .fs-studio-userow { background: rgba(255, 255, 255, 0.05); }
.fs-studio-username { font-size: 0.75rem; font-weight: 700; color: var(--fs-text-primary); }
.fs-studio-usemeta { font-size: 0.65625rem; color: var(--fs-text-secondary); }
/* Optionale Zusatz-Bausteine (Bilder, Videos, Upload-Checkliste, interne Aufgaben) sind klappbar: leer
zugeklappt, damit leere Formulare keinen Platz fressen; mit Inhalt oeffnet JS sie. Der Summary traegt den
Titel (die interne Ueberschrift des Bausteins wird darum ausgeblendet), plus ein Chevron als Klapp-Signal. */
/* display:block statt des geerbten .fs-studio-edcard-Flex: bei geschlossenem legte der column-gap
des Flex-Containers einen Abstand zwischen Summary und (verstecktem) Inhalt — sichtbar als „unten mehr
Platz als oben" im zugeklappten Balken. Als Block ist der Balken exakt der Summary, oben=unten. */
.fs-studio-collapse { display: block; }
.fs-studio-collapse > .fs-studio-collapse-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.125rem; font-size: 0.8125rem; font-weight: 600; color: var(--fs-text-primary); }
.fs-studio-collapse > .fs-studio-collapse-sum::-webkit-details-marker { display: none; }
.fs-studio-collapse > .fs-studio-collapse-sum::after { content: ""; margin-left: auto; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--fs-text-secondary); border-bottom: 2px solid var(--fs-text-secondary); transform: rotate(45deg); transition: transform 0.15s ease; }
.fs-studio-collapse[open] > .fs-studio-collapse-sum::after { transform: rotate(-135deg); }
.fs-studio-collapse > .fs-studio-collapse-sum:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: -2px; }
.fs-studio-collapse[open] > .fs-studio-collapse-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 1.125rem 1rem; }
/* Interne Ueberschrift des Bausteins ausblenden — der Summary ist jetzt der Titel. Der Hinweissatz darunter
bleibt: er erklaert, was der Baustein bewirkt, und das steht nirgends sonst. */
.fs-studio-mediabody > .studio-guide > p:first-child, .fs-studio-mediabody > .studio-video > p:first-child, .fs-studio-mediabody > .studio-checklist > p:first-child, .fs-studio-mediabody > .studio-subtask > p:first-child { display: none; }
/* Live-Vorschau: ein Geraeterahmen, der den Klienten-Screen andeutet (nicht das echte Endpoint — das rendert
gespeicherten, staff-eigenen State). Reine Anzeige, JS fuellt Titel/Beschreibung/Button/Checkliste live. */
.fs-studio-pv-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.fs-studio-pv-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fs-gold); box-shadow: 0 0 0 3px rgba(233, 193, 118, 0.18); }
.fs-studio-pv-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--fs-text-primary); }
.fs-studio-pv-seg { margin-left: auto; display: inline-flex; background: var(--fs-bg-tertiary, #eceef0); border-radius: var(--fs-radius-sm, 0.125rem); padding: 2px; }
.fs-studio-pv-tab { border: 0; background: transparent; font: inherit; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.25rem 0.5rem; border-radius: var(--fs-radius-sm, 0.125rem); color: var(--fs-text-secondary); cursor: pointer; }
.fs-studio-pv-tab.is-on { background: var(--fs-bg-card); color: var(--fs-text-primary); box-shadow: var(--fs-shadow-sm); }
.fs-studio-pv-device { background: var(--fs-bg-card); border-radius: 0.5rem; box-shadow: var(--fs-shadow-md); overflow: hidden; }
.fs-studio-pv-bar { height: 2rem; display: flex; align-items: center; gap: 0.375rem; padding: 0 0.75rem; background: var(--fs-bg-tertiary, #eceef0); }
.fs-studio-pv-bar i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--fs-bg-card); display: inline-block; }
.fs-studio-pv-url { margin-left: 0.375rem; font-size: 0.5625rem; color: var(--fs-text-secondary); background: var(--fs-bg-card); border-radius: 1rem; padding: 0.125rem 0.5rem; }
.fs-studio-pv-screen { padding: 1.25rem 1.125rem 1.375rem; background: var(--fs-bg-page, var(--fs-bg-secondary, #f7f9fb)); }
.dark .fs-studio-pv-screen { background: var(--fs-bg-secondary, #0f1626); }
.fs-studio-pv-phase { display: inline-flex; align-items: center; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-gold-deep); background: rgba(233, 193, 118, 0.16); border-radius: 1rem; padding: 0.25rem 0.625rem; }
.fs-studio-pv-h2 { font-family: var(--fs-font-serif, 'Noto Serif', serif); font-size: 1.375rem; line-height: 1.15; margin: 0.625rem 0 0.4375rem; color: var(--fs-text-primary); }
.fs-studio-pv-h2:empty::before { content: attr(data-empty); color: var(--fs-text-secondary); font-style: italic; }
.fs-studio-pv-desc { font-size: 0.8125rem; color: var(--fs-text-secondary); line-height: 1.55; white-space: pre-line; }
.fs-studio-pv-video { margin-top: 0.875rem; height: 7.5rem; border-radius: var(--fs-radius-sm, 0.125rem); background: linear-gradient(135deg, #1c2740, #2c3b5c); display: grid; place-items: center; }
.fs-studio-pv-play { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; }
.fs-studio-pv-play::after { content: ""; width: 0; height: 0; border-left: 0.65rem solid #fff; border-top: 0.42rem solid transparent; border-bottom: 0.42rem solid transparent; margin-left: 0.16rem; }
.fs-studio-pv-drop { margin-top: 0.875rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-card); box-shadow: inset 0 0 0 1.5px var(--fs-bg-tertiary, #eceef0); padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; text-align: center; }
.fs-studio-pv-dropic.material-symbols-outlined { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(233, 193, 118, 0.16); color: var(--fs-gold-deep); font-size: 1rem; margin-bottom: 0.25rem; }
.fs-studio-pv-dropt { font-size: 0.75rem; font-weight: 700; color: var(--fs-text-primary); }
.fs-studio-pv-droph { font-size: 0.625rem; color: var(--fs-text-secondary); }
.fs-studio-pv-cklist, .fs-studio-pv-review { margin-top: 0.75rem; background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); padding: 0.6875rem 0.75rem; box-shadow: var(--fs-shadow-sm); }
.fs-studio-pv-booking { margin-top: 0.875rem; display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; font-weight: 600; color: var(--fs-gold-deep); background: rgba(233, 193, 118, 0.16); border-radius: var(--fs-radius-sm, 0.125rem); padding: 0.75rem; }
.fs-studio-pv-bookingic.material-symbols-outlined { font-size: 1.05rem; line-height: 1; }
.fs-studio-pv-ckt { font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--fs-text-secondary); margin-bottom: 0.4375rem; }
.fs-studio-pv-ckitem { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.6875rem; color: var(--fs-text-primary); padding: 0.1875rem 0; }
.fs-studio-pv-ckitem::before { content: ""; width: 0.85rem; height: 0.85rem; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--fs-text-secondary); flex: none; margin-top: 0.05rem; }
.fs-studio-pv-fields { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4375rem; }
.fs-studio-pv-fieldrow { font-size: 0.6875rem; color: var(--fs-text-secondary); }
.fs-studio-pv-fieldrow span { display: block; font-weight: 700; color: var(--fs-text-primary); font-size: 0.6875rem; margin-bottom: 0.1875rem; }
/* Nur der blanke Text-Zeilen-Mock (direktes, klassenloses ) — Checkbox/Chip/Chevron sind ebenfalls ,
duerfen aber ihre eigenen Regeln behalten, sonst gewinnt diese generische Zeile per Spezifitaet. */
.fs-studio-pv-fieldrow > i:not([class]) { display: block; height: 1.75rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-card); box-shadow: inset 0 0 0 1px var(--fs-bg-tertiary, #eceef0); }
.fs-studio-pv-fieldrow.is-check { display: flex; align-items: center; gap: 0.5rem; }
.fs-studio-pv-fcheck { width: 0.95rem; height: 0.95rem; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--fs-text-secondary); background: var(--fs-bg-card); }
.fs-studio-pv-fchecklbl { display: block; font-weight: 700; color: var(--fs-text-primary); font-size: 0.6875rem; margin: 0; }
.fs-studio-pv-fdrop { display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; text-align: center; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-card); box-shadow: inset 0 0 0 1.5px var(--fs-bg-tertiary, #eceef0); padding: 0.6875rem; }
.fs-studio-pv-fdropic.material-symbols-outlined { width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(233, 193, 118, 0.16); color: var(--fs-gold-deep); font-size: 0.85rem; }
.fs-studio-pv-fdropt { font-size: 0.625rem; font-weight: 700; color: var(--fs-text-primary); }
.fs-studio-pv-fselect { display: flex; align-items: center; justify-content: space-between; height: 1.75rem; padding: 0 0.625rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-card); box-shadow: inset 0 0 0 1px var(--fs-bg-tertiary, #eceef0); }
.fs-studio-pv-fselect span { display: block; font-weight: 400; color: var(--fs-text-secondary); font-size: 0.625rem; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fs-studio-pv-fselect i { width: 0; height: 0; flex: none; border-left: 0.25rem solid transparent; border-right: 0.25rem solid transparent; border-top: 0.3rem solid var(--fs-text-secondary); border-radius: 0; background: none; box-shadow: none; }
.fs-studio-pv-fchips { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.fs-studio-pv-fchip { display: inline-flex; align-items: center; height: 1.25rem; min-width: 2rem; padding: 0 0.5rem; border-radius: 999px; font-size: 0.5625rem; font-weight: 700; color: var(--fs-text-secondary); background: var(--fs-bg-card); box-shadow: inset 0 0 0 1px var(--fs-bg-tertiary, #eceef0); }
.fs-studio-pv-fchip.has-text { color: var(--fs-text-primary); }
.fs-studio-pv-cta { margin-top: 1rem; width: 100%; background: var(--fs-brand-primary, #131b2e); color: var(--fs-on-brand-primary, #fff); border: 0; border-radius: var(--fs-radius-sm, 0.125rem); padding: 0.75rem; font: inherit; font-weight: 700; font-size: 0.8125rem; cursor: default; }
.fs-studio-pv-cta:empty { display: none; }
.fs-studio-pv-team { display: flex; flex-direction: column; gap: 0.75rem; }
.fs-studio-pv-teamlabel { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fs-brand-secondary, #505f76); }
.fs-studio-pv-tasks { display: flex; flex-direction: column; gap: 0.375rem; }
.fs-studio-pv-task { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; color: var(--fs-text-primary); background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); padding: 0.4375rem 0.5625rem; box-shadow: var(--fs-shadow-sm); }
.fs-studio-pv-task::before { content: ""; width: 0.85rem; height: 0.85rem; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--fs-text-secondary); flex: none; }
.fs-studio-pv-gate { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; font-weight: 600; color: var(--fs-brand-secondary, #505f76); background: rgba(80, 95, 118, 0.1); border-radius: var(--fs-radius-sm, 0.125rem); padding: 0.5rem 0.625rem; }
.fs-studio-pv-gateic.material-symbols-outlined { font-size: 0.95rem; line-height: 1; }
.fs-studio-pv-teamempty { font-size: 0.6875rem; color: var(--fs-text-secondary); font-style: italic; }
.fs-studio-pv-foot { font-size: 0.5625rem; color: var(--fs-text-secondary); text-align: center; margin-top: 0.625rem; line-height: 1.5; }
/* Die Baustein-Partials tragen ihre eigene Trennlinie und ihren eigenen Abstand nach oben — sie standen
frueher untereinander in einer Schublade. In einer Karte ist beides falsch: die Karte IST die
Trennung. Neutralisiert an einer Stelle statt in sechs Partials, die auch andernorts eingebunden sind. */
.fs-studio-edcard > .studio-links,
.fs-studio-edcard > .studio-guide,
.fs-studio-edcard > .studio-video,
.fs-studio-edcard > .studio-booking,
.fs-studio-edcard > .studio-checklist,
.fs-studio-edcard > .studio-subtask,
.fs-studio-edcard > .studio-callform,
.fs-studio-mediabody > .studio-guide,
.fs-studio-mediabody > .studio-video,
.fs-studio-mediabody > .studio-checklist,
.fs-studio-mediabody > .studio-subtask { border-top: 0; padding-top: 0; margin-top: 0; }
/* FUN-138 F2 — Zuweisungs-Ansicht. Karten oben, Grid-Zeilen darunter. Der Schreibpfad
(client-profile.php) bleibt unangetastet; hier aendert sich nur die Optik. .fs-studio-assign
teilt sich den Klassennamen mit dem Auto-Zuweisungs-Block im Editor — View-spezifisches
(max-width, Kartenmass) deshalb am Panel-ID, nicht an der Klasse. */
.fs-studio-assign { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
#studio-viewpanel-assign { max-width: 65rem; }
.fs-studio-assigncounts { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.fs-studio-assigncount { background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-sm); padding: 1rem 1.25rem; display: flex; flex-direction: column; min-width: 10.625rem; }
.fs-studio-assigncount-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.fs-studio-assigncount-name { font-size: 0.8125rem; font-weight: 700; color: var(--fs-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-studio-assigncount-def { flex: none; font-size: 0.53125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-text-secondary); background: var(--fs-bg-tertiary, #eceef0); padding: 0.125rem 0.375rem; border-radius: var(--fs-radius-sm, 0.125rem); }
.dark .fs-studio-assigncount-def { background: rgba(255, 255, 255, 0.1); }
.fs-studio-assigncount-n { font-family: var(--fs-font-serif, 'Noto Serif', serif); font-size: 1.5rem; line-height: 1.1; color: var(--fs-text-primary); font-variant-numeric: tabular-nums; margin-top: 0.5rem; }
.fs-studio-assigncount-label { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-text-secondary); margin-top: 0.125rem; }
.fs-studio-assignnote { font-size: 0.71875rem; line-height: 1.6; color: var(--fs-text-secondary); max-width: 38.75rem; }
.fs-studio-assignstatus { font-size: 0.6875rem; line-height: 1.5; color: var(--fs-text-secondary); }
/* Die Liste scrollt in sich, nicht die Seite: eine breite Zeile darf den Seitenrumpf nie
horizontal schieben (dann wandert die Seitennavigation aus dem Bild). */
.fs-studio-assignlist { overflow-x: auto; background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-sm); }
.fs-studio-assignhead,
.fs-studio-assignrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 11.875rem 8.125rem; gap: 1rem; align-items: center; padding: 0.875rem 1.25rem; min-width: 40rem; }
.fs-studio-assignhead { padding: 0.75rem 1.25rem; font-size: 0.59375rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-text-secondary); box-shadow: inset 0 -1px 0 var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-assignhead { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); }
.fs-studio-assignhead > :last-child { text-align: right; }
.fs-studio-assignrow { font-size: 0.84375rem; color: var(--fs-text-primary); }
.fs-studio-assignrow + .fs-studio-assignrow { box-shadow: inset 0 1px 0 var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-assignrow + .fs-studio-assignrow { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.fs-studio-assignrow:hover { background: var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-assignrow:hover { background: rgba(255, 255, 255, 0.04); }
/* Zellen bleiben Grid-Items. Alles, was Flex braucht, steckt in einem Kasten DARIN —
display:flex direkt auf der Zelle sprengt das Raster. */
.fs-studio-assign-client { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.fs-studio-assign-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-studio-assign-company,
.fs-studio-assign-mail { font-size: 0.6875rem; color: var(--fs-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-studio-assign-prog { display: flex; flex-direction: column; min-width: 0; }
.fs-studio-assign-pct { font-size: 0.6875rem; color: var(--fs-text-secondary); margin-bottom: 0.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-studio-assign-bar { display: block; height: 0.1875rem; background: var(--fs-bg-tertiary, #eceef0); overflow: hidden; }
.dark .fs-studio-assign-bar { background: rgba(255, 255, 255, 0.09); }
.fs-studio-assign-barfill { display: block; height: 100%; background: var(--fs-brand-secondary, #505f76); }
.fs-studio-assign-barfill.is-complete { background: var(--fs-gold); }
.fs-studio-assign-status { display: block; text-align: right; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-studio-assign-status.is-complete { color: var(--fs-text-primary); }
.fs-studio-assignlist .studio-assign-select { width: 100%; min-width: 0; }
@container studio (max-width: 980px) {
.fs-studio-assignhead,
.fs-studio-assignrow { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 10rem 5.625rem; gap: 0.625rem; }
}
/* Accordion-Reshape: der Editor lebt IM aufgeklappten (fs-studio-body) statt in der rechten
Inspector-Spalte. Sprach-Tabs (DE/EN) im Koerper. Phasen-Baender klappen zu, indem ihre Zeilen die
collapsed-Klasse tragen (die Zeilen bleiben im DOM — der Reorder liest sie weiter). Nur neue Klassen;
die bestehenden Zeilen-/Grip-/Dot-/Phasen-Regeln bleiben unangetastet. */
.fs-studio-body { padding: 0.25rem 0.75rem 0.85rem 2.15rem; display: flex; flex-direction: column; gap: 0.55rem; }
.fs-studio-body[hidden] { display: none !important; }
.fs-studio-langtabs { display: inline-flex; gap: 0.125rem; align-self: flex-start; background: var(--fs-bg-tertiary, #eceef0); padding: 0.125rem; border-radius: 0.1875rem; }
.dark .fs-studio-langtabs { background: rgba(255, 255, 255, 0.05); }
.fs-studio-langtab { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.16rem 0.7rem; border: 0; background: none; color: var(--fs-text-secondary); border-radius: 0.125rem; cursor: pointer; }
.fs-studio-langtab[aria-selected="true"] { background: var(--fs-bg-card); color: var(--fs-text-primary); }
.dark .fs-studio-langtab[aria-selected="true"] { background: rgba(255, 255, 255, 0.1); }
.fs-studio-langhint { padding-top: 0.1rem; }
.fs-studio-row-collapsed { display: none !important; }
.fs-studio-phase-head { cursor: pointer; }
.fs-studio-phase-chev { display: inline-block; width: 0.75rem; font-size: 0.6rem; color: var(--fs-text-secondary); transition: transform 0.15s ease; }
.fs-studio-phase-collapsed .fs-studio-phase-chev { transform: rotate(-90deg); }
/* Editor-: eigener Listeneintrag unter der Zeile, KEIN Flex-Drag-Row — so greift user-select:none der
Zeile nicht auf die Formularfelder, und der Reorder (:scope > li[data-order-key]) ignoriert es. */
.fs-studio-editor-li { display: block; list-style: none; margin: 0; padding: 0; }
.fs-studio-editor-li::before { content: none; }
/* Kennzahlen: die Zahlen, nach denen man beim Bauen eines Flows sucht. */
.fs-studio-stats { display: flex; flex-wrap: wrap; gap: 0; padding-bottom: 1.25rem; margin-bottom: 1.25rem; box-shadow: inset 0 -1px 0 0 var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-stats { box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.06); }
.fs-studio-stat { min-width: 5.25rem; padding-right: 1rem; }
.fs-studio-stat b { display: block; font-size: 1.375rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--fs-text-primary); }
.fs-studio-stat span { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-text-secondary); }
.fs-studio-stat.is-dim b { color: var(--fs-text-secondary); }
/* Werkzeugleiste ueber der Liste. Sie uebernimmt bei ungespeicherter Reihenfolge dieselbe Zeile — eine
zweite Leiste unter einer langen Liste steht ausserhalb des Bildes, genau das war der Ausloeser. */
/* Klebt oben im Scrollport. Nur EIN Element klebt, ohne Hoehenrechnung und ohne Flex-Verteilung — der
fruehere Versuch, die ganze Spalte auf eine berechnete Hoehe zu zwingen, hat die Leiste unter den
Fensterrand geschoben und Ueberschriften plattgequetscht. */
/* Die Leiste steht ohne eigene Kartenflaeche zwischen Kopf und Board — der Entwurf setzt hier nur den
Hinweistext und die zwei Aktionen, keine weisse Bank. Bei dirty Reihenfolge bekommt sie ihre Flaeche
zurueck, weil sie dann eine Meldung ist und auffallen soll. */
/* Die Leiste ist nur noch eine Meldung ueber die ungespeicherte Reihenfolge — ohne Meldung steht sie
gar nicht da. Vorher hielt sie eine leere Zeile Hoehe frei, in der nichts stand. */
.fs-studio-bar { display: none; position: sticky; top: 0; z-index: 6; align-items: center; gap: 0.5rem; padding: 0.375rem 0.125rem; background: transparent; border-radius: var(--fs-radius-sm, 0.125rem); }
.fs-studio-bar.is-dirty { display: flex; }
.fs-studio-bar.is-dirty { background: var(--fs-bg-card); box-shadow: var(--fs-shadow-md); padding: 0.5rem 0.75rem; }
.fs-studio-bar-count { flex: 1; min-width: 0; font-size: 0.75rem; font-weight: 700; color: var(--fs-text-primary); display: none; }
.fs-studio-bar #studio-order-save, .fs-studio-bar #studio-order-reset { display: none; }
.fs-studio-bar.is-dirty { box-shadow: inset 2px 0 0 0 var(--fs-brand-secondary, #505f76), var(--fs-shadow-sm); }
.dark .fs-studio-bar.is-dirty { box-shadow: inset 2px 0 0 0 var(--fs-text-primary), var(--fs-shadow-sm); }
/* Profil-Leiste: das Label darf NICHT wie der Order-Hint auf flex:1 wachsen, sonst kollabiert es auf
min-width:0 und der 100%-breite fs-input-Select ueberlappt den Text. Label natuerlich breit, Select waechst. */
#studio-profile-bar { flex-wrap: wrap; }
#studio-profile-select { width: auto; flex: 1 1 auto; min-width: 12rem; }
@media (max-width: 500px) { #studio-profile-select { min-width: 0; flex-basis: 100%; } }
.fs-studio-bar.is-dirty .fs-studio-bar-count, .fs-studio-bar.is-dirty #studio-order-save, .fs-studio-bar.is-dirty #studio-order-reset { display: block; }
.fs-studio-blocknote { font-size: 0.6875rem; color: var(--fs-text-secondary); padding: 0 0.75rem; }
/* KEIN overflow:hidden hier: ein overflow-Vorfahre wird zum Scroll-Container fuer position:sticky, und
der Phasenkopf klebte dann sofort an der Listenoberkante statt am Scrollport — er legte sich ueber die
erste Zeile. Die 2px-Ecken sind den Preis nicht wert. */
/* FUN-138 B4: Kopfbereich nach der Vorlage. Masse sind am Entwurf gemessen, nicht geschaetzt:
Titel Noto Serif 34/37.4, Kennzahl-Ziffer Noto Serif 22, Label Manrope 9.5 mit 1.52px Sperrung.
Farben und Fonts kommen aus den --fs-*-Tokens; die Palette des Entwurfs ist ohnehin dieselbe. */
.fs-studio-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
/* Kopf und Inhalt sind zwei getrennte .page-shell-Bloecke. Deren vertikales Seiten-Padding stapelt sich
zwischen Statistik-Zeile und Tab-Leiste (Kopf-padding-bottom + Kopf-margin + Root-padding-top ~4,5rem).
Dazu zaehlt space-y-6 die per .hidden-KLASSE (nicht [hidden]-Attribut) ausgeblendete Zustimmungs-Karte
weiter als DOM-Kind und legt der Tab-Leiste ein Phantom-margin-top auf. Zusammen die „enorme Luecke".
Hier gezielt aufgeloest, ohne die globale .page-shell anzufassen. */
.fs-studio-head { padding-bottom: 0; }
#onboarding-studio-root { padding-top: 0; }
#studio-ack-gate.hidden + * { margin-top: 0 !important; }
.fs-studio-head-left { min-width: 0; }
.fs-studio-kicker { font-size: 0.59375rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-text-secondary); margin-bottom: 0.375rem; }
.fs-studio-title { font-family: var(--fs-font-serif); font-size: 2.125rem; font-weight: 400; line-height: 1.1; color: var(--fs-text-primary); }
/* Das zweite Wort kursiv — der Entwurf setzt den Namen so ab, ohne eine zweite Schriftgroesse. */
.fs-studio-title em { font-style: italic; }
.fs-studio-metrics { display: flex; align-items: flex-end; gap: 1.75rem; flex-wrap: wrap; }
.fs-studio-metric { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; }
.fs-studio-metric b { font-family: var(--fs-font-serif); font-size: 1.375rem; font-weight: 400; line-height: 1.2; color: var(--fs-text-primary); }
.fs-studio-metric span { font-size: 0.59375rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-text-secondary); white-space: nowrap; }
/* FUN-138 E1: Ansichts-Umschaltung + Bibliotheks-Ansicht (Karten-Grid mit Inspector). */
.fs-studio-viewtabs { display: flex; gap: 0.25rem; }
.fs-studio-viewtabs { margin-bottom: 0.25rem; }
.fs-studio-viewtab { padding: 0.4375rem 0.875rem; border-radius: var(--fs-radius-sm, 0.125rem); background: transparent; color: var(--fs-text-secondary); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.fs-studio-viewtab:hover { background: var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-viewtab:hover { background: rgba(255, 255, 255, 0.07); }
.fs-studio-viewtab[aria-selected="true"] { background: var(--fs-brand-primary, #131b2e); color: var(--fs-on-brand-primary, #fff); }
.dark .fs-studio-viewtab[aria-selected="true"] { background: rgba(255, 255, 255, 0.16); color: var(--fs-text-primary); }
.fs-studio-viewtab:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
.fs-studio-libview { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.fs-studio-libbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fs-studio-libsearch { display: flex; align-items: center; gap: 0.375rem; flex: 0 1 18rem; background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-sm); padding: 0 0.5rem; }
.fs-studio-libsearch .material-symbols-outlined { font-size: 1rem; color: var(--fs-text-secondary); opacity: 0.7; }
.fs-studio-libsearch input { border: 0; background: transparent; box-shadow: none; font-size: 0.75rem; padding: 0.4375rem 0; width: 100%; }
.fs-studio-libfilters { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.fs-studio-libfilter { padding: 0.3125rem 0.625rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-card); box-shadow: var(--fs-shadow-sm); color: var(--fs-text-secondary); font-size: 0.6875rem; cursor: pointer; }
.fs-studio-libfilter[aria-pressed="true"] { background: var(--fs-brand-primary, #131b2e); color: var(--fs-on-brand-primary, #fff); }
.dark .fs-studio-libfilter[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); color: var(--fs-text-primary); }
.fs-studio-libfilter:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
/* Anlage-Composer. Die Oberkante in Akzentfarbe markiert ihn als das eine Feld, das gerade etwas von dir
will — er erscheint nur auf Klick und verschwindet wieder. */
/* :not(.hidden) ist Pflicht, nicht Zierde: components.css laedt NACH tailwind.css, und `display:flex`
haette bei gleicher Spezifitaet dessen `.hidden{display:none}` geschlagen — der Composer stuende dann
dauerhaft offen und liesse sich weder ueber Abbrechen noch ueber den Umschalter zumachen (das JS
schaltet nur diese Klasse). */
.fs-studio-addcomposer { padding: 1.25rem; border-top: 2px solid var(--fs-brand-accent, #e9c176); }
.fs-studio-addcomposer:not(.hidden) { display: flex; flex-direction: column; gap: 0.625rem; }
.fs-studio-addtitle { font-family: var(--fs-font-serif, Georgia, serif); font-size: 1.0625rem; color: var(--fs-text-primary); }
.fs-studio-typepick { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.fs-studio-typechip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.75rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-tertiary, #eceef0); color: var(--fs-text-secondary); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.dark .fs-studio-typechip { background: rgba(255, 255, 255, 0.05); }
.fs-studio-typechip .material-symbols-outlined { font-size: 0.9375rem; line-height: 1; }
.fs-studio-typechip[aria-pressed="true"] { background: var(--fs-brand-primary, #131b2e); color: var(--fs-on-brand-primary, #fff); }
.dark .fs-studio-typechip[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); color: var(--fs-text-primary); }
.fs-studio-typechip:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
.fs-studio-libsplit { display: flex; align-items: flex-start; gap: 1.75rem; min-width: 0; }
.fs-studio-libgrid { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); gap: 0.875rem; }
/* Die Karte fuellt ihre Rasterzelle, damit die Trennlinie ueber der Nutzungszeile in einer Reihe auf
einer Hoehe steht — der Knopf allein waere inhaltshoch, und ein zweizeiliger Titel in EINER Karte
liesse die Nachbarn kuerzer stehen. */
.fs-studio-libcard { min-width: 0; display: flex; }
.fs-studio-libcard .fs-studio-libcard-btn { flex: 1 1 auto; }
/* Die Karte traegt eine 2px-Oberkante, die im Ruhezustand durchsichtig ist. Sie steht auch dann da, weil
ein erst bei Auswahl eingeblendeter Rahmen die Karte um seine Hoehe verschoebe — das ganze Raster
zuckte bei jedem Klick. */
.fs-studio-libcard-btn { display: flex; flex-direction: column; width: 100%; text-align: left; padding: 1.125rem; background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); border-top: 2px solid transparent; box-shadow: var(--fs-shadow-md); cursor: pointer; transition: transform 0.12s ease; }
.fs-studio-libcard-btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .fs-studio-libcard-btn { transition: none; } .fs-studio-libcard-btn:hover { transform: none; } }
/* Auswahl ueber Flaechenabstufung plus eine ruhige Kante — Gold bleibt Erfolgsmomenten vorbehalten. */
.fs-studio-libcard-btn[aria-pressed="true"] { background: var(--fs-bg-tertiary, #eceef0); border-top-color: var(--fs-brand-secondary, #505f76); }
.dark .fs-studio-libcard-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.09); }
.fs-studio-libcard-btn:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
.fs-studio-libcard-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; }
/* Das Zeichen sitzt in einer Kachel statt frei in der Zeile: im Raster aus vielen gleich gebauten Karten
ist die Kachel der Ankerpunkt, an dem das Auge den Typ zuerst findet. */
.fs-studio-libcard-icon { flex: none; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; font-size: 1.125rem; line-height: 1; background: var(--fs-bg-tertiary, #eceef0); color: var(--fs-text-primary); }
.dark .fs-studio-libcard-icon { background: rgba(255, 255, 255, 0.06); }
.fs-studio-libcard-type { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-text-secondary); }
.fs-studio-libcard-own { margin-left: auto; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-text-secondary); background: var(--fs-bg-tertiary, #eceef0); border-radius: var(--fs-radius-sm, 0.125rem); padding: 0.1875rem 0.375rem; }
.dark .fs-studio-libcard-own { background: rgba(255, 255, 255, 0.1); }
/* min-height an Titel und Markenzeile: ohne sie steht die Trennlinie ueber der Nutzungszeile in jeder
Karte auf einer anderen Hoehe, und das Raster franst optisch aus. */
.fs-studio-libcard-title { font-size: 0.90625rem; font-weight: 700; line-height: 1.35; color: var(--fs-text-primary); margin-bottom: 0.75rem; min-height: 2.375rem; }
.fs-studio-libcard-marks { display: flex; gap: 0.3125rem; flex-wrap: wrap; margin-bottom: 0.75rem; min-height: 1.25rem; }
.fs-studio-libcard-usage { margin-top: auto; padding-top: 0.625rem; border-top: 1px solid var(--fs-bg-tertiary, #eceef0); font-size: 0.6875rem; color: var(--fs-text-secondary); }
.dark .fs-studio-libcard-usage { border-top-color: rgba(255, 255, 255, 0.08); }
/* Die Inspektor-Spalte laeuft beim Blaettern durchs Raster mit: die Auswahl steht oben, das Raster ist
lang, und ohne sticky waere die Karte, die man gerade beurteilt, aus dem Bild gescrollt. */
.fs-studio-libinspector { background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-md); padding: 1.625rem; display: flex; flex-direction: column; }
.fs-studio-libinspector-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.fs-studio-libinspector-tile { flex: none; display: grid; place-items: center; width: 2.625rem; height: 2.625rem; background: var(--fs-brand-primary, #131b2e); color: var(--fs-brand-accent, #e9c176); }
.fs-studio-libinspector-tile .material-symbols-outlined { font-size: 1.3125rem; line-height: 1; }
.fs-studio-libinspector-headtxt { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.fs-studio-libinspector-type { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-text-secondary); }
.fs-studio-libinspector-title { font-family: var(--fs-font-serif, Georgia, serif); font-size: 1.1875rem; line-height: 1.2; color: var(--fs-text-primary); }
.fs-studio-libinspector-desc { font-family: var(--fs-font-serif, Georgia, serif); font-size: 0.8125rem; line-height: 1.65; color: var(--fs-text-secondary); margin-bottom: 1.25rem; }
.fs-studio-libinspector-label { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-text-secondary); opacity: 0.85; margin-bottom: 0.625rem; }
.fs-studio-libinspector-blocks { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.375rem; }
.fs-studio-libinspector-block { display: flex; align-items: center; gap: 0.625rem; font-size: 0.78125rem; color: var(--fs-text-secondary); opacity: 0.55; }
.fs-studio-libinspector-block.is-on { color: var(--fs-text-primary); opacity: 1; font-weight: 600; }
.fs-studio-libinspector-block .material-symbols-outlined { font-size: 1.0625rem; line-height: 1; }
.fs-studio-libinspector-usage { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1.5rem; }
.fs-studio-libinspector-usage li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0.625rem; background: var(--fs-bg-secondary, #f2f4f6); font-size: 0.78125rem; color: var(--fs-text-primary); }
.dark .fs-studio-libinspector-usage li { background: rgba(255, 255, 255, 0.04); }
.fs-studio-libinspector-usename { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-studio-libinspector-usemeta { flex: none; font-size: 0.6875rem; color: var(--fs-text-secondary); }
.fs-studio-libinspector-usage li.is-empty { display: block; background: transparent; padding: 0; color: var(--fs-text-secondary); }
/* Bearbeiten nimmt die Breite, Duplizieren nur seinen Text: die beiden sind keine gleichwertigen
Geschwister — das eine ist der Weg, das andere eine Nebentuer. */
.fs-studio-libinspector-actions { display: flex; gap: 0.625rem; margin-top: auto; }
.fs-studio-libinspector-actions .fs-button { flex: none; padding: 0.75rem 0.875rem; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.fs-studio-libinspector-actions .fs-button-primary { flex: 1; }
/* Duplizieren ist global eine Textschaltflaeche. Neben einer gefuellten Hauptschaltflaeche schwebt sie
ohne Koerper — hier bekommt sie eine eigene Flaeche (tonal, keine Linie), damit die beiden als Paar
lesbar sind. Bewusst nur an dieser Stelle, die globale Komponente bleibt wie sie ist. */
.fs-studio-libinspector-actions .fs-button-secondary { background: var(--fs-bg-tertiary, #eceef0); color: var(--fs-text-secondary); text-decoration: none; }
.dark .fs-studio-libinspector-actions .fs-button-secondary { background: rgba(255, 255, 255, 0.06); }
.fs-studio-libinspector-actions .fs-button-secondary:hover:not(:disabled) { color: var(--fs-text-primary); }
/* Der Merksatz steht ausserhalb der Karte: er gilt der Bibliothek als Ganzes, nicht dem ausgewaehlten
Schritt — in der Karte gelesen wirkte er wie eine Aussage ueber diesen einen. */
.fs-studio-libhint { padding: 0 0.25rem; font-size: 0.71875rem; line-height: 1.6; color: var(--fs-text-secondary); opacity: 0.85; }
/* Die Breite haengt an der Spalte, nicht an ihren Kindern: in einer Spalten-Flexbox setzt flex-basis die
HOEHE, ein 20.625rem am Inspektor haette ihn also auf eine feste Hoehe gezwungen statt auf eine Breite. */
.fs-studio-libaside { flex: 0 0 20.625rem; min-width: 0; align-self: flex-start; position: sticky; top: 4rem; display: flex; flex-direction: column; gap: 0.875rem; }
.fs-studio-libnone { font-size: 0.75rem; color: var(--fs-text-secondary); }
@media (max-width: 1100px) {
/* align-items zurueck auf stretch: nebeneinander haelt flex-start die Inspektor-Spalte oben, gestapelt
zoege dasselbe flex-start Raster und Spalte auf ihre Inhaltsbreite zusammen — das Raster fiele auf
eine einzige Kartenspalte, obwohl die volle Breite da ist. */
.fs-studio-libsplit { flex-direction: column; align-items: stretch; gap: 0.875rem; }
.fs-studio-libaside { flex: 0 0 auto; width: 100%; position: static; }
/* Ueber die volle Seitenbreite wuerde "Bearbeiten" zu einem Balken. Der Knopf ist eine Handlung,
keine Bank — die Zeile bekommt eine Obergrenze statt die Breite der Karte. */
.fs-studio-libinspector-actions { max-width: 22rem; }
}
/* FUN-138 B3: Builder und Bibliothek nebeneinander. Die Spalte klappt unter die Liste, sobald der Platz
nicht reicht — nebeneinander gequetscht waere die Zeile schmaler als ihre eigene Bedienleiste. */
/* Calendly-Verbindung: org-weite Einrichtung, nicht Teil des Flows. Der Entwurf hat dafuer keinen Platz
vorgesehen — sie bleibt erreichbar, tritt aber als schmale Zeile auf statt als weisse Bank ueber dem
ganzen Board. Wegnehmen waere kein Nachbau, sondern Verlust. */
/* Schmale Zeile, keine Bank: die Verbindung ist eine Randnotiz der Einrichtung, kein Aufruf. Sie steht
ueberhaupt nur da, wenn die Org verbunden ist oder einen Termin-Schritt hat. */
.fs-studio-calendly { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.25rem 0; margin-bottom: 0.75rem; }
.fs-studio-calendly-icon { flex: none; font-size: 1rem; line-height: 1; color: var(--fs-text-secondary); opacity: 0.8; }
.fs-studio-calendly-text { flex: 1 1 auto; min-width: 0; font-size: 0.6875rem; color: var(--fs-text-secondary); margin: 0; }
.fs-studio-calendly-text.is-warn { color: var(--fs-warning, #b45309); }
.fs-studio-calendly-act { flex: none; background: transparent; font-size: 0.6875rem; font-weight: 600; color: var(--fs-text-primary); cursor: pointer; border-bottom: 1px solid var(--fs-bg-tertiary, #eceef0); padding-bottom: 1px; }
.fs-studio-calendly-act:hover { border-bottom-color: currentColor; }
/* Der Profil-Balken traegt nur noch das sr-only-Select und die Composer — er hat keine eigene Flaeche
mehr, sonst stuende ein leerer weisser Streifen ueber dem Board. */
.fs-studio-profilebar { display: contents; }
/* Umbenennen/Loeschen sitzen AN der offenen Karte. Sie ueberlagern deren rechte Ecke; die Karte selbst
ist ein Button, ein Button darin waere ungueltiges HTML — deshalb liegen sie als Geschwister darueber. */
.fs-studio-profiles-list > li { position: relative; }
.fs-studio-profilecard-acts { position: absolute; top: 0.375rem; right: 0.375rem; display: flex; gap: 0.125rem; }
.fs-studio-profileact { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--fs-radius-sm, 0.125rem); background: transparent; color: var(--fs-text-secondary); cursor: pointer; }
.fs-studio-profileact .material-symbols-outlined { font-size: 0.9375rem; line-height: 1; }
.fs-studio-profileact:hover:not([disabled]) { background: var(--fs-bg-tertiary, #eceef0); color: var(--fs-text-primary); }
.dark .fs-studio-profileact:hover:not([disabled]) { background: rgba(255, 255, 255, 0.08); }
.fs-studio-profileact[disabled] { opacity: 0.4; cursor: default; }
/* FUN-306: der Stern steht an jeder Nicht-Standard-Karte, wird aber erst bei Hover/Fokus der Karte sichtbar,
damit er die ruhige Liste nicht mit Icons zupflastert. Tastatur-Fokus (:focus-within) blendet ihn ebenso ein.
Bewusst KEINE sichtbare Tooltip-Blase: die native title-Blase war der eigentliche Mangel (sie fiel ueber
Titel und Kennzahlen), und eine eigene Blase in der schmalen Spalte deckte die Metazeile ab oder ragte aus
der Karte. Die Bedeutung des Sterns nennt der Bestaetigungsdialog, aria-label traegt sie fuer Screenreader. */
.fs-studio-profileact-star { opacity: 0; transition: opacity 0.12s ease; }
.fs-studio-profiles-list > li:hover .fs-studio-profileact-star,
.fs-studio-profiles-list > li:focus-within .fs-studio-profileact-star { opacity: 1; }
/* Kopfzeile der Flow-Spalte, wie im Entwurf: Profilname gross, Kennzahlen daneben, Revision rechts. */
.fs-studio-flowcol { flex: 1 1 auto; min-width: 0; }
.fs-studio-flowhead { display: flex; align-items: baseline; gap: 0.875rem; flex-wrap: wrap; margin-bottom: 0.375rem; }
.fs-studio-flowtitle { font-family: var(--fs-font-serif); font-size: 1.625rem; font-weight: 400; color: var(--fs-text-primary); line-height: 1.2; }
.fs-studio-flowrev { margin-left: auto; font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-text-secondary); opacity: 0.8; }
.fs-studio-flowhint { font-size: 0.6875rem; color: var(--fs-text-secondary); margin: 0 0 0.25rem; }
/* FUN-138 B4: Profil-Spalte links vom Builder, wie im Entwurf. Sie ersetzt das Auswahlfeld als
sichtbare Bedienung; das Feld selbst bleibt als Zustandstraeger sr-only bestehen. */
.fs-studio-profiles { flex: 0 0 15.625rem; align-self: stretch; }
.fs-studio-profiles-title { font-size: 0.59375rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-text-secondary); margin-bottom: 0.5rem; }
.fs-studio-profiles-list { display: flex; flex-direction: column; gap: 0.5rem; }
/* FUN-306: rechts Platz fuer die Aktions-Icons reservieren, damit ein langer Profilname davor kuerzt
(ellipsis) statt unter den Stern zu laufen. Ein Stern (jede Karte) braucht ~2rem; die offene Karte
traegt zusaetzlich Stift und Papierkorb und deckt daher breiter ab. */
.fs-studio-profilecard { display: flex; flex-direction: column; gap: 0.1875rem; width: 100%; text-align: left; padding: 0.625rem 2rem 0.625rem 0.75rem; background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-md); cursor: pointer; }
.fs-studio-profilecard[aria-pressed="true"] { padding-right: 5.25rem; }
/* Inline-Umbenennen: die Karte weicht dem Editierfeld, das dieselbe Box fuellt (gleiches Padding/Flaeche).
So bleibt das Umbenennen IN der Profil-Box statt als loses Formular darunter. */
/* Toggle ueber die is-renaming-Klasse, NICHT das hidden-Attribut: [hidden]{display:none!important} (global)
wuerde ein display:flex hier schlagen — die Karte verschwaende beim Edit, ohne dass die Form erscheint. */
.fs-studio-profileedit { display: none; flex-direction: column; gap: 0.5rem; padding: 0.625rem 0.75rem; background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-md); }
.fs-studio-profileedit-acts { display: flex; gap: 0.375rem; }
.fs-studio-profiles-list > li.is-renaming .fs-studio-profileedit { display: flex; }
.fs-studio-profiles-list > li.is-renaming .fs-studio-profilecard,
.fs-studio-profiles-list > li.is-renaming .fs-studio-profilecard-acts { display: none; }
/* Auswahl ueber eine linke Kante plus Flaeche — Gold bleibt Erfolgsmomenten vorbehalten. */
.fs-studio-profilecard[aria-pressed="true"] { box-shadow: var(--fs-shadow-lg), inset 3px 0 0 0 var(--fs-brand-primary, #131b2e); }
.dark .fs-studio-profilecard[aria-pressed="true"] { box-shadow: var(--fs-shadow-lg), inset 3px 0 0 0 var(--fs-text-primary); }
.fs-studio-profilecard:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
.fs-studio-profilecard-head { display: flex; align-items: center; gap: 0.375rem; }
.fs-studio-profilecard-name { font-size: 0.84375rem; font-weight: 700; color: var(--fs-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-studio-profilecard-def { flex: none; font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fs-text-secondary); background: var(--fs-bg-tertiary, #eceef0); border-radius: var(--fs-radius-sm, 0.125rem); padding: 0.0625rem 0.25rem; }
.dark .fs-studio-profilecard-def { background: rgba(255, 255, 255, 0.1); }
.fs-studio-profilecard-meta { font-size: 0.625rem; color: var(--fs-text-secondary); }
.fs-studio-profilenew { width: 100%; margin-top: 0.75rem; padding: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; border-radius: var(--fs-radius-sm, 0.125rem); background: transparent; box-shadow: inset 0 0 0 1px var(--fs-bg-tertiary, #eceef0); color: var(--fs-text-secondary); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.fs-studio-profilenew .material-symbols-outlined { font-size: 1rem; line-height: 1; }
.fs-studio-profilenew:hover { background: var(--fs-bg-tertiary, #eceef0); color: var(--fs-text-primary); }
.dark .fs-studio-profilenew { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.fs-studio-profiles-title { display: flex; align-items: center; gap: 0.25rem; }
/* Hilfe-Icon statt Dauer-Absatz: die Erklaerung wird einmal gebraucht, nicht bei jedem Blick. */
.fs-studio-help { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; background: transparent; color: var(--fs-text-secondary); opacity: 0.6; cursor: help; }
.fs-studio-help:hover, .fs-studio-help:focus-visible { opacity: 1; }
.fs-studio-help .material-symbols-outlined { font-size: 0.875rem; line-height: 1; }
/* Eigene Tooltip-Blase statt des nativen title: das native Tooltip kam verzögert, mal gar nicht und
ließ sich nicht positionieren. Text kommt aus aria-label, damit Screenreader dieselbe Erklärung hören. */
.fs-studio-help::after { content: attr(aria-label); position: absolute; top: calc(100% + 0.375rem); left: 0; z-index: 30; width: max-content; max-width: 15rem; padding: 0.4375rem 0.5rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-text-primary); color: var(--fs-bg-card); font-size: 0.625rem; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-transform: none; text-align: left; white-space: normal; box-shadow: var(--fs-shadow-md); opacity: 0; visibility: hidden; transition: opacity 0.12s ease; pointer-events: none; }
.fs-studio-help:hover::after, .fs-studio-help:focus-visible::after { opacity: 1; visibility: visible; }
/* Wie die Vorlage: das Studio bei ~1440px deckeln und zentrieren. Ohne Deckel streckt sich die Flow-Liste
auf breiten Monitoren randlos, die Zeilen-Steuerung driftet weit nach rechts und in jeder Zeile klafft
eine grosse Luecke zwischen Titel und Bedienung.
container-name studio: Umbrueche gelten fuer die Studio-Flaeche, nicht das Viewport. Der Entwurf
knickt bei 1220/980 — das ist ein vollflaechiger Prototyp ohne Org-Leiste. Hier bleibt neben der
Leiste bei 1440 Viewport nur ~1136px, 1220 wuerde die drei Spalten auf jedem Laptop schon legen.
Deshalb: flex-wrap teilt von selbst (Flow hat 28rem Minimum), Marken weg unter 1100, eine Spalte
unter 840. */
#onboarding-studio-root { max-width: 90rem; margin-inline: auto; container-type: inline-size; container-name: studio; }
.fs-studio-canvas { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1.75rem; min-width: 0; }
.fs-studio-canvas > .fs-studio-flowcol { flex: 1 1 28rem; min-width: 0; }
.fs-studio-library { flex: 0 0 18.125rem; align-self: flex-start; position: sticky; top: 4rem; background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-sm); padding: 1.25rem; }
.fs-studio-library-title { width: 100%; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--fs-text-primary); background: transparent; cursor: pointer; text-align: left; }
/* Horizontaler Indikator: die Bibliothek klappt seitlich, nicht vertikal. Offen zeigt der Pfeil nach rechts
(„zur Kante einklappen"), zugeklappt nach links („herausziehen") — nicht nach unten. */
.fs-studio-library-chev { margin-left: auto; opacity: 0.6; transform: rotate(-90deg); transition: transform 0.15s ease; }
/* Zugeklappt schrumpft die Bibliothek horizontal zu einer schmalen Leiste am rechten Rand — der Flow
bekommt die Breite, nicht nur die Höhe. Der Titel weicht dem Symbol, der Pfeil zeigt nach links („aufklappen"). */
.fs-studio-library.is-collapsed { flex: 0 0 auto; align-self: flex-start; position: sticky; top: 4rem; padding: 0.625rem 0.375rem; }
.fs-studio-library.is-collapsed .fs-studio-library-title { flex-direction: column; gap: 0.5rem; }
.fs-studio-library.is-collapsed #studio-library-title { display: none; }
.fs-studio-library.is-collapsed .fs-studio-library-chev { margin-left: 0; transform: rotate(90deg); }
.fs-studio-library.is-collapsed .fs-studio-library-body { display: none; }
.fs-studio-library-body { display: flex; flex-direction: column; }
.fs-studio-library-new { margin-top: 0.5rem; padding: 0.4375rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-brand-primary, #131b2e); color: var(--fs-on-brand-primary, #fff); font-size: 0.6875rem; font-weight: 600; cursor: pointer; }
.fs-studio-library-new:hover { opacity: 0.92; }
.fs-studio-library-new .material-symbols-outlined { font-size: 1rem; line-height: 1; }
.fs-studio-library-title .material-symbols-outlined { flex: none; font-size: 1.0625rem; line-height: 1; }
.fs-studio-library-hint { font-size: 0.6875rem; color: var(--fs-text-secondary); margin-top: 0.125rem; }
.fs-studio-library-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.375rem; }
.fs-studio-library-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0.625rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-secondary, #f2f4f6); cursor: pointer; }
.fs-studio-library-item:hover { background: var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-library-item { background: rgba(255, 255, 255, 0.04); }
.dark .fs-studio-library-item:hover { background: rgba(255, 255, 255, 0.08); }
.fs-studio-library-icon { flex: none; font-size: 1rem; line-height: 1; color: var(--fs-text-secondary); opacity: 0.75; }
.fs-studio-library-name { flex: 1 1 auto; min-width: 0; font-size: 0.75rem; color: var(--fs-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-studio-library-phase { flex: none; font-size: 0.59375rem; font-weight: 700; letter-spacing: 0.08em; color: var(--fs-text-secondary); opacity: 0.8; font-variant-numeric: tabular-nums; }
.fs-studio-library-add { flex: none; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--fs-radius-sm, 0.125rem); background: transparent; color: var(--fs-text-secondary); cursor: pointer; }
.fs-studio-library-add .material-symbols-outlined { font-size: 1rem; line-height: 1; }
.fs-studio-library-add:hover { background: var(--fs-brand-primary, #131b2e); color: var(--fs-on-brand-primary, #fff); }
.fs-studio-library-add:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
.fs-studio-library-add[disabled] { opacity: 0.4; cursor: default; }
.fs-studio-library-empty { font-size: 0.6875rem; color: var(--fs-text-secondary); margin-top: 0.5rem; }
/* Leere Phase: der Kopf bleibt stehen, damit die Phase im Builder auffindbar bleibt — ohne ihn
verschwindet eine Phase ohne Schritte spurlos. Kein Drop-Ziel: Ziehen aendert hier nie die Phase. */
.fs-studio-phase-empty { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fs-text-secondary); opacity: 0.7; }
/* 1100: Bausteine-Marken weg (Zeile wird eng, sobald die Bibliothek unter den Flow rutscht).
840: eine Spalte, Rail zuerst. Dazwischen bleibt Rail neben dem Flow, die Bibliothek darunter —
flex-wrap erledigt das ohne extra Query, weil die Flow-Spalte 28rem Minimum hat. */
@container studio (max-width: 1100px) {
.fs-studio-profiles { flex: 0 0 13.75rem; }
.fs-studio-library, .fs-studio-library.is-collapsed { flex: 1 1 100%; width: 100%; position: static; }
.fs-studio-row .fs-studio-marks { display: none; }
}
@container studio (max-width: 840px) {
.fs-studio-canvas { flex-direction: column; flex-wrap: nowrap; }
.fs-studio-profiles { flex: 1 1 auto; width: 100%; }
/* 28rem ist die BREITEN-Schwelle fuer wrap. In der Spalte waere dieselbe Basis 448px Hoehe
und wuerde die Bibliothek bei einem kurzen Flow ins Leere schieben. */
.fs-studio-canvas > .fs-studio-flowcol { flex: 1 1 auto; width: 100%; }
.fs-studio-library { flex: 1 1 auto; width: 100%; }
}
/* Der Entwurf setzt jede Zeile als eigene, schwebende Karte mit 6px Abstand — nicht als eine Flaeche
mit Trennlinien. Das ist der auffaelligste Unterschied und traegt den ruhigen Eindruck des Entwurfs:
die Trennung entsteht durch Abstand und Schatten, nicht durch Linien (No-Line-Regel). */
.fs-studio-listwrap { background: transparent; display: flex; flex-direction: column; gap: 0.375rem; }
/* Phasenkopf: die echten Phasennamen der App. Er wird aus der Reihenfolge abgeleitet — springt sie
zurueck, markiert sich der Kopf selbst, und der Zickzack steht dort, wo er entsteht. */
/* Der Kopf sitzt jetzt zwischen den Karten, nicht auf einer durchgehenden Flaeche — Hintergrund also
die Seitenflaeche, damit er beim Kleben nichts verdeckt. Sperrung wie im Entwurf gemessen (2.2px auf
10px, also 0.22em). */
.fs-studio-phase-head { position: sticky; top: 2.375rem; z-index: 3; background: var(--fs-bg-primary, #f7f9fb); display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0.25rem 0.5rem; }
.fs-studio-phase-head:first-child { padding-top: 0.25rem; }
.dark .fs-studio-phase-head { background: var(--fs-bg-primary, #0f1115); }
.fs-studio-phase-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; flex: none; }
.fs-studio-phase-name { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fs-text-primary); }
.fs-studio-phase-rule { flex: 1; height: 1px; background: var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-phase-rule { background: rgba(255, 255, 255, 0.06); }
.fs-studio-phase-num { font-size: 0.6875rem; color: var(--fs-text-secondary); opacity: 0.85; font-variant-numeric: tabular-nums; flex: none; }
.fs-studio-phase-edit { flex: none; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: var(--fs-radius-sm, 0.125rem); background: transparent; color: var(--fs-text-secondary); opacity: 0; cursor: pointer; transition: opacity 0.12s ease; }
.fs-studio-phase-head:hover .fs-studio-phase-edit, .fs-studio-phase-edit:focus-visible { opacity: 0.75; }
.fs-studio-phase-edit:hover { opacity: 1; background: var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-phase-edit:hover { background: rgba(255, 255, 255, 0.08); }
.fs-studio-phase-edit .material-symbols-outlined { font-size: 0.875rem; line-height: 1; }
/* Kein Gold: die Hausregel reserviert es fuer Erfolgs-Momente, und ein Ruecksprung ist eine Warnung. */
.fs-studio-phase-warn { font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-warning, #b45309); flex: none; }
.fs-studio-phase-back .fs-studio-phase-name { color: var(--fs-warning, #b45309); }
/* Phasen unterscheiden sich ueber HELLIGKEIT eines neutralen Tons, nicht ueber sechs eigene Farben.
Sechs Hues nebeneinander lesen sich als Regenbogen, und hartcodierte Hex-Werte verstossen gegen die
Hausregel (Farben nur ueber --fs-*-Tokens) — in einem White-Label-Produkt kollidieren sie ausserdem mit
der Markenfarbe jedes Partners. Die Phase wird ohnehin im Kopf ausgeschrieben; die Spur muss nur einen
Lauf zusammenhalten. --fs-text-secondary ist themefaehig (hell wie dunkel definiert). */
.fs-studio-phase-0 { --fs-phase-tone: 0.28; }
.fs-studio-phase-1 { --fs-phase-tone: 0.42; }
.fs-studio-phase-2 { --fs-phase-tone: 0.56; }
.fs-studio-phase-3 { --fs-phase-tone: 0.70; }
.fs-studio-phase-4 { --fs-phase-tone: 0.84; }
.fs-studio-phase-5 { --fs-phase-tone: 1; }
/* Per-Org hinzugefuegte Phasen (>5): voller Ton statt des blassen 0.6-Fallbacks — eine angehaengte Phase
liegt am Ende des Wegs und liest sich als "spaeteste", nicht als ausgegraut. Der Kopf traegt den Namen. */
.fs-studio-phase-6, .fs-studio-phase-7, .fs-studio-phase-8, .fs-studio-phase-9 { --fs-phase-tone: 1; }
.fs-studio-phase-dot { background: var(--fs-text-secondary); opacity: var(--fs-phase-tone, 0.6); }
.fs-studio-phase-head .fs-studio-phase-name { color: var(--fs-text-secondary); }
.fs-studio-row { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; padding: 0.4375rem 0.75rem; background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-sm); cursor: grab; transition: background-color 0.12s ease, box-shadow 0.12s ease; }
/* Sichtbarkeits-Bedingung an der Zeile: der Chip ZEIGT die geltende Regel und oeffnet den Schritt-Editor,
in dem sie bearbeitet wird. Er liegt in CTRL_SEL (dragstart-Ausschluss), sonst verschluckt ein Zug den Klick.
Die Zeilen-Controls stehen in einer eigenen nowrap-Hauptzeile, damit sie bei schmalem Board (offene
Bibliothek) NICHT einzeln umbrechen. Der Titel schrumpft zuerst (flex:1 min-width:0), danach darf der
Chip-Text schrumpfen (bis auf das Icon), bevor etwas ueberlaeuft. */
.fs-studio-row-main { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 0.625rem; }
.fs-studio-cond-toggle { flex: 0 1 auto; min-width: 1.9rem; display: inline-flex; align-items: center; gap: 0.3125rem; max-width: 15rem; padding: 0.3125rem 0.5rem; border: 0; border-radius: var(--fs-radius-sm, 0.125rem); background: transparent; color: var(--fs-text-secondary); font-family: inherit; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; box-shadow: inset 0 0 0 1px var(--fs-bg-tertiary, #eceef0); }
.fs-studio-cond-toggle:hover { color: var(--fs-text-primary); }
.fs-studio-cond-toggle:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
.fs-studio-cond-toggle .material-symbols-outlined { flex: none; font-size: 0.9375rem; line-height: 1; }
.fs-studio-cond-toggle-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-studio-cond-toggle.has-rule { color: var(--fs-gold-deep); background: rgba(233, 193, 118, 0.1); box-shadow: inset 0 0 0 1px rgba(233, 193, 118, 0.4); }
/* Der Bedingungs-Block sitzt in der rechten Editor-Spalte. Feld, Operator und Wert stehen dort untereinander
und ueber die volle Kartenbreite: nebeneinander blieben in 22.5rem drei Auswahlfelder von je gut 5rem, in
denen kein Feldname mehr lesbar ist. */
.fs-studio-cond { display: flex; flex-direction: column; gap: 0.5rem; }
.fs-studio-cond-row { display: flex; flex-direction: column; gap: 0.375rem; }
.fs-studio-cond .fs-input { width: 100%; min-height: 2.25rem; padding: 0.375rem 0.5rem; font-size: 0.75rem; }
.fs-studio-cond-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
/* Ohne das startet der Mausdruck auf dem Titel eine TEXTAUSWAHL, und der Browser zieht dann den markierten
Text statt der Zeile — der Griff verspricht ein Ziehen, das der Zug nicht einloest. */
.fs-studio-row, .fs-studio-row * { user-select: none; -webkit-user-select: none; }
/* Keine Trennlinie mehr: die Karten stehen fuer sich. */
.fs-studio-row:hover { background: var(--fs-bg-card); box-shadow: var(--fs-shadow-md); }
.dark .fs-studio-row:hover { background: rgba(255, 255, 255, 0.04); }
.fs-studio-row:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: -2px; }
/* Die Phasen-Spur am linken Rand haelt einen Lauf optisch zusammen und bricht sichtbar, wo er endet. */
.fs-studio-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--fs-text-secondary); opacity: calc(var(--fs-phase-tone, 0.6) * 0.55); }
.fs-studio-grip.material-symbols-outlined { flex: none; display: flex; align-items: center; justify-content: center; width: 1rem; font-size: 1rem; line-height: 1; color: var(--fs-text-secondary); opacity: 0.45; cursor: grab; transition: opacity 0.12s ease; }
.fs-studio-row:hover .fs-studio-grip, .fs-studio-row:focus-within .fs-studio-grip, .fs-studio-row-dragging .fs-studio-grip { opacity: 0.8; }
.fs-studio-row-dragging .fs-studio-grip { cursor: grabbing; }
/* Nummerierung, weil die Reihenfolge hier tatsaechlich Information traegt. */
.fs-studio-ord { flex: none; width: 1.375rem; text-align: right; font-size: 0.6875rem; color: var(--fs-text-secondary); opacity: 0.8; font-variant-numeric: tabular-nums; }
.fs-studio-row .studio-list-item { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.125rem 0; background: transparent; }
.fs-studio-row .studio-list-title { font-size: 0.84375rem; font-weight: 600; color: var(--fs-text-primary); }
.studio-list-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 500; }
.studio-list-item[aria-pressed="true"] .studio-list-title { font-weight: 700; }
.fs-studio-row:has(.studio-list-item[aria-pressed="true"]) { background: var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-row:has(.studio-list-item[aria-pressed="true"]) { background: rgba(255, 255, 255, 0.07); }
.fs-studio-row-dragging { cursor: grabbing; background: var(--fs-bg-tertiary, #eceef0); box-shadow: var(--fs-shadow-lg); }
.dark .fs-studio-row-dragging { background: rgba(255, 255, 255, 0.08); }
/* Status-Punkt: gefüllt = aktiv, Ring = optional, blass = aus, Gold = eigener Schritt. */
.fs-studio-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; flex: none; display: inline-block; }
.fs-studio-dot-active { background: var(--fs-brand-secondary, #505f76); }
.dark .fs-studio-dot-active { background: var(--fs-text-secondary); }
.fs-studio-dot-optional { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fs-brand-secondary, #505f76); }
.dark .fs-studio-dot-optional { box-shadow: inset 0 0 0 1.5px var(--fs-text-secondary); }
.fs-studio-dot-hidden { background: var(--fs-text-secondary); opacity: 0.4; }
.fs-studio-dot-custom { background: var(--fs-gold); box-shadow: 0 0 0 2px rgba(233, 193, 118, 0.22); }
/* „Aus" haengt am data-state der ZEILE, nicht an Utility-Klassen: Tailwinds .line-through fehlt im
prebuilt CSS, die Durchstreichung war damit wirkungslos. */
.fs-studio-row[data-state="hidden"] .studio-list-item, .fs-studio-row[data-state="hidden"] .fs-studio-ord { opacity: 0.45; }
.fs-studio-row[data-state="hidden"] .studio-list-title { text-decoration-line: line-through; }
/* Anpassungs-Marker: WO hat die Org etwas geaendert. Ohne sie muss man 32 Schritte einzeln aufklappen. */
.fs-studio-marks { display: flex; gap: 0.25rem; flex: none; font-size: 0.625rem; color: var(--fs-text-secondary); }
.fs-studio-mark { font-size: 0.625rem; letter-spacing: 0.04em; padding: 0.1875rem 0.4375rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-tertiary, #eceef0); font-weight: 600; color: var(--fs-text-secondary); }
.dark .fs-studio-mark { background: rgba(255, 255, 255, 0.09); color: var(--fs-text-primary); }
/* In der BUILDER-ZEILE stehen die Bausteine als ruhiger Textlauf statt als Pillen: bis zu sechs gefuellte
Chips ziehen dort mehr Aufmerksamkeit auf sich als der Titel, um den es geht. Auf der Bibliotheks-KARTE
bleiben es Pillen — dort ist pro Karte Platz und die Marke ist das, was man vergleicht. */
.fs-studio-marks .fs-studio-mark { padding: 0; background: none; font-weight: 400; letter-spacing: 0; color: inherit; }
.dark .fs-studio-marks .fs-studio-mark { background: none; color: inherit; }
.fs-studio-marks .fs-studio-mark + .fs-studio-mark::before { content: '·'; margin-right: 0.25rem; opacity: 0.6; }
.fs-studio-type { flex: none; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fs-text-secondary); opacity: 0.8; }
/* Verschoben: Goldkante plus Glyphe. Das Wort bleibt sr-only, ausgeschrieben kuerzt es den Titel weg. */
.fs-studio-moved { display: none; }
.fs-studio-row-moved .fs-studio-spine { background: var(--fs-brand-secondary, #505f76); opacity: 1; }
.dark .fs-studio-row-moved .fs-studio-spine { background: var(--fs-text-primary); }
.fs-studio-row-moved .fs-studio-moved { display: inline-block; flex: none; font-size: 0.75rem; line-height: 1; color: var(--fs-text-primary); }
.fs-studio-row-moved .fs-studio-moved::before { content: "\2195"; }
/* Status-Punkt als eigener Button: Sichtbarkeit direkt in der Zeile, ohne Umweg ueber den Inspector. */
/* Trefferflaeche deutlich groesser als der 7px-Punkt — vorher war der Schalter kaum zu treffen. */
.fs-studio-state { flex: none; display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 1.75rem; height: 1.75rem; padding: 0 0.5rem; border-radius: var(--fs-radius-sm, 0.125rem); background: transparent; cursor: pointer; }
.fs-studio-state:hover { background: rgba(0, 0, 0, 0.06); }
.dark .fs-studio-state:hover { background: rgba(255, 255, 255, 0.1); }
.fs-studio-state:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
/* Der Zustand steht jetzt ausgeschrieben in der Zeile, nicht nur als Punkt: aus einem farbigen Punkt
liest niemand "optional", und der Unterschied zwischen aktiv und optional ist der wichtigste im
Builder. Aktiv bekommt die gefuellte Flaeche — es ist der Normalfall, und die Ausnahmen sollen sich
davon abheben, nicht umgekehrt. */
.fs-studio-state-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-text-secondary); white-space: nowrap; }
.fs-studio-row[data-state="active"] .fs-studio-state { background: var(--fs-brand-primary, #131b2e); }
.fs-studio-row[data-state="active"] .fs-studio-state-label { color: var(--fs-on-brand-primary, #fff); }
.fs-studio-row[data-state="active"] .fs-studio-state:hover { opacity: 0.88; }
.fs-studio-row[data-state="active"] .fs-studio-dot { display: none; }
.dark .fs-studio-row[data-state="active"] .fs-studio-state { background: rgba(255, 255, 255, 0.16); }
.dark .fs-studio-row[data-state="active"] .fs-studio-state-label { color: var(--fs-text-primary); }
/* Alle drei Zustaende als Pille wie in der Vorlage: aktiv gefuellt (oben), optional als Umriss, aus als
ruhige Flaeche. Der Punkt entfaellt — die Pillenfarbe traegt den Zustand, ein Punkt daneben doppelt ihn. */
.fs-studio-state .fs-studio-dot { display: none; }
.fs-studio-row[data-state="optional"] .fs-studio-state { box-shadow: inset 0 0 0 1px var(--fs-brand-secondary, #505f76); }
.fs-studio-row[data-state="hidden"] .fs-studio-state { background: var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-row[data-state="hidden"] .fs-studio-state { background: rgba(255, 255, 255, 0.08); }
/* Typ-Icon: der Typ war vorher nur an einem Textbadge fuer link und review zu erkennen. */
.fs-studio-typeicon { flex: none; font-size: 1.0625rem; line-height: 1; color: var(--fs-text-secondary); opacity: 0.75; }
.fs-studio-row[data-state="hidden"] .fs-studio-typeicon { opacity: 0.4; }
/* Phasen-Select in der Zeile. Schmal gehalten (P1/P2/…) — der ausgeschriebene Phasenname steht im
Phasenkopf darueber, in der Zeile wuerde er nur den Titel wegdruecken. */
.fs-studio-phase { flex: none; height: 1.75rem; padding: 0 0.125rem 0 0.5rem; border: 0; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-tertiary, #eceef0); color: var(--fs-text-secondary); font-size: 0.6875rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.dark .fs-studio-phase { background: rgba(255, 255, 255, 0.09); color: var(--fs-text-primary); }
.fs-studio-phase:focus-visible { outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
/* Zeilen-Aktionen. Sie bleiben blass, bis die Zeile Hover oder Fokus hat — 32 Zeilen mit je vier
vollfarbigen Icons sind ein Raster aus Symbolen, in dem der Titel untergeht. Auf Touch (kein Hover)
stehen sie dauerhaft sichtbar, sonst waeren sie dort unerreichbar. */
.fs-studio-nudge { display: flex; flex: none; }
.fs-studio-move, .fs-studio-edit, .fs-studio-remove { flex: none; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--fs-radius-sm, 0.125rem); background: transparent; color: var(--fs-text-secondary); cursor: pointer; opacity: 0.35; transition: opacity 0.12s ease, background-color 0.12s ease; }
.fs-studio-move .material-symbols-outlined, .fs-studio-edit .material-symbols-outlined, .fs-studio-remove .material-symbols-outlined { font-size: 1.0625rem; line-height: 1; }
.fs-studio-move { width: 1.375rem; height: 1.375rem; }
.fs-studio-move .material-symbols-outlined { font-size: 0.9375rem; }
.fs-studio-nudge { flex-direction: column; gap: 0.0625rem; }
.fs-studio-row:hover .fs-studio-move, .fs-studio-row:hover .fs-studio-edit, .fs-studio-row:hover .fs-studio-remove,
.fs-studio-row:focus-within .fs-studio-move, .fs-studio-row:focus-within .fs-studio-edit, .fs-studio-row:focus-within .fs-studio-remove { opacity: 0.8; }
.fs-studio-move:hover, .fs-studio-edit:hover, .fs-studio-remove:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.dark .fs-studio-move:hover, .dark .fs-studio-edit:hover, .dark .fs-studio-remove:hover { background: rgba(255, 255, 255, 0.1); }
.fs-studio-remove:hover { color: var(--fs-error, #ba1a1a); }
.fs-studio-move:focus-visible, .fs-studio-edit:focus-visible, .fs-studio-remove:focus-visible { opacity: 1; outline: 2px solid var(--fs-brand-secondary, #505f76); outline-offset: 1px; }
@media (hover: none) {
.fs-studio-move, .fs-studio-edit, .fs-studio-remove { opacity: 0.8; }
}
/* Editor-Felder. Der Standardtext steht im Platzhalter; eine zusaetzliche Standard-Zeile erscheint nur,
wenn ein eigener Text das Feld belegt — sonst stuende derselbe Satz zweimal in Grau untereinander. */
.fs-studio-field { display: block; }
.fs-studio-field + .fs-studio-field, .fs-studio-more { margin-top: 0.5rem; }
/* Einzeiler-Felder (Titel/Button/Link-Label) brauchen keine Textarea-Hoehe; nur echte Prosa-Textareas
duerfen wachsen. Haelt die Karte kompakt statt auseinandergezogen. */
.fs-studio-field textarea.fs-input { min-height: 3.5rem; resize: vertical; }
.fs-studio-field input.fs-input { resize: none; }
/* Speichern immer erreichbar, ohne durch alle Felder zu scrollen: Aktionszeile klebt am unteren
Rand des Sichtfelds, solange der Editor sichtbar ist. Opaker Grund, damit Felder nicht durchscheinen. */
.fs-studio-actions { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 0.5rem; padding: 0.6rem 0 0.4rem; margin-top: 0.5rem; background: var(--fs-bg-card); box-shadow: 0 -0.5rem 0.6rem -0.4rem var(--fs-bg-card); }
.fs-studio-field-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--fs-text-secondary); margin-bottom: 0.25rem; }
.fs-studio-field-badge { font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.125rem 0.25rem; border-radius: var(--fs-radius-sm, 0.125rem); background: var(--fs-bg-tertiary, #eceef0); color: var(--fs-text-secondary); }
.fs-studio-field-default { display: block; font-size: 0.6875rem; color: var(--fs-text-secondary); opacity: 0.75; margin-bottom: 0.25rem; }
/* Randfelder eingeklappt: neun gleich laute Felder untereinander waren eine Wand, in der man das
Gesuchte nicht fand. Offen, sobald dort etwas ueberschrieben ist — sonst versteckt sich der eigene Stand. */
.fs-studio-more > summary { cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--fs-text-secondary); padding: 0.375rem 0; list-style: none; display: flex; align-items: center; gap: 0.375rem; }
.fs-studio-more > summary::-webkit-details-marker { display: none; }
.fs-studio-more > summary::before { content: "\203A"; display: inline-block; transition: transform 0.12s ease; }
.fs-studio-more[open] > summary::before { transform: rotate(90deg); }
/* Inspector-Inhalte */
.fs-studio-kv > div { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.375rem 0; }
.fs-studio-kv > div + div { box-shadow: inset 0 1px 0 0 var(--fs-bg-tertiary, #eceef0); }
.dark .fs-studio-kv > div + div { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }
.fs-studio-kv dt { flex: none; width: 8rem; font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--fs-text-secondary); }
.fs-studio-kv dd { flex: 1; min-width: 0; font-size: 0.8125rem; }
.fs-studio-kv-note { display: block; font-size: 0.6875rem; color: var(--fs-text-secondary); }
.fs-studio-weight { display: flex; gap: 2px; }
/* Die Segmente holen ihren Ton aus derselben Phasen-Stufe wie Spur und Punkt — vorher hingen sie an
den festen Phasenfarben und waren nach deren Wegfall unsichtbar. */
.fs-studio-weight span { height: 0.375rem; border-radius: 1px; background: var(--fs-text-secondary); opacity: var(--fs-phase-tone, 0.6); }
/* Die Einblend-Animation der Seite laeuft mit fill-mode:forwards und haelt danach transform:translateY(0)
dauerhaft am Root. Ein Transform (auch der identische translateY(0)) macht das Root zum Bezugsrahmen
fuer position:fixed UND zu einem eigenen Stacking-Context — das fixe Sichtbarkeits-Menue landete dadurch
um den Root-Offset versetzt und hinter der Liste statt am Punkt. fill-mode:none laesst die Animation
laufen, gibt den Transform am Ende aber frei (End-Frame == Grundzustand, kein Sprung); der Bezugsrahmen
ist wieder der Viewport, gegen den getBoundingClientRect() das Menue positioniert. */
#onboarding-studio-root.animate-slide-up { animation-fill-mode: none; }
/* fixed, nicht absolute: die Liste kann in einem eigenen Scroll-Container liegen, ein absolut
positioniertes Menue wuerde beim Scrollen von seinem Punkt wegwandern. */
.fs-studio-menu { position: fixed; z-index: 40; min-width: 8.5rem; padding: 0.1875rem; background: var(--fs-bg-card); border-radius: var(--fs-radius-sm, 0.125rem); box-shadow: var(--fs-shadow-lg); }
.fs-studio-menu-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; font-size: 0.75rem; text-align: left; border-radius: var(--fs-radius-sm, 0.125rem); cursor: pointer; }
.fs-studio-menu-item:hover { background: var(--fs-bg-tertiary, #eceef0); }
.fs-studio-menu-item[aria-current="true"] { font-weight: 700; }
.dark .fs-studio-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
/* Impersonation-Warnung. Der Body ist ein h-[100dvh]-Row-Flex mit overflow-hidden — im Fluss waere
die Leiste eine dritte Flex-Spalte. Also fixiert, und Sidebar + Main reservieren den Platz selbst.
Selektor-Spezifitaet (0,1,2) schlaegt die Tailwind-Utility h-[100dvh] (0,1,0) ohne !important. */
:root { --fs-impersonation-bar-h: 2.25rem; }
.fs-impersonation-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--fs-impersonation-bar-h); display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0 1rem; font-size: 0.75rem; font-weight: 600; background: var(--fs-warning, #b45309); color: #fff; box-shadow: var(--fs-shadow-md); }
.fs-impersonation-bar button { text-decoration: underline; font-weight: 700; cursor: pointer; }
body.fs-impersonating > aside,
body.fs-impersonating > main {
margin-top: var(--fs-impersonation-bar-h);
height: calc(100dvh - var(--fs-impersonation-bar-h));
max-height: calc(100dvh - var(--fs-impersonation-bar-h));
}
/* Die Sidebar ist sticky top-0 und klebt sonst unter der Leiste fest. */
body.fs-impersonating > aside { top: var(--fs-impersonation-bar-h); }
/* Optik fuer aria-disabled-Buttons: die bleiben fokussierbar, greifen also nicht auf :disabled. */
.fs-btn-inert[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.fs-btn-inert[aria-disabled="true"]:hover { color: var(--fs-text-secondary); }
/* Severity-Markierung im Admin-Attention-Panel. Handgeschrieben statt Tailwind-Utilities:
die Farbe haengt an Laufzeitdaten, dynamisch gebaute Klassen existieren im prebuilt
tailwind.css nicht. Hell/Dunkel kommt gratis ueber die Tokens. */
.fs-attention-dot { display: inline-block; flex: none; width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: currentColor; }
.fs-attention-count { font-weight: 700; }
.fs-attention-dot.is-error, .fs-attention-count.is-error { color: var(--fs-error); }
.fs-attention-dot.is-warning, .fs-attention-count.is-warning { color: var(--fs-warning); }
.fs-attention-dot.is-info, .fs-attention-count.is-info { color: var(--fs-info); }
/* FUN-053 Video-Embeds an Onboarding-Steps: 16:9-Wrapper, iframe fuellt ihn absolut.
Handgeschrieben statt Tailwind aspect-video — Utility ist im prebuilt tailwind.css inert. */
.fs-video-embed { position: relative; width: 100%; padding-top: 56.25%; background: var(--fs-surface-container-low, #0000000a); }
.fs-video-embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Calendly-Buchung ist ein hohes Formular, kein 16:9-Video — feste Mindesthöhe statt aspect-ratio. */
.fs-calendly-embed { width: 100%; min-height: 660px; background: var(--fs-surface-container-low, #0000000a); }
.fs-calendly-embed > iframe { width: 100%; min-height: 660px; height: 100%; border: 0; }
/* FUN-037 review-Step: read-only Summary-Fläche für die gemeinsame Prüfung im Onboarding-Call.
Banner spiegelt .fs-readonly-banner (dieselben --fs-*-Tonabstufungen, kein sichtbarer Border). */
.fs-review-banner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.125rem;
background: var(--fs-bg-tertiary);
}
.fs-review-badge {
flex-shrink: 0;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.125rem 0.5rem;
border-radius: 0.125rem;
background: var(--fs-bg-secondary);
color: var(--fs-text-secondary);
}
.fs-review-note {
flex: 1 1 16rem;
min-width: 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--fs-text-secondary);
}
/* Leeres Quellfeld: gedämpft, damit "noch nicht angegeben" nicht wie ein echter Wert liest. */
.fs-review-empty {
font-style: italic;
opacity: 0.7;
}
/* ============================================================
Calendar — in-app month/list view. Tonal cells, no hard lines.
============================================================ */
.fs-cal-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.fs-cal-month-label {
font-family: var(--fs-font-serif);
font-size: var(--fs-text-lg);
color: var(--fs-text-primary);
min-width: 11rem;
}
.fs-cal-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--fs-radius-sm);
color: var(--fs-text-secondary);
background: var(--fs-bg-secondary);
transition: color var(--fs-transition-fast), background var(--fs-transition-fast);
}
.fs-cal-nav-btn:hover { color: var(--fs-text-primary); background: var(--fs-bg-tertiary); }
/* Tonal separation via a secondary-surface bleed behind card cells — no visible borders. */
.fs-cal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-sm);
overflow: hidden;
}
.fs-cal-dow {
background: var(--fs-bg-secondary);
text-align: center;
padding: 0.5rem 0;
font-size: var(--fs-text-xs);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--fs-text-secondary);
}
.fs-cal-cell {
background: var(--fs-bg-card);
min-height: 5.5rem;
padding: 0.375rem;
display: flex;
flex-direction: column;
gap: 0.1875rem;
}
.fs-cal-cell.is-outside { background: var(--fs-bg-secondary); }
.fs-cal-cell.is-outside .fs-cal-daynum { opacity: 0.45; }
.fs-cal-daynum { font-size: var(--fs-text-xs); color: var(--fs-text-secondary); }
.fs-cal-cell.is-today .fs-cal-daynum {
font-weight: 700;
color: var(--fs-brand-primary);
}
.fs-cal-event {
display: block;
width: 100%;
text-align: left;
font-size: 0.6875rem;
line-height: 1.3;
padding: 0.125rem 0.375rem;
border-radius: var(--fs-radius-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
a.fs-cal-event, button.fs-cal-event { cursor: pointer; }
/* Event types — tonal tints, disciplined (no aggressive red, gold reserved for success). */
.fs-cal-event.type-deadline { background: var(--fs-info-bg); color: var(--fs-info-text); }
.fs-cal-event.type-call { background: rgba(var(--fs-brand-accent-rgb), 0.14); color: var(--fs-brand-accent); }
.fs-cal-event.type-manual { background: rgba(var(--fs-brand-primary-rgb), 0.1); color: var(--fs-brand-primary); }
.fs-cal-event.type-statement { background: rgba(var(--fs-brand-secondary-rgb), 0.14); color: var(--fs-brand-secondary); }
.fs-cal-event.type-payment { background: var(--fs-warning-bg); color: var(--fs-warning-text); }
/* List view */
.fs-cal-list-item {
display: flex;
align-items: baseline;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: var(--fs-radius-sm);
background: var(--fs-bg-card);
}
.fs-cal-list-date {
flex-shrink: 0;
width: 6.5rem;
font-size: var(--fs-text-xs);
color: var(--fs-text-secondary);
font-variant-numeric: tabular-nums;
}
.fs-cal-list-dot {
flex-shrink: 0;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
align-self: center;
}
.fs-cal-list-dot.type-deadline { background: var(--fs-info-text); }
.fs-cal-list-dot.type-call { background: var(--fs-brand-accent); }
.fs-cal-list-dot.type-manual { background: var(--fs-brand-primary); }
.fs-cal-list-dot.type-statement { background: var(--fs-brand-secondary); }
.fs-cal-list-dot.type-payment { background: var(--fs-warning-text); }
.fs-cal-list-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-text-sm); color: var(--fs-text-primary); }
.fs-cal-legend-dot {
display: inline-block;
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
margin-right: 0.375rem;
vertical-align: -1px;
}
/* ═══════════════════════════════════════════════════════════════════════
Branding editor (org/branding.php) — settings toolbar, accordion sections,
status badges, per-setting affect-labels. Hand-authored fs-* (no Tailwind
utility dependency); Financial Atelier: tonal surfaces, ambient shadow,
sharp corners, no visible hairlines.
═══════════════════════════════════════════════════════════════════════ */
.fs-bs-toolbar {
position: sticky;
top: calc(var(--fs-topnav-height) + 0.5rem);
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--fs-space-3);
padding: var(--fs-space-3) var(--fs-space-4);
margin-bottom: var(--fs-space-4);
background: var(--fs-bg-card);
border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow-sm);
}
.fs-bs-search-wrap {
position: relative;
flex: 1 1 14rem;
min-width: 12rem;
}
.fs-bs-search-ico {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: var(--fs-text-muted);
pointer-events: none;
}
.fs-bs-search {
width: 100%;
padding: 0.5rem 0.75rem 0.5rem 2.25rem;
font-size: var(--fs-text-sm);
color: var(--fs-text-primary);
background: var(--fs-bg-secondary);
border: none;
border-radius: var(--fs-radius-md);
font-family: inherit;
}
.fs-bs-search::placeholder { color: var(--fs-text-muted); }
.fs-bs-search:focus-visible {
outline: none;
box-shadow: var(--fs-focus-ring);
}
.fs-bs-search::-webkit-search-cancel-button { cursor: pointer; }
.fs-bs-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-text-xs);
font-weight: 600;
color: var(--fs-text-secondary);
cursor: pointer;
white-space: nowrap;
}
.fs-bs-toggle-input { width: 1rem; height: 1rem; accent-color: var(--fs-brand-primary); cursor: pointer; }
.fs-bs-toolbar-status {
display: inline-flex;
align-items: center;
gap: var(--fs-space-3);
margin-left: auto;
}
.fs-bs-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.6rem;
font-size: var(--fs-text-xs);
font-weight: 600;
color: var(--fs-text-secondary);
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-md);
text-decoration: none;
transition: background var(--fs-transition-fast);
}
.fs-bs-chip:hover { background: var(--fs-bg-tertiary); }
.fs-bs-chip-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.fs-bs-ready-summary {
font-size: var(--fs-text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fs-text-secondary);
white-space: nowrap;
}
/* Accordion sections */
.fs-bs-section {
background: var(--fs-bg-card);
border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow-sm);
margin-bottom: var(--fs-space-4);
overflow: hidden;
}
.fs-bs-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fs-space-3);
padding: var(--fs-space-4) var(--fs-space-6);
cursor: pointer;
list-style: none;
transition: background var(--fs-transition-fast);
}
.fs-bs-summary::-webkit-details-marker { display: none; }
.fs-bs-summary:hover { background: var(--fs-bg-secondary); }
.fs-bs-summary:focus-visible { outline: none; box-shadow: var(--fs-focus-ring); }
.fs-bs-summary-main { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.fs-bs-summary-title {
font-family: var(--fs-font-serif);
font-size: var(--fs-text-lg);
font-weight: 600;
color: var(--fs-text-primary);
}
.fs-bs-summary-meta { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; }
.fs-bs-ready-dot { line-height: 1; }
.fs-bs-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
padding: 0.15rem 0.5rem;
font-size: var(--fs-text-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--fs-text-secondary);
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-md);
}
.fs-bs-badge.is-complete {
color: var(--fs-success-text);
background: var(--fs-success-bg);
}
.fs-bs-chevron {
width: 1.1rem;
height: 1.1rem;
color: var(--fs-text-muted);
transition: transform var(--fs-transition-base);
}
details[open] > .fs-bs-summary .fs-bs-chevron { transform: rotate(180deg); }
.fs-bs-section-body {
padding: 0 var(--fs-space-6) var(--fs-space-6);
display: flex;
flex-direction: column;
gap: var(--fs-space-6);
}
.fs-bs-row { display: flex; flex-direction: column; gap: 0.5rem; }
.fs-bs-row-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--fs-space-3);
flex-wrap: wrap;
}
.fs-bs-affect {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
color: var(--fs-text-muted);
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-md);
white-space: nowrap;
flex: none;
}
.fs-bs-affect-ico { width: 0.75rem; height: 0.75rem; flex: none; opacity: 0.8; }
/* Search empty state */
.fs-bs-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: var(--fs-space-8) var(--fs-space-6);
margin-bottom: var(--fs-space-4);
text-align: center;
color: var(--fs-text-muted);
background: var(--fs-bg-card);
border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow-sm);
}
.fs-bs-empty .material-symbols-outlined { font-size: 1.75rem; }
.fs-bs-empty p { font-size: var(--fs-text-sm); }
/* Preview-surface highlight when hovering the setting that drives it */
[data-preview-surface] { transition: box-shadow var(--fs-transition-base), transform var(--fs-transition-base); }
[data-preview-surface].bs-surface-highlight {
box-shadow: 0 0 0 2px var(--fs-brand-primary), var(--fs-shadow-md);
transform: translateY(-1px);
}
/* FUN-049: day-count field in the reminder timing row. fs-input's width:100% loads after the
tailwind utilities and outranks w-24 by cascade order — the number field swallowed the row and
left the unit select 0 content width. Pin it small so the row reads "3 | Tage vorher". */
.fs-input.fs-field-days { width: 6.5rem; flex: 0 0 auto; }
/* ========== CLIENT FILE (FUN-083) ========== */
/* Handwritten fs-* so styling is live without a Tailwind rebuild. Light surfaces via --fs-* tokens;
dark tonal overlays use white-alpha, matching the .dark .fs-card / .fs-badge / .fs-tab convention. */
/* Two-tier nav (FUN-293): the 5 areas use the standard fs-tabs pill bar; the sub-tab row is a lighter
secondary strip so the hierarchy reads at a glance. Both bars wrap instead of scroll, so neither needs
horizontal hunting on a phone (5 areas, ≤5 sub-tabs). They sit in a .fs-cf-nav wrapper (space-y-2)
that owns the gap between them, so the fs-tabs default bottom margin is dropped here; page-shell
spacing separates the whole nav from the panels below. */
.fs-cf-areas { flex-wrap: wrap; margin-bottom: 0; }
.fs-cf-subtabs {
background: transparent;
padding: 0;
gap: var(--fs-space-1);
margin-bottom: 0;
flex-wrap: wrap;
}
.dark .fs-cf-subtabs { background: transparent; }
.fs-cf-subtabs .fs-tab {
font-size: var(--fs-text-xs);
padding: var(--fs-space-1) var(--fs-space-3);
white-space: normal;
}
.fs-cf-monogram {
width: 3.25rem;
height: 3.25rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
background: var(--fs-bg-tertiary);
color: var(--fs-text-secondary);
font-family: var(--fs-font-serif, serif);
font-size: var(--fs-text-xl);
font-weight: 600;
letter-spacing: 0.02em;
}
.dark .fs-cf-monogram { background: rgba(255, 255, 255, 0.06); }
/* Tonal meta tiles — surface shift instead of visible borders (No-Line rule). */
.fs-cf-tile {
background: var(--fs-bg-secondary);
border-radius: var(--fs-radius-sm);
padding: var(--fs-space-3) var(--fs-space-4);
}
.dark .fs-cf-tile { background: rgba(255, 255, 255, 0.03); }
/* Inline form controls (inputs/selects/textareas) nested inside a .fs-cf-tile. The tile is a tonal
surface, so a transparent field vanishes into it. Lift the field onto the card surface (white in
light, an elevated step in dark) — tonal contrast per the no-line rule; the hairline only crisps
the edge. */
.fs-cf-field {
background: var(--fs-bg-card);
border: 1px solid var(--fs-border-strong);
border-radius: var(--fs-radius-sm);
color: var(--fs-text-primary);
}
.fs-cf-field::placeholder { color: var(--fs-text-muted); }
/* Muted on the dark elevated surface is only ~3.3:1; secondary clears AA (~5.7:1). */
.dark .fs-cf-field::placeholder { color: var(--fs-text-secondary); }
.fs-cf-field:hover { border-color: var(--fs-border-strong); }
.fs-cf-field:focus,
.fs-cf-field:focus-visible {
outline: none;
border-color: var(--fs-brand-primary, #131b2e);
}
.dark .fs-cf-field {
background: var(--fs-bg-surface-high);
border-color: var(--fs-border-strong);
}
/* Infinite-scroll sentinel: a small zone the IntersectionObserver watches at the end of a paginated
list. Given real height so it can intersect the viewport; shows a spinner + label while a page loads. */
.fs-cf-sentinel {
min-height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.fs-cf-sentinel-spinner {
display: inline-flex;
align-items: center;
gap: var(--fs-space-2);
font-size: var(--fs-text-xs);
color: var(--fs-text-muted);
}
.fs-cf-spinner {
width: 0.875rem;
height: 0.875rem;
border: 2px solid var(--fs-border-strong);
border-top-color: var(--fs-brand-primary, #131b2e);
border-radius: 50%;
animation: fs-cf-spin 0.7s linear infinite;
}
.dark .fs-cf-spinner { border-top-color: var(--fs-text-primary); }
@keyframes fs-cf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fs-cf-spinner { animation: none; } }
.fs-cf-tile-label {
font-size: var(--fs-text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fs-text-muted);
}
.fs-cf-tile-value {
margin-top: 2px;
font-size: var(--fs-text-sm);
font-weight: 600;
color: var(--fs-text-primary);
}
/* Slim step-progress meter. */
.fs-cf-meter {
height: 4px;
border-radius: 999px;
background: var(--fs-bg-tertiary);
overflow: hidden;
}
.dark .fs-cf-meter { background: rgba(255, 255, 255, 0.08); }
.fs-cf-meter-bar {
height: 100%;
border-radius: 999px;
background: var(--fs-brand-primary);
}
/* Owner chips. */
.fs-cf-chip {
display: inline-flex;
align-items: center;
gap: var(--fs-space-1);
padding: 2px 0.55rem;
border-radius: 999px;
font-size: var(--fs-text-xs);
font-weight: 500;
background: var(--fs-bg-tertiary);
color: var(--fs-text-secondary);
}
.dark .fs-cf-chip { background: rgba(255, 255, 255, 0.06); }
/* Timeline rail with kind-coded dots. */
.fs-cf-timeline { list-style: none; margin: 0; padding: 0; }
.fs-cf-timeline-item {
position: relative;
padding-left: var(--fs-space-6);
padding-bottom: var(--fs-space-4);
}
.fs-cf-timeline-item::before {
content: '';
position: absolute;
left: 5px;
top: 1.15rem;
bottom: 0;
width: 1px;
background: var(--fs-border-default);
}
.fs-cf-timeline-item:last-child { padding-bottom: 0; }
.fs-cf-timeline-item:last-child::before { display: none; }
.fs-cf-timeline-dot {
position: absolute;
left: 0;
top: 0.3rem;
width: 11px;
height: 11px;
border-radius: 999px;
background: var(--fs-text-muted);
box-shadow: 0 0 0 3px var(--fs-bg-card);
}
.fs-cf-timeline-dot[data-kind="note"] { background: var(--fs-info); }
.fs-cf-timeline-dot[data-kind="call"] { background: var(--fs-brand-primary); }
.fs-cf-timeline-dot[data-kind="compliance"] { background: var(--fs-warning); }
.fs-cf-timeline-dot[data-kind="ticket"] { background: var(--fs-info); }
.fs-cf-timeline-dot[data-kind="email"] { background: var(--fs-text-secondary); }
/* Ticket thread bubbles. */
.fs-cf-thread { display: flex; flex-direction: column; gap: var(--fs-space-3); }
.fs-cf-msg {
max-width: 85%;
border-radius: var(--fs-radius-sm);
padding: var(--fs-space-3) var(--fs-space-4);
}
.fs-cf-msg-user { align-self: flex-start; background: var(--fs-bg-secondary); }
.dark .fs-cf-msg-user { background: rgba(255, 255, 255, 0.05); }
.fs-cf-msg-staff { align-self: flex-end; background: var(--fs-info-bg); }
.fs-cf-msg-internal { align-self: flex-end; background: var(--fs-warning-bg); }
.fs-cf-error { color: var(--fs-error); }
.fs-cf-msg-head {
display: flex;
align-items: center;
gap: var(--fs-space-2);
margin-bottom: var(--fs-space-1);
}
.fs-cf-msg-sender { font-size: var(--fs-text-xs); font-weight: 600; color: var(--fs-text-primary); }
.fs-cf-msg-date { font-size: var(--fs-text-xs); color: var(--fs-text-muted); margin-left: auto; }
.fs-cf-msg-body {
font-size: var(--fs-text-sm);
white-space: pre-wrap;
color: var(--fs-text-primary);
word-break: break-word;
}
/* Clickable ticket row: tonal hover lift instead of an (uncompiled) brightness utility. */
.fs-cf-clickable { cursor: pointer; }
.fs-cf-clickable:hover { background: var(--fs-bg-tertiary); }
.dark .fs-cf-clickable:hover { background: rgba(255, 255, 255, 0.06); }
/* Lazy-tab loading shell: a quiet pulsing dot while the fragment fetches. */
.fs-cf-loader {
display: flex;
align-items: center;
gap: var(--fs-space-2);
min-height: 2.5rem;
}
.fs-cf-loader-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background: var(--fs-text-muted);
animation: fs-cf-pulse 1.1s ease-in-out infinite;
}
@keyframes fs-cf-pulse {
0%, 100% { opacity: 0.25; }
50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
.fs-cf-loader-dot { animation: none; }
}
/* ── Members page: "Who sees which clients" (collapsed staffers, search dropdown, show-all modal) ── */
.fs-assign-head:hover .text-sm { text-decoration: underline; text-underline-offset: 2px; }
.fs-assign-chevron { transition: transform .15s ease; font-size: 1.1rem; }
.fs-assign-staff.is-open .fs-assign-chevron { transform: rotate(90deg); }
.fs-assign-dropdown {
position: absolute; z-index: 30; left: 0; top: calc(100% + 0.25rem); min-width: 100%; width: 20rem; max-height: 18rem;
overflow-y: auto; padding: 0.25rem;
background: var(--fs-bg-primary, #fff); border: 1px solid var(--fs-border-default); border-radius: var(--fs-radius-lg);
box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.25);
}
.dark .fs-assign-dropdown { background: var(--fs-bg-secondary, #151a24); }
.fs-assign-pick {
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%;
padding: 0.45rem 0.6rem; border-radius: var(--fs-radius-md, 0.25rem); text-align: left; background: transparent; border: 0; cursor: pointer;
}
.fs-assign-pick:hover, .fs-assign-pick:focus-visible { background: var(--fs-bg-tertiary, rgba(19,27,46,0.05)); outline: none; }
.fs-assign-pick[disabled] { opacity: .5; cursor: wait; }
.fs-assign-pick-cta {
flex-shrink: 0; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
padding: 0.2rem 0.55rem; border-radius: var(--fs-radius-lg); border: 1px solid var(--fs-border-default); color: var(--fs-text-secondary);
}
.fs-assign-pick-empty { padding: 0.6rem; font-size: var(--fs-text-xs); color: var(--fs-text-muted); }
.fs-assign-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.fs-assign-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.fs-assign-modal-box { position: relative; width: 100%; max-width: 32rem; max-height: 85vh; display: flex; flex-direction: column; padding: 1.25rem; }
.fs-assign-modal-list { overflow-y: auto; max-height: 60vh; }
/* Pool "Nicht im Flow": ausgeblendete (frueher im Flow) Steps bekommen einen dezenten linken Akzent,
damit sie sich von reinen Bibliotheks-Steps (custom, nie hinzugefuegt) unterscheiden. */
.fs-studio-library-item-hidden { border-left: 2px solid var(--fs-border-strong, #c9ced4); padding-left: 0.25rem; }
.dark .fs-studio-library-item-hidden { border-left-color: rgba(255, 255, 255, 0.18); }