/*
 * FLW Labs – gemeinsame Komponenten (docs/design-system-plan.md, Etappe 1).
 * Braucht flwlabs-tokens.css davor. Nutzt nur die Rollen (--flw-c-*) und die Tool-Ebene (--tool-*),
 * sieht deshalb in jedem Tool und in beiden Themes richtig aus. Alle Klassen beginnen mit ui-.
 * Musterseite: /admin/designsystem
 */

/* Seite und Fläche */
.ui-page {
	min-height: 100vh;
	margin: 0;
	background: var(--flw-c-bg);
	color: var(--flw-c-text);
	font-family: var(--flw-font);
	font-size: var(--flw-text-md);
	line-height: var(--flw-leading-normal);
	-webkit-font-smoothing: antialiased;
}

/* Seitenkopf */
.ui-page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--flw-space-5);
	margin-bottom: var(--flw-space-6);
}
.ui-page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--flw-space-2); }
.ui-eyebrow {
	margin: 0 0 var(--flw-space-2);
	color: var(--tool-ink);
	font-size: var(--flw-text-xs);
	font-weight: var(--flw-weight-semibold);
	letter-spacing: var(--flw-tracking-caps);
	text-transform: uppercase;
}
.ui-title {
	margin: 0;
	color: var(--flw-c-text);
	font-size: var(--flw-text-3xl);
	font-weight: var(--flw-weight-bold);
	line-height: var(--flw-leading-tight);
	letter-spacing: -.02em;
}
.ui-lead {
	max-width: 60ch;
	margin: var(--flw-space-2) 0 0;
	color: var(--flw-c-text-muted);
	font-size: var(--flw-text-base);
}
.ui-section-title {
	margin: 0 0 var(--flw-space-4);
	color: var(--flw-c-text);
	font-size: var(--flw-text-lg);
	font-weight: var(--flw-weight-semibold);
	line-height: 1.3;
}
.ui-muted { color: var(--flw-c-text-muted); }

/* Buttons: primär (Tool-Verlauf, einmal pro Bereich), sekundär (neutral), tertiär (nur Text) */
.ui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--flw-space-2);
	height: var(--flw-control-md);
	padding: 0 var(--flw-space-4);
	border: 1px solid transparent;
	border-radius: var(--flw-radius-button);
	background: var(--flw-c-surface-2);
	color: var(--flw-c-text);
	font: var(--flw-weight-semibold) var(--flw-text-md)/1 var(--flw-font);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--flw-transition), color var(--flw-transition), filter var(--flw-transition);
}
.ui-btn:hover { background: var(--flw-c-surface-3); color: var(--flw-c-text); text-decoration: none; }
.ui-btn:focus-visible,
.ui-tab:focus-visible,
.ui-segment__item:focus-visible,
.ui-chip:focus-visible,
.ui-start-card:focus-visible,
.ui-list__item:focus-visible {
	outline: 2px solid var(--tool-accent);
	outline-offset: 2px;
}
.ui-btn .mdi { font-size: 18px; line-height: 1; }
.ui-btn--primary { background: var(--tool-gradient); color: var(--tool-on-accent); }
.ui-btn--primary:hover { background: var(--tool-gradient); color: var(--tool-on-accent); filter: brightness(1.06) saturate(1.05); }
.ui-btn--tertiary { background: transparent; color: var(--flw-c-text-muted); }
.ui-btn--tertiary:hover { background: var(--flw-c-surface-2); }
.ui-btn--danger { background: transparent; color: var(--flw-c-danger); }
.ui-btn--danger:hover { background: color-mix(in srgb, var(--flw-c-danger) 12%, transparent); color: var(--flw-c-danger); }
.ui-btn--sm { height: var(--flw-control-sm); padding: 0 var(--flw-space-3); font-size: var(--flw-text-sm); }
.ui-btn--lg { height: var(--flw-control-lg); padding: 0 22px; font-size: var(--flw-text-base); }
.ui-btn--icon { width: var(--flw-control-md); padding: 0; }
.ui-btn--icon.ui-btn--sm { width: var(--flw-control-sm); }
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }

/* Tabs: kein Rahmen, keine Fläche; der aktive Tab bekommt nur eine Linie in Tool-Farbe */
.ui-tabs {
	display: flex;
	gap: var(--flw-space-1);
	border-bottom: 1px solid var(--flw-c-line);
	overflow-x: auto;
	scrollbar-width: none;
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--flw-space-2);
	height: 44px;
	padding: 0 var(--flw-space-3);
	border: 0;
	background: none;
	color: var(--flw-c-text-muted);
	font: var(--flw-weight-medium) var(--flw-text-md)/1 var(--flw-font);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--flw-transition);
}
.ui-tab::after {
	position: absolute;
	right: var(--flw-space-3);
	bottom: -1px;
	left: var(--flw-space-3);
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--tool-accent);
	content: "";
	transform: scaleX(0);
	transition: transform var(--flw-transition);
}
.ui-tab:hover { color: var(--flw-c-text); text-decoration: none; }
.ui-tab.is-active,
.ui-tab[aria-selected="true"] { color: var(--flw-c-text); }
.ui-tab.is-active::after,
.ui-tab[aria-selected="true"]::after { transform: scaleX(1); }
.ui-tab .mdi { font-size: 18px; }
.ui-tab__count { color: var(--flw-c-text-subtle); font-size: var(--flw-text-xs); }

/* Umschalter (Raster/Liste, Zeiträume) */
.ui-segment {
	display: inline-flex;
	max-width: 100%;
	gap: 2px;
	padding: 3px;
	overflow-x: auto;
	scrollbar-width: none;
	border-radius: calc(var(--flw-radius-sm) + 3px);
	background: var(--flw-c-surface-2);
}
.ui-segment::-webkit-scrollbar { display: none; }
.ui-segment__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	height: var(--flw-control-sm);
	padding: 0 var(--flw-space-3);
	border: 0;
	border-radius: var(--flw-radius-sm);
	background: none;
	color: var(--flw-c-text-muted);
	font: var(--flw-weight-medium) var(--flw-text-sm)/1 var(--flw-font);
	cursor: pointer;
	transition: background-color var(--flw-transition), color var(--flw-transition);
}
.ui-segment__item:hover { color: var(--flw-c-text); }
.ui-segment__item.is-active,
.ui-segment__item[aria-pressed="true"] {
	background: var(--flw-c-raised);
	color: var(--flw-c-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}

/* Karten: Fläche statt Linie; nur eine sehr zarte Kante */
.ui-card {
	padding: var(--flw-space-5);
	border: 1px solid var(--flw-c-line);
	border-radius: var(--flw-radius-card);
	background: var(--flw-c-surface);
	color: var(--flw-c-text);
}
.ui-card--compact { padding: var(--flw-space-4); }
.ui-card--interactive { display: block; text-decoration: none; transition: background-color var(--flw-transition), border-color var(--flw-transition); }
.ui-card--interactive:hover { border-color: var(--flw-c-line-strong); background: var(--flw-c-surface-2); color: var(--flw-c-text); text-decoration: none; }
.ui-card__title { margin: 0 0 var(--flw-space-1); font-size: var(--flw-text-base); font-weight: var(--flw-weight-semibold); }
.ui-card__text { margin: 0; color: var(--flw-c-text-muted); font-size: var(--flw-text-md); }

/* Formulare */
.ui-field { display: grid; gap: 6px; }
.ui-label { color: var(--flw-c-text); font-size: var(--flw-text-sm); font-weight: var(--flw-weight-semibold); }
.ui-hint { margin: 0; color: var(--flw-c-text-muted); font-size: var(--flw-text-xs); }
.ui-input,
.ui-select,
.ui-textarea {
	width: 100%;
	height: var(--flw-control-md);
	padding: 0 var(--flw-space-3);
	border: 1px solid var(--flw-c-line-strong);
	border-radius: var(--flw-radius-button);
	background: var(--flw-c-input);
	color: var(--flw-c-text);
	font: var(--flw-weight-regular) var(--flw-text-md)/1.4 var(--flw-font);
	transition: border-color var(--flw-transition), box-shadow var(--flw-transition);
}
.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--flw-c-text-subtle); }
.ui-input:hover,
.ui-select:hover,
.ui-textarea:hover { border-color: var(--flw-c-text-subtle); }
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
	border-color: var(--tool-accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tool-accent) 20%, transparent);
}
.ui-textarea { height: auto; min-height: 96px; padding: 10px var(--flw-space-3); line-height: var(--flw-leading-normal); resize: vertical; }
.ui-select {
	padding-right: 36px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--flw-c-text-muted) 50%), linear-gradient(135deg, var(--flw-c-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
	background-repeat: no-repeat;
	background-size: 5px 5px;
	cursor: pointer;
}
.ui-check {
	display: inline-flex;
	align-items: center;
	gap: var(--flw-space-2);
	color: var(--flw-c-text);
	font-size: var(--flw-text-md);
	cursor: pointer;
}
.ui-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--tool-accent); }

/* Badges */
.ui-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--flw-space-1);
	height: 22px;
	padding: 0 var(--flw-space-2);
	border-radius: var(--flw-radius-pill);
	background: var(--flw-c-surface-2);
	color: var(--flw-c-text-muted);
	font-size: var(--flw-text-xs);
	font-weight: var(--flw-weight-semibold);
	line-height: 1;
	white-space: nowrap;
}
.ui-badge--accent { background: color-mix(in srgb, var(--tool-accent) 14%, transparent); color: var(--tool-ink); }
.ui-badge--success { background: color-mix(in srgb, var(--flw-c-success) 14%, transparent); color: var(--flw-c-success); }
.ui-badge--warning { background: color-mix(in srgb, var(--flw-c-warning) 16%, transparent); color: var(--flw-c-warning); }
.ui-badge--danger { background: color-mix(in srgb, var(--flw-c-danger) 14%, transparent); color: var(--flw-c-danger); }

/* Tool-Zeichen: das farbige Icon eines Produkts. Die Icon-Farbe folgt der Startseite (--tool-mark-ink): Weiß auf den
   kräftigen Verläufen, dunkel auf Gold und Grün. */
.ui-tool-mark {
	display: inline-grid;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: var(--flw-radius-button);
	background: var(--tool-gradient);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
	color: var(--tool-mark-ink, var(--tool-on-accent));
	font-size: 22px;
}
.ui-tool-mark--sm { width: 28px; height: 28px; border-radius: var(--flw-radius-sm); font-size: 16px; }

/* Tool-Marke: Icon und Name in Schrift statt eines Bild-Logos (layout/partial_tool_mark.php, Etappe 8). Die Marke ist
   FLW Labs; die Werkzeuge heißen einfach, wie sie heißen. Die Schriftfarbe kommt aus der Umgebung. */
.ui-toolmark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: inherit;
	font-family: var(--flw-font);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
	white-space: nowrap;
}
.ui-toolmark .ui-tool-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 18px; }
.ui-toolmark__name { font-size: 19px; }
.ui-toolmark--sm { gap: 9px; font-weight: 600; letter-spacing: -.01em; }
.ui-toolmark--sm .ui-tool-mark { width: 26px; height: 26px; border-radius: 7px; font-size: 15px; }
.ui-toolmark--sm .ui-toolmark__name { font-size: var(--flw-text-md); }
.ui-toolmark--lg { gap: 16px; font-weight: 800; letter-spacing: -.035em; }
.ui-toolmark--lg .ui-tool-mark { width: 56px; height: 56px; border-radius: 15px; font-size: 30px; }
.ui-toolmark--lg .ui-toolmark__name { font-size: clamp(32px, 3.4vw, 44px); }
.ui-toolmark[hidden] { display: none !important; }
/* Das Icon im Zeichen behält immer seine Farbe und Größe, auch in Links und Menüs, deren Regeln jedes <i> einfärben. */
.ui-tool-mark > i { width: auto !important; color: inherit !important; font-size: inherit !important; line-height: 1; text-shadow: none !important; filter: none !important; }
a:has(> .ui-toolmark) { text-decoration: none; }
/* Ältere Tool-Regeln färben jedes span in Überschriften (z. B. .if-heading h1 span, .pf-heading h1 span): Zeichen und Name bleiben trotzdem. */
.ui-toolmark > .ui-tool-mark { color: var(--tool-mark-ink, var(--tool-on-accent)) !important; }
.ui-toolmark > .ui-toolmark__name { color: inherit !important; }
/* Groß (Überschriften der Tool-Startseiten): der Name in normaler Schriftfarbe, auch wo die Überschrift Akzentfarbe oder Verlaufsschrift trägt. */
.ui-toolmark--lg > .ui-toolmark__name { color: var(--flw-c-text) !important; -webkit-text-fill-color: currentColor; background: none; text-shadow: none; }

/* Wege zum Start: Chips (kompakt) und Karten (Landingpages) */
.ui-chips { display: flex; flex-wrap: wrap; gap: var(--flw-space-2); }
.ui-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--flw-space-2);
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--flw-c-line-strong);
	border-radius: var(--flw-radius-pill);
	background: transparent;
	color: var(--flw-c-text);
	font: var(--flw-weight-medium) var(--flw-text-sm)/1 var(--flw-font);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--flw-transition), background-color var(--flw-transition);
}
.ui-chip .mdi { color: var(--tool-ink); font-size: 17px; }
.ui-chip:hover {
	border-color: color-mix(in srgb, var(--tool-accent) 55%, transparent);
	background: color-mix(in srgb, var(--tool-accent) 8%, transparent);
	color: var(--flw-c-text);
	text-decoration: none;
}
.ui-start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--flw-space-4); }
.ui-start-card {
	display: flex;
	flex-direction: column;
	gap: var(--flw-space-2);
	padding: 20px;
	border: 1px solid var(--flw-c-line);
	border-radius: var(--flw-radius-card);
	background: var(--flw-c-surface);
	color: var(--flw-c-text);
	text-decoration: none;
	transition: border-color var(--flw-transition), transform var(--flw-transition);
}
.ui-start-card:hover {
	border-color: color-mix(in srgb, var(--tool-accent) 45%, transparent);
	color: var(--flw-c-text);
	text-decoration: none;
	transform: translateY(-2px);
}
.ui-start-card__icon {
	display: grid;
	width: 40px;
	height: 40px;
	margin-bottom: var(--flw-space-2);
	place-items: center;
	border-radius: var(--flw-radius-button);
	background: color-mix(in srgb, var(--tool-accent) 14%, transparent);
	color: var(--tool-ink);
	font-size: 22px;
}
.ui-start-card__title { font-size: var(--flw-text-base); font-weight: var(--flw-weight-semibold); }
.ui-start-card__text { color: var(--flw-c-text-muted); font-size: var(--flw-text-sm); }
.ui-start-card__arrow { margin-top: auto; padding-top: var(--flw-space-2); color: var(--flw-c-text-subtle); transition: color var(--flw-transition); }
.ui-start-card:hover .ui-start-card__arrow { color: var(--tool-ink); }

/* Listen: Zeilen ohne Trennlinie, der Hover-Ton reicht */
.ui-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-list__item {
	display: flex;
	align-items: center;
	gap: var(--flw-space-3);
	min-height: 52px;
	padding: var(--flw-space-2) var(--flw-space-3);
	border-radius: var(--flw-radius-button);
	color: var(--flw-c-text);
	text-decoration: none;
	transition: background-color var(--flw-transition);
}
a.ui-list__item:hover { background: var(--flw-c-surface-2); color: var(--flw-c-text); text-decoration: none; }
.ui-list__body { display: grid; flex: 1; min-width: 0; gap: 2px; }
.ui-list__title { overflow: hidden; font-weight: var(--flw-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.ui-list__meta { color: var(--flw-c-text-muted); font-size: var(--flw-text-xs); }

/* Leerzustand */
.ui-empty {
	display: grid;
	justify-items: center;
	gap: var(--flw-space-2);
	padding: var(--flw-space-7) var(--flw-space-5);
	border: 1px dashed var(--flw-c-line-strong);
	border-radius: var(--flw-radius-card);
	color: var(--flw-c-text-muted);
	text-align: center;
}
.ui-empty__icon {
	display: grid;
	width: 48px;
	height: 48px;
	margin-bottom: var(--flw-space-2);
	place-items: center;
	border-radius: var(--flw-radius-card);
	background: var(--flw-c-surface-2);
	color: var(--tool-ink);
	font-size: 24px;
}
.ui-empty__title { margin: 0; color: var(--flw-c-text); font-size: var(--flw-text-base); font-weight: var(--flw-weight-semibold); }
.ui-empty__text { max-width: 42ch; margin: 0 0 var(--flw-space-2); font-size: var(--flw-text-md); }