/* ============================================================================
   G4stro Buttons — eine Buttonklasse fuer alle Pulse-Seiten (04.09.2026, Sascha)

   Entwurf: https://claude.ai/code/artifact/fe084942-0fc3-4c90-9e66-b29eed2b6e79

   Aufbau, den alle Varianten teilen — nur die Werte unterscheiden sich:
     1. Glasflaeche als Diagonalverlauf 135 Grad:
        --g1/--a1 oben links, --g2/--a2 Mitte, --g3/--a3 unten rechts
     2. weisser Lichteinfall oben links (--hl), laeuft nach einem Viertel aus
     3. Innenkanten: hell oben links (--toplight), dunkel unten rechts (--edge)
     4. Lichtschein in Variantenfarbe (--glow) nach unten rechts, ueber den Rand
     5. Hover: der Verlauf blendet aus, der Button fuellt sich gleichmaessig mit
        der Farbe von unten rechts (--fill = --g3/--a3). Dichter wird er nie.

   Neue Buttons:   <button class="ga-btn ga-btn--primary">…</button>
   Varianten:      ga-btn--primary | (ohne = Sekundaer) | ga-btn--danger | ga-btn--ghost
   Groessen:       ga-btn--sm (32) | (ohne = 40) | ga-btn--lg (46) | ga-btn--icon (quadratisch)
   Zustaende:      :hover :active :focus-visible :disabled  .is-loading  .is-on

   Bestehende Buttonklassen (whxs-btn, whxdb-button, whxab-btn, .btn im
   Tischplan, …) werden weiter unten auf dieselben Regeln abgebildet, damit kein
   Markup angefasst werden muss. Die alten Regeln in pulse.css, pulse-bar.css
   und den mu-plugins wurden entfernt und verweisen hierher.

   Wird geladen: whx-pulse-skin.php (nach pulse.css) und
   whx_pulse_skin_leiste_einbinden() (nach pulse-bar.css, Werkzeugseiten).
   ========================================================================== */

:root {
	--ga-btn-glass: .38;                       /* Deckkraft Sekundaer in Ruhe    */
	--ga-btn-r:     12px;                      /* Rundung, entspricht --whxp-radius */
	--ga-btn-blur:  saturate(170%) blur(14px);
	--ga-btn-ease:  var(--whxp-ease, cubic-bezier(.22, 1, .36, 1));
	/* Rot gab es im Pulse-Farbsystem bisher nicht — Wert aus den Tool-Tokens (--ga-danger). */
	--whxp-danger:  #DC2626;
}

/* ---------------------------------------------------------------- Basis --- */
.ga-btn,
body.whx-pulse-skin :is(
	.whxs-btn, .whxvfp-btn, .whxs-glass-btn,
	.whxdb-button, .whxd-button, .whxd-reset, .whxd-button-secondary,
	.whxvfd-manage, .whxvfd-primary, .whxvfd-secondary, .whxvfd-close,
	.whxab-btn, .whxac-btn, .whxmr-btn, .whxrl-btn, .whxta-btn, .whxloc-btn, .whxco-btn,
	.wryx-settings-button, .whx-tool-button,
	.whxp-iconbtn, .whxdb-icon-btn, .ga-icon-btn,
	.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-tools, .whxp-menu-foot-logout,
	.whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close,
	.whxh-btn, .whxg-btn, .whxab-x, .whxoz-btn,
	.tbtn, .btn
) {
	/* Geometrie */
	--h: 40px; --px: 16px; --fs: 14px; --gap: 8px;
	/* Sekundaer = Grundwerte: neutrales Glas, unten rechts einen Hauch kuehler */
	--g1: 255,255,255; --g2: 255,255,255; --g3: 236,240,252;
	--a1: calc(var(--ga-btn-glass) - .06); --a2: var(--ga-btn-glass); --a3: calc(var(--ga-btn-glass) + .12);
	--hl: .38;
	--fill: rgba(var(--g3), var(--a3));
	--toplight: rgba(255,255,255,.60);
	--edge: rgba(66,74,230,.08);
	--line: rgba(22,24,60,.055);
	--line-hover: rgba(79,70,229,.22);
	--ink-c: #0f172a;
	--glow: 96,132,255; --glow-a: .13; --glow-a-hover: .26;
	--ring: rgba(79,70,229,.30);

	--bg:
		linear-gradient(135deg, rgba(255,255,255,var(--hl)) 0%, rgba(255,255,255,calc(var(--hl) * .28)) 26%, rgba(255,255,255,0) 50%),
		linear-gradient(135deg, rgba(var(--g1),var(--a1)) 0%, rgba(var(--g2),var(--a2)) 52%, rgba(var(--g3),var(--a3)) 100%);
	--shadow:
		inset 1px 1px 0 var(--toplight),
		inset -1px -1px 0 var(--edge),
		4px 6px 16px -2px rgba(var(--glow),var(--glow-a));
	--shadow-hover:
		inset 1px 1px 0 var(--toplight),
		inset -1px -1px 0 var(--edge),
		6px 10px 22px -2px rgba(var(--glow),var(--glow-a-hover)),
		2px 3px 6px -3px rgba(var(--glow),calc(var(--glow-a-hover) * .6));
	--shadow-active:
		inset 1px 1px 0 var(--toplight),
		inset -1px -1px 0 var(--edge),
		2px 3px 10px -2px rgba(var(--glow),var(--glow-a-hover));

	appearance: none; -webkit-appearance: none;
	position: relative; isolation: isolate;
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; gap: var(--gap);
	height: var(--h); min-height: 0; padding: 0 var(--px); margin-top: 0;
	border: 1px solid var(--line); border-radius: var(--ga-btn-r);
	background-color: transparent;             /* Ruhe: nur der Verlauf in ::before */
	background-image: none;
	-webkit-backdrop-filter: var(--ga-btn-blur); backdrop-filter: var(--ga-btn-blur);
	color: var(--ink-c);
	font-family: inherit; font-size: var(--fs); font-weight: 600; line-height: 1; letter-spacing: -.005em;
	text-shadow: none; text-align: center;
	white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
	box-shadow: var(--shadow);
	filter: none;
	transition:
		transform .16s var(--ga-btn-ease), box-shadow .2s var(--ga-btn-ease),
		background-color .2s var(--ga-btn-ease), border-color .2s var(--ga-btn-ease), color .2s var(--ga-btn-ease);
}
.ga-btn svg,
body.whx-pulse-skin :is(.whxs-btn, .whxvfp-btn, .whxs-glass-btn, .whxdb-button, .whxd-button, .whxab-btn, .whxac-btn,
	.whxmr-btn, .whxrl-btn, .whxta-btn, .whxloc-btn, .whxco-btn, .whxh-btn, .whxg-btn, .whxab-x, .whxoz-btn, .tbtn, .btn) svg {
	width: 16px; height: 16px; flex: 0 0 auto;
}

/* Verlaufsschicht: liegt ueber der Fuellfarbe und blendet beim Hover aus.
   Verlaeufe sind nicht animierbar, background-color schon — so wird aus dem
   Verlauf ohne Sprung die Vollflaeche. */
.ga-btn::before,
body.whx-pulse-skin :is(
	.whxs-btn, .whxvfp-btn, .whxs-glass-btn,
	.whxdb-button, .whxd-button, .whxd-reset, .whxd-button-secondary,
	.whxvfd-manage, .whxvfd-primary, .whxvfd-secondary, .whxvfd-close,
	.whxab-btn, .whxac-btn, .whxmr-btn, .whxrl-btn, .whxta-btn, .whxloc-btn, .whxco-btn,
	.wryx-settings-button, .whx-tool-button,
	.whxp-iconbtn, .whxdb-icon-btn, .ga-icon-btn,
	.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-tools, .whxp-menu-foot-logout,
	.whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close,
	.whxh-btn, .whxg-btn, .whxab-x, .whxoz-btn,
	.tbtn, .btn
)::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: var(--bg);
	transform: none;
	opacity: 1; transition: opacity .2s var(--ga-btn-ease);
}

/* Ein <input type="submit"> ist ein ersetztes Element und zeichnet kein ::before -
   der Verlauf laege im Leeren, in Ruhe bliebe nur die durchsichtige Flaeche, erst
   der Hover brachte die Fuellfarbe. Fuer Eingabeknoepfe liegt der Verlauf deshalb
   direkt auf dem Element und weicht beim Hover der Fuellung ohne Ueberblendung.
   Betroffen: der Anmelden-Knopf aus wp_login_form() im Login-Skin (Karte 75). */
input.ga-btn { background-image: var(--bg); }
input.ga-btn:hover, input.ga-btn:active, input.ga-btn.is-hover { background-image: none; }

/* Hover: Fuellung, Kontur etwas kraeftiger, Lichtschein laenger, 1 px anheben */
.ga-btn:hover, .ga-btn.is-hover,
body.whx-pulse-skin :is(
	.whxs-btn, .whxvfp-btn, .whxs-glass-btn,
	.whxdb-button, .whxd-button, .whxd-reset, .whxd-button-secondary,
	.whxvfd-manage, .whxvfd-primary, .whxvfd-secondary, .whxvfd-close,
	.whxab-btn, .whxac-btn, .whxmr-btn, .whxrl-btn, .whxta-btn, .whxloc-btn, .whxco-btn,
	.wryx-settings-button, .whx-tool-button,
	.whxp-iconbtn, .whxdb-icon-btn, .ga-icon-btn,
	.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-tools, .whxp-menu-foot-logout,
	.whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close,
	.whxh-btn, .whxg-btn, .whxab-x, .whxoz-btn,
	.tbtn, .btn
):hover {
	background-color: var(--fill);
	border-color: var(--line-hover);
	color: var(--ink-c);
	box-shadow: var(--shadow-hover);
	transform: translateY(-1px);
	text-decoration: none;
	filter: none;
}
.ga-btn:hover::before, .ga-btn.is-hover::before,
.ga-btn:active::before, .ga-btn.is-active::before,
body.whx-pulse-skin :is(
	.whxs-btn, .whxvfp-btn, .whxs-glass-btn,
	.whxdb-button, .whxd-button, .whxd-reset, .whxd-button-secondary,
	.whxvfd-manage, .whxvfd-primary, .whxvfd-secondary, .whxvfd-close,
	.whxab-btn, .whxac-btn, .whxmr-btn, .whxrl-btn, .whxta-btn, .whxloc-btn, .whxco-btn,
	.wryx-settings-button, .whx-tool-button,
	.whxp-iconbtn, .whxdb-icon-btn, .ga-icon-btn,
	.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-tools, .whxp-menu-foot-logout,
	.whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close,
	.whxh-btn, .whxg-btn, .whxab-x, .whxoz-btn,
	.tbtn, .btn
):is(:hover, :active)::before {
	opacity: 0;
}

/* Gedrueckt */
.ga-btn:active, .ga-btn.is-active,
body.whx-pulse-skin :is(
	.whxs-btn, .whxvfp-btn, .whxs-glass-btn,
	.whxdb-button, .whxd-button, .whxd-reset, .whxd-button-secondary,
	.whxvfd-manage, .whxvfd-primary, .whxvfd-secondary, .whxvfd-close,
	.whxab-btn, .whxac-btn, .whxmr-btn, .whxrl-btn, .whxta-btn, .whxloc-btn, .whxco-btn,
	.wryx-settings-button, .whx-tool-button,
	.whxp-iconbtn, .whxdb-icon-btn, .ga-icon-btn,
	.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-tools, .whxp-menu-foot-logout,
	.whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close,
	.whxh-btn, .whxg-btn, .whxab-x, .whxoz-btn,
	.tbtn, .btn
):active {
	background-color: var(--fill);
	border-color: var(--line-hover);
	transform: translateY(0) scale(.98);
	box-shadow: var(--shadow-active);
	transition-duration: .08s;
}

/* Fokus nur bei Tastatur: 3 px Ring in Variantenfarbe */
.ga-btn:focus-visible, .ga-btn.is-focus,
body.whx-pulse-skin :is(
	.whxs-btn, .whxvfp-btn, .whxs-glass-btn,
	.whxdb-button, .whxd-button, .whxd-reset, .whxd-button-secondary,
	.whxvfd-manage, .whxvfd-primary, .whxvfd-secondary, .whxvfd-close,
	.whxab-btn, .whxac-btn, .whxmr-btn, .whxrl-btn, .whxta-btn, .whxloc-btn, .whxco-btn,
	.wryx-settings-button, .whx-tool-button,
	.whxp-iconbtn, .whxdb-icon-btn, .ga-icon-btn,
	.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-tools, .whxp-menu-foot-logout,
	.whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close,
	.whxh-btn, .whxg-btn, .whxab-x, .whxoz-btn,
	.tbtn, .btn
):focus-visible {
	outline: none;
	box-shadow: var(--shadow), 0 0 0 3px var(--ring);
}

/* Deaktiviert */
.ga-btn:disabled, .ga-btn[aria-disabled="true"],
body.whx-pulse-skin :is(
	.whxs-btn, .whxvfp-btn, .whxs-glass-btn,
	.whxdb-button, .whxd-button, .whxd-reset, .whxd-button-secondary,
	.whxvfd-manage, .whxvfd-primary, .whxvfd-secondary, .whxvfd-close,
	.whxab-btn, .whxac-btn, .whxmr-btn, .whxrl-btn, .whxta-btn, .whxloc-btn, .whxco-btn,
	.wryx-settings-button, .whx-tool-button,
	.whxp-iconbtn, .whxdb-icon-btn, .ga-icon-btn,
	.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-tools, .whxp-menu-foot-logout,
	.whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close,
	.whxh-btn, .whxg-btn, .whxab-x, .whxoz-btn,
	.tbtn, .btn
):is(:disabled, [disabled], [aria-disabled="true"], .is-disabled) {
	opacity: .5; cursor: not-allowed; pointer-events: none;
	transform: none; -webkit-backdrop-filter: none; backdrop-filter: none;
	box-shadow: inset 1px 1px 0 var(--toplight);
}

/* ------------------------------------------------------------- Primaer --- */
.ga-btn--primary,
body.whx-pulse-skin :is(
	.whxs-btn-primary, .whxvfp-btn-primary, .whxdb-button-primary,
	.whxvfd-manage, .whxvfd-primary,
	.whxab-btn--primary, .whxac-btn--primary, .whxmr-btn--primary, .whxrl-btn--primary,
	.whxta-btn--primary, .whxloc-btn--primary, .whxco-btn--primary,
	.wryx-settings-button,
	.whxs-glass-btn, .whx-tool-button,
	.whxp-menu-foot-tools, .whxoz-btn--primary,
	.btn.primary
) {
	--g1: 96,132,255; --g2: 80,100,250; --g3: 66,74,230;
	--a1: .78; --a2: .84; --a3: .90;      /* Hover fuellt mit .90, nie deckend */
	--hl: .18;
	--toplight: rgba(255,255,255,.36);
	--edge: rgba(66,74,230,.28);
	--line: rgba(255,255,255,.22); --line-hover: rgba(255,255,255,.34);
	--ink-c: #ffffff;
	--glow: 80,100,250; --glow-a: .30; --glow-a-hover: .46;
	text-shadow: 0 1px 2px rgba(30,30,120,.28);
}

/* -------------------------------------------------------------- Gefahr --- */
.ga-btn--danger,
body.whx-pulse-skin :is(
	.whxdb-button-danger, .whxac-btn--danger, .whxrl-btn--warn, .whxloc-btn--danger, .whxab-x,
	.btn.danger
) {
	--g1: 248,113,113; --g2: 239,68,68; --g3: 220,38,38;
	--a1: .20; --a2: .28; --a3: .38;      /* .38 ist die Obergrenze, mehr Rot vertraegt die dunkelrote Schrift nicht */
	--hl: .30;
	--toplight: rgba(255,255,255,.50);
	--edge: rgba(185,28,28,.20);
	--line: rgba(220,38,38,.18); --line-hover: rgba(220,38,38,.30);
	--ink-c: #991B1B;
	--glow: 220,38,38; --glow-a: .14; --glow-a-hover: .30;
	--ring: rgba(220,38,38,.28);
}

/* --------------------------------------------------------------- Ghost --- */
.ga-btn--ghost,
body.whx-pulse-skin :is(.btn.ghost, .whxdb-icon-btn, .ga-icon-btn, .whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close) {
	--a1: 0; --a2: 0; --a3: 0; --hl: 0; --line: transparent;
	--toplight: transparent; --edge: transparent;
	--glow-a: 0; --glow-a-hover: .20;
	--fill: rgba(236,240,252, calc(var(--ga-btn-glass) + .12));   /* Hover: wie Sekundaer gefuellt */
	--line-hover: rgba(22,24,60,.055);
	--ink-c: #475569;
	-webkit-backdrop-filter: none; backdrop-filter: none;
}
.ga-btn--ghost:hover, .ga-btn--ghost.is-hover,
body.whx-pulse-skin :is(.btn.ghost, .whxdb-icon-btn, .ga-icon-btn, .whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close):hover {
	color: #0f172a; --toplight: rgba(255,255,255,.60);
	-webkit-backdrop-filter: var(--ga-btn-blur); backdrop-filter: var(--ga-btn-blur);
}
body.whx-pulse-skin .whxdb-icon-btn-danger:hover { color: #B91C1C; --glow: 220,38,38; }

/* ------------------------------------------------- Eingeschaltet (Toggle) --- */
.ga-btn.is-on,
body.whx-pulse-skin .tbtn.mon {
	--g1: 96,132,255; --g2: 80,100,250; --g3: 66,74,230;
	--a1: .12; --a2: .16; --a3: .22;
	--line: rgba(79,70,229,.30); --line-hover: rgba(79,70,229,.45);
	--ink-c: #4338CA;
}

/* ------------------------------------------------------------- Groessen --- */
.ga-btn--sm,
body.whx-pulse-skin :is(.whxvfp-btn, .tbtn, .whxab-x) {
	--h: 32px; --px: 12px; --fs: 13px; --gap: 6px;
	border-radius: calc(var(--ga-btn-r) - 2px);
}
.ga-btn--sm svg,
body.whx-pulse-skin :is(.whxvfp-btn, .tbtn, .whxab-x) svg { width: 14px; height: 14px; }

.ga-btn--lg {
	--h: 46px; --px: 20px; --fs: 15px; --gap: 10px;
	border-radius: calc(var(--ga-btn-r) + 2px);
}
.ga-btn--lg svg { width: 18px; height: 18px; }

/* Nur Icon: quadratisch */
.ga-btn--icon,
body.whx-pulse-skin :is(.whxp-iconbtn, .whxvfd-close, .tbtn.icon-only) { --px: 0; width: var(--h); }
body.whx-pulse-skin .whxp-iconbtn svg { width: 18px; height: 18px; }
body.whx-pulse-skin .whxvfd-close { font-size: 22px; }
body.whx-pulse-skin .tbtn.icon-only { width: 36px; --h: 36px; }
/* kleine Icon-Knoepfe in Widget-Koepfen und im Personalplaner */
body.whx-pulse-skin :is(.whxdb-icon-btn, .ga-icon-btn) {
	--h: 30px; --px: 0; width: var(--h);
	border-radius: calc(var(--ga-btn-r) - 3px);
	display: inline-flex;
}
body.whx-pulse-skin .whxdb-icon-btn svg { width: 14px; height: 14px; }

/* Huelle (Karte 106, 05.09.2026): der Menuefuss hat fuenf quadratische
   Knoepfe in einer Reihe - Profil, Erweitern, Einstellungen, Tools, Abmelden.
   Vorher 42/38/40 gemischt und drei eigene Rezepte; jetzt alle 40 wie die
   Topbar-Icons. Tools bleibt der einzige Primaere in der Reihe (war vorher
   der Markenverlauf). Schliessen 34, Schliessen im Tool-Waehler 28, Kachel-Entfernen 24 - dass Entfernen
   erst beim Hover der Kachel erscheint, regelt weiter pulse-bar.css/pulse.css,
   weil es die Kachel betrifft, nicht den Knopf. */
body.whx-pulse-skin :is(.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-tools, .whxp-menu-foot-logout) {
	--px: 0; width: var(--h); flex-shrink: 0;
}
body.whx-pulse-skin :is(.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-logout) svg { width: 20px; height: 20px; }
body.whx-pulse-skin .whxp-menu-foot-tools svg { width: 18px; height: 18px; }
body.whx-pulse-skin .whxp-menu-close { --h: 34px; --px: 0; width: var(--h); border-radius: calc(var(--ga-btn-r) - 2px); }
body.whx-pulse-skin .whxp-menu-close svg { width: 16px; height: 16px; }
/* Schliessen im Tool-Waehler (Modal): 28, wie vorher. */
body.whx-pulse-skin .whxp-menu-tool-picker-close { --h: 28px; --px: 0; width: var(--h); flex-shrink: 0; border-radius: 8px; }
body.whx-pulse-skin .whxp-menu-tool-picker-close svg { width: 12px; height: 12px; }
body.whx-pulse-skin .whxp-menu-tool-tile-rm {
	--h: 24px; --px: 0; width: var(--h); margin-left: auto; border-radius: 8px; display: inline-flex;
	transition: opacity .18s, transform .16s var(--ga-btn-ease), box-shadow .2s var(--ga-btn-ease),
		background-color .2s var(--ga-btn-ease), border-color .2s var(--ga-btn-ease), color .2s var(--ga-btn-ease);
}
body.whx-pulse-skin .whxp-menu-tool-tile-rm svg { width: 12px; height: 12px; }
/* Abmelden und Kachel-Entfernen: neutral in Ruhe, rot erst beim Hover (wie .whxdb-icon-btn-danger). */
body.whx-pulse-skin :is(.whxp-menu-foot-logout, .whxp-menu-tool-tile-rm):hover { color: #B91C1C; --glow: 220,38,38; --line-hover: rgba(220,38,38,.30); }

/* ------------------------------------------------------- Telefon --- */
/* Mitarbeiter-App /meine-app/ (Karte 74). Hoehe 52 von Sascha am
   04.09.2026 gewaehlt: die App lag mit 16 px Innenabstand und 16 px Schrift
   rechnerisch schon bei rund 51 px, der Wechsel faellt in der Hoehe also
   nicht auf. Gleiches Glas, gleiche Lichtquelle - nur vollbreit, groesser
   und etwas schwerer gesetzt, weil ein Daumen groeber trifft als ein Zeiger. */
.ga-btn--tel {
	--h: 52px; --px: 18px; --fs: 16px; --gap: 9px;
	font-weight: 700;
	border-radius: calc(var(--ga-btn-r) + 2px);
}
.ga-btn--tel svg { width: 18px; height: 18px; }

/* Kleine Telefon-Variante fuer zwei bis drei Knoepfe nebeneinander.
   44 px ist die kleinste Flaeche, die ein Daumen zuverlaessig trifft. */
.ga-btn--tel-sm {
	--h: 44px; --px: 12px; --fs: 13.5px; --gap: 6px;
	font-weight: 700;
	border-radius: var(--ga-btn-r);
}
.ga-btn--tel-sm svg { width: 16px; height: 16px; }

/* Ueber die volle Breite, der Regelfall am Telefon. */
.ga-btn--block { width: 100%; }

/* Erfolg: gleiche Bauweise wie Gefahr, nur gruen. Die Schrift bleibt
   dunkelgruen, weil die Flaeche wie bei Gefahr hell bleibt. */
.ga-btn--ok {
	--g1: 134,239,172; --g2: 74,222,128; --g3: 34,197,94;
	--a1: .20; --a2: .28; --a3: .38;
	--hl: .30;
	--toplight: rgba(255,255,255,.50);
	--edge: rgba(21,128,61,.20);
	--line: rgba(22,163,74,.18); --line-hover: rgba(22,163,74,.30);
	--ink-c: #166534;
	--glow: 34,197,94; --glow-a: .14; --glow-a-hover: .30;
	--ring: rgba(34,197,94,.28);
}

/* Warnung/Gelb (Karte 124, 06.09.2026): dritte helle Variante neben Gefahr
   und Erfolg, gleiche Bauweise. Gelb ist im Statussystem "startet bald" bzw.
   "eingetroffen"; im Tischplan traegt "Aendern" diese Farbe. Schrift dunkles
   Bernstein, weil die Flaeche hell bleibt. */
.ga-btn--warn,
body.whx-pulse-skin .btn.warn {
	--g1: 253,224,71; --g2: 250,204,21; --g3: 234,179,8;
	--a1: .20; --a2: .28; --a3: .38;
	--hl: .30;
	--toplight: rgba(255,255,255,.50);
	--edge: rgba(161,98,7,.20);
	--line: rgba(202,138,4,.18); --line-hover: rgba(202,138,4,.30);
	--ink-c: #854D0E;
	--glow: 202,138,4; --glow-a: .14; --glow-a-hover: .30;
	--ring: rgba(202,138,4,.28);
}

/* ---------------------------------------------- Sonderfaelle der Aliase --- */
/* Werkzeugkarten: voller Breite, 52 px, wie bisher */
body.whx-pulse-skin .whx-tool-button {
	--h: 52px; --px: 20px; --fs: 15px; --gap: 10px;
	width: 100%; border-radius: calc(var(--ga-btn-r) + 4px);
	overflow: visible;
}
body.whx-pulse-skin .whx-tool-button svg { width: 18px; height: 18px; flex: none; }
body.whx-pulse-skin .whx-tool-button::after { content: none; }
/* Glas-CTA in den Hub-Karten: Abstand nach oben bleibt, Pfeil wandert weiter */
body.whx-pulse-skin .whxs-glass-btn { margin-top: 1rem; overflow: visible; }
body.whx-pulse-skin .whxs-glass-btn .whxs-glass-arrow { transition: transform .28s var(--ga-btn-ease); }
body.whx-pulse-skin .whxs-glass-btn:hover .whxs-glass-arrow { transform: translateX(3px); }
/* Einstellungsseiten: Abstand nach oben bleibt */
body.whx-pulse-skin .wryx-settings-button { margin-top: 20px; }

/* ---------------------------------------------------------------- Laden --- */
.ga-btn.is-loading,
body.whx-pulse-skin .whxs-btn.is-saving {
	pointer-events: none; color: transparent !important; text-shadow: none;
}
.ga-btn.is-loading::after,
body.whx-pulse-skin .whxs-btn.is-saving::after {
	content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
	background: none; inset: auto;
	animation: ga-btn-spin .7s linear infinite;
}
.ga-btn:not(.ga-btn--primary).is-loading::after { border-color: rgba(15,23,42,.18); border-top-color: #4F46E5; }
@keyframes ga-btn-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- Bewegung --- */
@media (prefers-reduced-motion: reduce) {
	.ga-btn, .ga-btn::before, .ga-btn:hover, .ga-btn:active,
	body.whx-pulse-skin :is(
		.whxs-btn, .whxvfp-btn, .whxs-glass-btn,
		.whxdb-button, .whxd-button, .whxd-reset, .whxd-button-secondary,
		.whxvfd-manage, .whxvfd-primary, .whxvfd-secondary, .whxvfd-close,
		.whxab-btn, .whxac-btn, .whxmr-btn, .whxrl-btn, .whxta-btn, .whxloc-btn, .whxco-btn,
		.wryx-settings-button, .whx-tool-button,
		.whxp-iconbtn, .whxdb-icon-btn, .ga-icon-btn,
		.whxp-menu-foot-user, .whxp-menu-foot-add, .whxp-menu-foot-settings, .whxp-menu-foot-tools, .whxp-menu-foot-logout,
		.whxp-menu-close, .whxp-menu-tool-tile-rm, .whxp-menu-tool-picker-close,
		.whxh-btn, .whxg-btn, .whxab-x, .whxoz-btn,
		.tbtn, .btn
	), body.whx-pulse-skin :is(.whxs-btn, .whxdb-button, .tbtn, .btn)::before {
		transition: none; transform: none;
	}
	.ga-btn.is-loading::after { animation-duration: 1.4s; }
}