@media (max-width: 500px) {
		.schritt-erklaerung {
				display: flex;
				align-items: center;
				margin-top: 2em;
				margin-bottom: 2em;
				gap: 1.4em;
		}
				.schritt-erklaerung .schritt-erklaerung-gesicht {
						flex: 2 0 0;			/* urspruenglich "3 0 0", aber im Mobilen brauchen wir jeden Platz, da soll nicht so viel verschwendet werden */
						text-align: center;
						position: relative;		/* fuer den Name */
				}
						.schritt-erklaerung .schritt-erklaerung-gesicht img {
								width: 100%;
								border-radius: 100px;
						}
						.schritt-erklaerung .schritt-erklaerung-gesicht .name {
								color: #ffffff;
								position: absolute;
								bottom: 6px;
								left: 50%;
								transform: translate(-50%, 0);
						}
				.schritt-erklaerung .schritt-erklaerung-text {
						flex: 5 0 0;
						font-size: 14px;		/* erbt leider nicht von #konfiguratorGesamt solange wir .schritt-erklaerung auch im Extra-Fenster verwenden */
						color: #000000;
				}
						.schritt-erklaerung .schritt-erklaerung-text .box {
								background-color: #e2f4ce;
								padding: 1em;
								position: relative;		/* fuer den Sprechblasenpfeil */
								margin-bottom: 8px;		/* fuer mehrere aufeinanderfolgende Boxen */
								/* border-radius: 4px; oben links ist der Pfeil der Sprechblase. Da passt das nicht hin. */
								border-top-left-radius: 0;
								border-top-right-radius: 4px;
								border-bottom-left-radius: 4px;
								border-bottom-right-radius: 4px;
								box-shadow: 0px 3px 6px #00000029;
						}
						.schritt-erklaerung .schritt-erklaerung-text .box:before {
								content: ' ';
								position: absolute;
								width: 0;
								height: 0;
								left: -15px;
								top: 0;
								border-left: 15px solid transparent;
								border-top: 20px solid #e2f4ce;		/* bei Aenderung hier, auch die .vertical-Variante beachten! */
						}

		.schritt-erklaerung.vertical {			/* z.B. das Hinweisfenster bei der Klebebefestigung */
				flex-direction: column;
				align-items: flex-start;
		}
				.schritt-erklaerung.vertical .schritt-erklaerung-gesicht {
						width: 31vw;
				}
				.schritt-erklaerung.vertical .schritt-erklaerung-text {
						margin-left: 15px;		/* fuer das Sprechblasen-Dreieck */
				}
						.schritt-erklaerung.vertical .schritt-erklaerung-text .box {
								background-color: #F8F4C6;
						}
						.schritt-erklaerung.vertical .schritt-erklaerung-text .box:before {
								border-top: 20px solid #F8F4C6;
						}
}