.sffe {
	--sffe-accent: #2563eb;
	--sffe-accent-soft: rgba(37, 99, 235, .12);
	--sffe-border: rgba(127, 127, 127, .25);
	--sffe-muted: rgba(127, 127, 127, .9);
	--sffe-bg: rgba(127, 127, 127, .06);
	max-width: 960px;
	margin: 1.5em auto;
	font-variant-numeric: tabular-nums;
}
.sffe h3 { margin: 0 0 .5em; }
.sffe h4 { margin: 0 0 .75em; font-size: 1rem; }
.sffe-error { color: #b91c1c; font-weight: 600; }

/* Login */
.sffe-login { max-width: 320px; text-align: center; padding: 1.5em; border: 1px solid var(--sffe-border); border-radius: 12px; }
.sffe-login form { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; align-items: flex-start; }
.sffe-pinwrap { display: flex; flex-direction: column; align-items: center; }
/* Erhöhte Spezifität + !important bei Maßen: viele Themes setzen Passwortfelder auf width:100% o. ä. */
.sffe.sffe-login input.sffe-pin {
	width: 6.5em !important; max-width: 100%; min-width: 0; box-sizing: border-box !important;
	font-family: ui-monospace, Menlo, Consolas, monospace !important; font-size: 1.5rem !important; line-height: 1.2;
	letter-spacing: .5em !important; text-indent: .5em; /* gleicht den Abstand nach dem letzten Zeichen aus */
	text-align: center; padding: .3em .2em !important; margin: 0;
	border: 1px solid var(--sffe-border); border-radius: 8px;
}
.sffe-slots { display: flex; gap: .55em; justify-content: center; margin-top: .5em; }
.sffe-slots span { width: .7em; height: .7em; border-radius: 50%; border: 2px solid var(--sffe-muted); box-sizing: border-box; transition: background-color .1s, border-color .1s; }
.sffe-slots span.is-filled { background: var(--sffe-accent); border-color: var(--sffe-accent); }
.sffe-btn { padding: .55em 1.1em; border: 0; border-radius: 8px; background: var(--sffe-accent); color: #fff; cursor: pointer; font-weight: 600; }
.sffe-btn-ghost { background: transparent; color: inherit; border: 1px solid var(--sffe-border); }

/* Dashboard */
.sffe-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75em; margin-bottom: 1em; }
.sffe-periods { display: flex; gap: .25em; background: var(--sffe-bg); padding: .25em; border-radius: 8px; }
.sffe-periods a { padding: .35em .75em; border-radius: 6px; text-decoration: none; color: inherit; font-size: .9rem; }
.sffe-periods a.is-active { background: var(--sffe-accent); color: #fff; }

.sffe-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75em; margin-bottom: 1em; }
.sffe-kpi { border: 1px solid var(--sffe-border); border-radius: 10px; padding: .9em 1em; display: flex; flex-direction: column; }
.sffe-kpi-v { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.sffe-kpi-l { font-size: .85rem; color: var(--sffe-muted); }

.sffe-card { border: 1px solid var(--sffe-border); border-radius: 10px; padding: 1em; margin-bottom: 1em; }
.sffe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1em; }
.sffe-grid .sffe-card { margin-bottom: 0; }

.sffe-chart { width: 100%; height: auto; display: block; }
.sffe-grid-l { stroke: var(--sffe-border); stroke-width: 1; }
.sffe-axis { font-size: 11px; fill: var(--sffe-muted); }
.sffe-line { fill: none; stroke: var(--sffe-accent); stroke-width: 2; stroke-linejoin: round; }
.sffe-area { fill: var(--sffe-accent-soft); }
.sffe-dot { fill: var(--sffe-accent); }
.sffe-hit { fill: transparent; }
.sffe-hit:hover { fill: var(--sffe-accent-soft); }

.sffe-bars { list-style: none; margin: 0; padding: 0; }
.sffe-bars li { position: relative; display: flex; justify-content: space-between; gap: 1em; padding: .4em .5em; margin-bottom: .3em; border-radius: 6px; overflow: hidden; font-size: .9rem; }
.sffe-bar { position: absolute; inset: 0 auto 0 0; background: var(--sffe-accent-soft); z-index: 0; }
.sffe-bar-l, .sffe-bar-v { position: relative; z-index: 1; }
.sffe-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sffe-bar-v { font-weight: 600; }
.sffe-empty { color: var(--sffe-muted); }

.sffe-logout { text-align: right; }