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



/* [Claude 2026-08-16] Icon von 5 animierten Pixel-Frames auf ein einziges statisches SVG
   (schlanker Pfeil, siehe block-element-btn.php) umgestellt - die frueheren Regeln fuer
   .BtnIcon-1 bis .BtnIcon-4 und die Keyframe-Animationen (arrowMove/1/2/3/4) sind dadurch
   ueberfluessig geworden und wurden entfernt. .BtnIcon bleibt als Wrapper bestehen. */
.BtnIconGrid {
position: relative;
display: flex;
justify-content: center;
align-content: center;
	margin: 0;
	padding: 0;
width: 3.125vw;
height: 3.125vw;
	background-color: transparent;
}
.BtnIcon {
position: relative;
height: 100%;
width: 100%;
}
/* [Claude 2026-09-03, Bugfix] SVGs sind per Browser-Default "display:inline" mit
   "vertical-align:baseline" - dadurch bleibt unterhalb des SVGs eine kleine, an der aktuellen
   Schriftgroesse/Zeilenhoehe des Kontexts haengende "Baseline-Luecke", die das Icon leicht nach
   OBEN aus der optischen Mitte seiner Box schiebt (bekannter, browserweiter SVG-Effekt, nicht
   Theme-spezifisch). Bei kleiner Kontext-Schriftgroesse (Desktop/Pad) kaum wahrnehmbar, bei der
   groesseren Phone-Schriftgroesse (s. fonts.css) deutlich sichtbar - genau das vom Kunden
   gemeldete "Icon im Content Slider ist auf Phone nicht vertikal zentriert". "display:block"
   entfernt die Luecke vollstaendig, betrifft ALLE Icons ueber .BtnIconGrid/.BtnIcon (Card Footer,
   Menuleiste, Multi Content Button/FAQ, Mengen-Stepper usw.), da sie alle dieselbe Basis-Struktur
   nutzen - einmaliger Fix an zentraler Stelle statt pro Icon-Datei. */
.BtnIcon svg{
	display: block;
}

/* [Claude 2026-08-16] Pfeil-Icon: reine Linien statt gefuellter Formen.
   Was: .ArrowShaft (der diagonale Schaft) bleibt fix. Die beiden .ArrowHeadLine-Segmente (die
   Pfeilspitze) sind in Ruheposition verkuerzt (scale 0.55) und "wachsen" bei Hover per
   CSS-Transform auf volle Laenge (scale 1). transform-origin sitzt jeweils an dem Ende der
   Linie, das die Pfeilspitze bildet (100% 50% bzw. 50% 0%) - dadurch bleibt die Spitze beim
   Wachsen fix an ihrem Platz, nur das andere Ende "faehrt aus".
   Warum: auf Wunsch statt der vorherigen gefuellten rect/polygon-Formen - schlankere Optik,
   Hover-Effekt als Feedback fuer Klickbarkeit. transform-box:fill-box ist noetig, damit sich
   transform-origin auf die eigene SVG-Form bezieht statt auf das gesamte SVG-Element.
   Bewusst NICHT auf .PathCol selbst gesetzt (nur auf die neuen .ArrowShaft/.ArrowHeadLine
   Klassen), da .PathCol sitegweit auch fuer andere, gefuellte (nicht Linien-) Icons verwendet
   wird - ein globales "fill:none" auf .PathCol haette dort riskieren koennen, in irgendeinem
   Edge-Case mit gleicher/niedrigerer Spezifitaet zu kollidieren. So bleibt die Aenderung auf
   dieses Icon beschraenkt. */
.ArrowShaft,
.ArrowHeadLine {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	transition: stroke 0.2s ease;
	/* [Claude 2026-09-01, Kundenwunsch] Strichstaerke soll unabhaengig von der Icon-Groesse
	   (s. .ElementFooterIcon-scaled in card-footer.css) immer gleich dick wirken. Ohne dies
	   skaliert der Stroke mit der SVG-Element-Groesse mit (dickerer Strich bei groesserem Icon). */
	vector-effect: non-scaling-stroke;
}
.ArrowHeadLine {
	transform-box: fill-box;
	transition: transform 0.35s ease-out, stroke 0.2s ease;
}
.ArrowHeadLine-h {
	transform-origin: 100% 50%;
	transform: scaleX(0.65);
}
.ArrowHeadLine-v {
	transform-origin: 50% 0%;
	transform: scaleY(0.65);
}
/* [Claude 2026-09-01, Kundenwunsch] Pfeilspitze im Ruhezustand laenger (0.55 -> 0.65) und beim
   Hover ueber die urspruengliche volle Linienlaenge hinaus (1 -> 1.1) wachsend. */
.BtnOver:hover .ArrowHeadLine-h {
	transform: scaleX(1.1);
}
.BtnOver:hover .ArrowHeadLine-v {
	transform: scaleY(1.1);
}

/* [Claude 2026-09-01] Icon "Pfeil nach rechts" (block-element-btn-right.php) - Kopf-Linien stehen
   im 45-Grad-Winkel (nicht achsenparallel wie bei .ArrowHeadLine-h/-v), daher hier "scale" statt
   scaleX/scaleY. transform-origin liegt jeweils auf der Pfeilspitze (100% des fill-box-Rands, s.
   Kommentar in block-element-btn-right.php) - gleiche Ruhe-/Hover-Werte wie beim diagonalen Pfeil. */
.ArrowHeadLine-up {
	transform-origin: 100% 100%;
	transform: scale(0.65);
}
.ArrowHeadLine-down {
	transform-origin: 100% 0%;
	transform: scale(0.65);
}
.BtnOver:hover .ArrowHeadLine-up {
	transform: scale(1.1);
}
.BtnOver:hover .ArrowHeadLine-down {
	transform: scale(1.1);
}

@media screen and (max-width: 956px) {	
.BtnIconGrid {
width: 6.25vw;
height: 6.25vw;
}
/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */
}
@media screen and (max-width: 720px) {
.BtnIconGrid {
width: 9.375vw;
height: 9.375vw;
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

}