/*
 * Herzwerk-Share – Frontend-Styles
 * Gebaut nach der Design-Vorlage "Social Share Buttons"
 * (HOCHiX / Vielbegabungskongress Design System).
 *
 * Björn Fischer · https://Herzwerk-Academy.de
 */

.hws {
	/* Design-Tokens – per CSS überall überschreibbar. */
	--hws-akzent: #ff5a19;
	--hws-eyebrow: #af38ee;
	--hws-text: #2d2d2d;
	--hws-gedaempft: #5a5a5a;
	--hws-rahmen: #e4e2de;
	--hws-flaeche: #ffffff;
	--hws-karte: #ecebe8;
	--hws-farbe: #1f3a5f;
	--hws-verlauf: 135deg, #ff5a19 0%, #ff161f 20%, #ff00ff 50%, #af38ee 75%, #4d38ee 100%;
	--hws-kurve: cubic-bezier(0.2, 0.6, 0.2, 1);

	/* Geometrie – wird von den Größenklassen gesetzt (mittel = Vorlage 1:1). */
	--hws-kreis: 56px;
	--hws-icon: 22px;
	--hws-schrift: 18px;
	--hws-polster-y: 14px;
	--hws-polster-r: 22px;
	--hws-polster-l: 16px;
	--hws-luecke: 12px;
	--hws-abstand: 16px;
	--hws-radius: 8px;
	--hws-eyebrow-schrift: 16px;
	--hws-titel: clamp(30px, 3.8vw, 46px);
	--hws-unterzeile: 20px;

	display: block;
	margin: 0 0 1.5em;
	max-width: 100%;
	font-family: var(--hws-schriftart, inherit);
	color: var(--hws-text);
}

/* ---------- Kopfblock: Eyebrow, Überschrift, Unterzeile ---------- */

.hws .hws__kopf {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 68ch;
	margin: 0 0 32px;
}

.hws .hws__eyebrow {
	margin: 0;
	padding: 0;
	font-size: var(--hws-eyebrow-schrift);
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--hws-eyebrow);
}

.hws .hws__ueberschrift {
	margin: 0;
	padding: 0;
	font-size: var(--hws-titel);
	line-height: 1.15;
	font-weight: 600;
	color: var(--hws-text);
	text-wrap: pretty;
}

.hws .hws__unterzeile {
	margin: 0;
	padding: 0;
	font-size: var(--hws-unterzeile);
	line-height: 1.55;
	color: var(--hws-gedaempft);
	text-wrap: pretty;
}

/* ---------- Karte ---------- */

.hws--karte {
	background: var(--hws-karte);
	border-radius: 16px;
	padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 32px);
}

.hws--karte .hws__kopf {
	margin-bottom: 24px;
}

/* ---------- Liste ---------- */

.hws .hws__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hws-abstand);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hws .hws__liste > .hws__item {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 100%;
}

.hws .hws__liste > .hws__item::before,
.hws .hws__liste > .hws__item::marker {
	content: none;
}

/* ---------- Button ---------- */

.hws .hws__btn {
	--hws-aktiv: var(--hws-kanal, var(--hws-farbe));

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hws-luecke);
	box-sizing: border-box;
	padding: var(--hws-polster-y) var(--hws-polster-r) var(--hws-polster-y) var(--hws-polster-l);
	border: 1px solid transparent;
	border-radius: var(--hws-radius);
	background: var(--hws-flaeche);
	color: var(--hws-text);
	font-family: inherit;
	font-size: var(--hws-schrift);
	font-weight: 500;
	line-height: 1.1;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(45, 45, 45, 0.06);
	position: relative;
	top: 0;
	cursor: pointer;
	transition:
		top 250ms var(--hws-kurve),
		box-shadow 250ms var(--hws-kurve),
		background 250ms var(--hws-kurve),
		border-color 250ms var(--hws-kurve),
		color 250ms var(--hws-kurve),
		filter 250ms var(--hws-kurve);
}

.hws .hws__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 90, 25, 0.25);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hws-akzent) 25%, transparent);
}

.hws .hws__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--hws-icon);
	height: var(--hws-icon);
}

.hws .hws__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hws .hws__label {
	display: inline-block;
	white-space: nowrap;
}

/* ---------- Bewegung (Vorlage) ----------
 * Auftritt: 400 ms, Versatz 70 ms je Button.
 * Ruhe-Welle: alle 9 s um 4 px, Versatz 120 ms.
 * Hover hebt über `top`, damit er nicht mit der Welle kollidiert.
 */

@keyframes hws-auftritt {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hws-welle {
	0%,
	88%,
	100% {
		transform: translateY(0);
	}

	94% {
		transform: translateY(-4px);
	}
}

.hws--animation .hws__btn {
	animation:
		hws-auftritt 400ms var(--hws-kurve) both calc(var(--hws-i, 0) * 70ms),
		hws-welle 9s var(--hws-kurve) calc(1200ms + var(--hws-i, 0) * 120ms) infinite;
}

/* ---------- Darstellung ---------- */

.hws--layout-icon .hws__btn {
	width: var(--hws-kreis);
	height: var(--hws-kreis);
	min-width: var(--hws-kreis);
	padding: 0;
}

.hws--layout-label .hws__btn {
	padding-left: var(--hws-polster-r);
}

.hws--layout-label .hws__icon,
.hws--layout-icon .hws__label {
	display: none;
}

/* ---------- Stil: Hell mit Akzent-Hover (Vorlage) ---------- */

.hws--stil-hell .hws__btn {
	background: var(--hws-flaeche);
	border-color: var(--hws-rahmen);
	color: var(--hws-text);
}

.hws--stil-hell .hws__btn:hover,
.hws--stil-hell .hws__btn:focus {
	top: -5px;
	box-shadow: 0 12px 32px rgba(45, 45, 45, 0.14);
	background: var(--hws-akzent);
	border-color: var(--hws-akzent);
	color: #fff;
}

/* ---------- Stil: Signatur-Verlauf (Vorlage) ----------
 * Der Verlauf läuft einmal durch die ganze Reihe; jeder Button
 * zeigt seinen Ausschnitt (--hws-pos), Breite kommt aus PHP.
 */

/*
 * --hws-verlauf-breite setzt PHP nur, wenn die Reihe wirklich geschnitten
 * werden kann (runde Icon-Buttons mit bekannter Breite). Sonst greift der
 * Rückfall 100%: dann trägt jeder Button den kompletten Verlauf.
 */
.hws--stil-verlauf .hws__btn {
	border-color: transparent;
	color: #fff;
	background-image: linear-gradient(var(--hws-verlauf));
	background-size: var(--hws-verlauf-breite, 100%) 100%;
	background-position: var(--hws-pos, 0) 0;
	background-repeat: no-repeat;
}

.hws--stil-verlauf.hws--richtung-vertikal .hws__btn {
	background-size: 100% var(--hws-verlauf-breite, 100%);
	background-position: 0 var(--hws-pos, 0);
}

.hws--stil-verlauf .hws__btn:hover,
.hws--stil-verlauf .hws__btn:focus {
	top: -4px;
	box-shadow: 0 14px 34px rgba(45, 45, 45, 0.22);
	filter: saturate(1.08) brightness(1.06);
	color: #fff;
}

/* ---------- Stil: Kanalfarben ---------- */

.hws--stil-mono .hws__btn {
	--hws-aktiv: var(--hws-farbe);
}

.hws--stil-voll .hws__btn,
.hws--stil-mono .hws__btn {
	background: var(--hws-aktiv);
	border-color: transparent;
	color: #fff;
}

.hws--stil-soft .hws__btn {
	background: rgba(0, 0, 0, 0.07);
	background: color-mix(in srgb, var(--hws-aktiv) 14%, transparent);
	border-color: transparent;
	color: var(--hws-aktiv);
}

.hws--stil-outline .hws__btn {
	background: transparent;
	border-color: var(--hws-aktiv);
	color: var(--hws-aktiv);
}

.hws--stil-voll .hws__btn:hover,
.hws--stil-voll .hws__btn:focus,
.hws--stil-mono .hws__btn:hover,
.hws--stil-mono .hws__btn:focus {
	top: -5px;
	box-shadow: 0 12px 32px rgba(45, 45, 45, 0.14);
	color: #fff;
	filter: brightness(1.08);
}

.hws--stil-soft .hws__btn:hover,
.hws--stil-soft .hws__btn:focus,
.hws--stil-outline .hws__btn:hover,
.hws--stil-outline .hws__btn:focus {
	top: -5px;
	box-shadow: 0 12px 32px rgba(45, 45, 45, 0.14);
	background: var(--hws-aktiv);
	border-color: var(--hws-aktiv);
	color: #fff;
}

/* ---------- Form ---------- */

.hws--form-rund {
	--hws-radius: 999px;
}

.hws--form-abgerundet {
	--hws-radius: 8px;
}

.hws--form-eckig {
	--hws-radius: 0;
}

/* ---------- Größe (mittel = Vorlage 1:1) ---------- */

.hws--groesse-klein {
	--hws-kreis: 44px;
	--hws-icon: 18px;
	--hws-schrift: 15px;
	--hws-polster-y: 10px;
	--hws-polster-r: 16px;
	--hws-polster-l: 12px;
	--hws-luecke: 9px;
	--hws-abstand: 12px;
	--hws-eyebrow-schrift: 14px;
	--hws-titel: clamp(24px, 3vw, 34px);
	--hws-unterzeile: 17px;
}

.hws--groesse-mittel {
	--hws-kreis: 56px;
	--hws-icon: 22px;
	--hws-schrift: 18px;
	--hws-polster-y: 14px;
	--hws-polster-r: 22px;
	--hws-polster-l: 16px;
	--hws-luecke: 12px;
	--hws-abstand: 16px;
	--hws-eyebrow-schrift: 16px;
	--hws-titel: clamp(30px, 3.8vw, 46px);
	--hws-unterzeile: 20px;
}

.hws--groesse-gross {
	--hws-kreis: 64px;
	--hws-icon: 24px;
	--hws-schrift: 20px;
	--hws-polster-y: 17px;
	--hws-polster-r: 26px;
	--hws-polster-l: 20px;
	--hws-luecke: 14px;
	--hws-abstand: 18px;
	--hws-eyebrow-schrift: 18px;
	--hws-titel: clamp(34px, 4.4vw, 54px);
	--hws-unterzeile: 22px;
}

/* Kompakte Reihe steht in der Vorlage etwas enger. */
.hws--stil-verlauf.hws--layout-icon {
	--hws-abstand: 14px;
}

.hws--stil-verlauf.hws--layout-icon.hws--groesse-klein {
	--hws-abstand: 10px;
}

.hws--stil-verlauf.hws--layout-icon.hws--groesse-gross {
	--hws-abstand: 16px;
}

/* ---------- Ausrichtung ---------- */

.hws--ausrichtung-links .hws__liste {
	justify-content: flex-start;
}

.hws--ausrichtung-mitte .hws__liste {
	justify-content: center;
}

.hws--ausrichtung-mitte .hws__kopf {
	align-items: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.hws--ausrichtung-rechts .hws__liste {
	justify-content: flex-end;
}

.hws--ausrichtung-rechts .hws__kopf {
	align-items: flex-end;
	text-align: right;
	margin-left: auto;
}

/* ---------- Anordnung ---------- */

.hws--richtung-vertikal .hws__liste {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

.hws--richtung-vertikal .hws__item {
	width: 100%;
}

.hws--richtung-vertikal .hws__btn {
	width: 100%;
	min-width: 0;
	justify-content: center;
}

/* Nur-Icon-Buttons bleiben auch untereinander rund – sonst zerfließt
 * der Signatur-Verlauf über die volle Breite. */
.hws--richtung-vertikal.hws--layout-icon .hws__liste {
	align-items: flex-start;
}

.hws--richtung-vertikal.hws--layout-icon.hws--ausrichtung-mitte .hws__liste {
	align-items: center;
}

.hws--richtung-vertikal.hws--layout-icon.hws--ausrichtung-rechts .hws__liste {
	align-items: flex-end;
}

.hws--richtung-vertikal.hws--layout-icon .hws__item {
	width: auto;
}

.hws--richtung-vertikal.hws--layout-icon .hws__btn {
	width: var(--hws-kreis);
}

.hws--richtung-vertikal.hws--ausrichtung-links .hws__btn {
	justify-content: flex-start;
	padding-left: var(--hws-polster-l);
}

.hws--richtung-vertikal.hws--ausrichtung-rechts .hws__btn {
	justify-content: flex-end;
}

/* ---------- Rücksicht auf Bewegungsempfindlichkeit ---------- */

@media (prefers-reduced-motion: reduce) {
	.hws .hws__btn,
	.hws--animation .hws__btn {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.hws .hws__btn:hover,
	.hws .hws__btn:focus {
		top: 0;
	}
}