@charset "UTF-8";
/* CSS Document */

/* [Claude 2026-09-01] .ElementFooter - Buttontext + Icon, s. Element-Bauplan Abschnitt 6/7/9.
   Farbzuordnung (Buttontext + Icon identisch):
   Mit Kasten: Kasten-Hintergrund=ci, Text/Glyphe=bg. Hover: die echten -hover-Rollenwerte aus
   dem Tab "Farben Hover" (--card-ci-hover/--card-bg-hover), kein hart codierter Tausch der
   Normal-Werte.
   Ohne Kasten: kein Kasten, Text/Glyphe=ci direkt, Hover=ci-hover. */

/* [Claude 2026-08-21] Kundenwunsch: kein Abstand zwischen Buttontext- und Icon-Element. */
.ElementFooter{
	gap: 0;
}

.ElementFooterBtnText{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: background-color 0.1s linear, border-radius 0.1s linear;
}
.ElementFooterBtnLabel{
	margin: 0;
	/* [Claude 2026-08-21, Bugfix] Die Textfarben-Transition stand vorher auf .ElementFooterBtnText
	   selbst - dort hat "color" aber nie einen eigenen Wert (nur das Label hat color gesetzt), war
	   also wirkungslos. Text sprang beim Hover hart um statt zu faden, waehrend Hintergrund/Radius
	   sauber transitionierten. Jetzt hier, wo die Farbe tatsaechlich wechselt. */
	transition: color 0.1s linear;
}
.ElementFooterBtnText-boxed .ElementFooterBtnLabel{
	color: var(--card-bg);
	padding: calc(var(--space-xxs) * 0.5) var(--space-s);
}
.ElementFooterBtnText-bare .ElementFooterBtnLabel{
	color: var(--card-ci);
}
.Element:hover .ElementFooterBtnText-bare .ElementFooterBtnLabel{
	color: var(--card-ci-hover, var(--card-ci));
}
.ElementFooterBtnText-boxed{
	background-color: var(--card-ci);
	/* [Claude 2026-09-01, Kundenwunsch] Normalzustand jetzt rund (DREIFACHER globaler Eckenradius,
	   s. Kommentar bei der Hover-Regel weiter unten), Hover wird eckig - umgekehrt zur vorherigen
	   "eckig zu rund"-Variante. Breakpoint-Werte s. Media Queries am Dateiende. */
	border-radius: calc(var(--cor-desk) * 3vw);
}
.Element:hover .ElementFooterBtnText-boxed{
	background-color: var(--card-ci-hover, var(--card-ci));
}
.Element:hover .ElementFooterBtnText-boxed .ElementFooterBtnLabel{
	color: var(--card-bg-hover, var(--card-bg));
}

.ElementFooterIcon{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.ElementFooterIcon .PathCol{
	/* [Claude 2026-08-21, Bugfix] War 0.2s ease - lief spuerbar anders (laenger, andere Kurve) als
	   die 0.1s linear von Buttontext. Angeglichen, damit beide Footer-Elemente beim Hover gleich
	   schnell/gleich weich wirken.
	   [Claude 2026-09-05, Bugfix] "transform"/"stroke-dashoffset" ergaenzt - diese Regel hat durch
	   die zwei Klassen (.ElementFooterIcon .PathCol) hoehere Spezifitaet als JEDE der sechs
	   Icon-eigenen .PathCol-Transition-Regeln (Pfeil/Chevron/Plus/Minus/Icon-Plus/Kreis-Plus, alle
	   block-element-*-btn.css) und hat deren komplette transition-Shorthand ueberschrieben, nicht
	   nur die stroke-Dauer - jede Wachsen-/Entrollen-Animation lief dadurch im Footer-Icon hart/
	   ohne Uebergang statt weich. Dauer/Kurve hier identisch zu den Icon-eigenen Regeln halten,
	   sonst weicht das Footer-Icon wieder unbemerkt vom Rest ab. */
	transition: stroke 0.1s linear, transform 0.35s ease-out, stroke-dashoffset 0.3s ease;
}

/* [Claude 2026-09-01] Icon-Groesse ("Icon-Größe"-Feld, s. card-footer.php) - ueberschreibt die
   sitesweite Fixgroesse aus css/buttons/block-element-btn.css (.BtnIconGrid) immer
   (.ElementFooterIcon-scaled-Klasse + Inline-Custom-Property "--icon-size-factor", s.
   card-footer.php). "M" (Standard) = Faktor 1 = identisch zur bisherigen Fixgroesse, XS/S kleiner,
   L/XL groesser - Faktor der jeweiligen globalen Padding-Groesse (--pad-desk/-pad/-phone).
   Hoehere Spezifitaet als ".BtnIconGrid{width:...}" (zwei Klassen statt einer) gewinnt
   unabhaengig vom Breakpoint, kein !important noetig. */
.ElementFooterIcon-scaled .BtnIconGrid{
	width: calc(var(--pad-desk) * var(--icon-size-factor, 1) * 1vw);
	height: calc(var(--pad-desk) * var(--icon-size-factor, 1) * 1vw);
}
@media screen and (max-width: 956px) {
.ElementFooterIcon-scaled .BtnIconGrid{
	width: calc(var(--pad-pad) * var(--icon-size-factor, 1) * 1vw);
	height: calc(var(--pad-pad) * var(--icon-size-factor, 1) * 1vw);
}
}
@media screen and (max-width: 720px) {
.ElementFooterIcon-scaled .BtnIconGrid{
	width: calc(var(--pad-phone) * var(--icon-size-factor, 1) * 1vw);
	height: calc(var(--pad-phone) * var(--icon-size-factor, 1) * 1vw);
}
}
.ElementFooterIcon-boxed .PathCol{
	stroke: var(--card-bg);
}
.ElementFooterIcon-bare .PathCol{
	stroke: var(--card-ci);
}
.Element:hover .ElementFooterIcon-bare .PathCol{
	stroke: var(--card-ci-hover, var(--card-ci));
}
.ElementFooterIcon-boxed{
	background-color: var(--card-ci);
	/* [Claude 2026-09-01, Kundenwunsch] s. Kommentar bei .ElementFooterBtnText-boxed - Normalzustand
	   jetzt rund. */
	border-radius: calc(var(--cor-desk) * 3vw);
	padding: var(--space-xs);
	/* [Claude 2026-08-21, Bugfix] "background-color" fehlte hier - Icon-Hintergrund sprang beim
	   Hover hart um, waehrend der Buttontext-Hintergrund weich faded (s. .ElementFooterBtnText
	   oben). Jetzt gleiche Eigenschaft/Dauer/Kurve wie dort. */
	transition: background-color 0.1s linear, border-radius 0.1s linear;
}
.Element:hover .ElementFooterIcon-boxed{
	background-color: var(--card-ci-hover, var(--card-ci));
}
.Element:hover .ElementFooterIcon-boxed .PathCol{
	stroke: var(--card-bg-hover, var(--card-bg));
}

/* [Claude 2026-09-01, Kundenwunsch] Rund-zu-eckig-Animation bei Hover (umgekehrt zur vorherigen
   "eckig zu rund"-Variante): Normalzustand ist jetzt rund (DREIFACHER globaler Eckenradius,
   --cor-desk/-pad/-phone aus general-css-settings.php, s. oben), Hover wird eckig (0). Gilt fuer
   Buttontext-Pille und (falls "Mit Kasten" gewaehlt) Icon-Pille. */
.BtnOver:hover .ElementFooterBtnText-boxed,
.BtnOver:hover .ElementFooterIcon-boxed{
	border-radius: 0;
}

/* [Claude 2026-09-01, Kundenwunsch] Buttontext + Icon beide "Mit Kasten", Ausrichtung nicht
   "Verteilt" (.ElementFooter-squared-inner, s. card-footer.php) - die innen aneinanderstossenden
   Ecken (Buttontext rechts, Icon links - Reihenfolge ist immer Buttontext->Icon) bleiben eckig,
   wirkt dann wie eine durchgehende Pille statt zwei einzelnen Kaesten. Gilt jetzt im Normalzustand
   (rund), da beim Hover ohnehin alle Ecken eckig sind (s. oben) und die Sonderregel dort
   ueberfluessig waere. Bei "Verteilt" fehlt die Klasse, hier greift nichts. */
.ElementFooter-squared-inner .ElementFooterBtnText-boxed{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.ElementFooter-squared-inner .ElementFooterIcon-boxed{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
@media screen and (max-width: 956px) {
	.ElementFooterBtnText-boxed,
	.ElementFooterIcon-boxed{
		border-radius: calc(var(--cor-pad) * 3vw);
	}
}
@media screen and (max-width: 720px) {
	.ElementFooterBtnText-boxed,
	.ElementFooterIcon-boxed{
		border-radius: calc(var(--cor-phone) * 3vw);
	}
}