/**********************************************************************************************************************
 *         ____                               _                _   _                 _                   _            *
 *        / ___|__ _ _ __ ___  ___ _ ____   _(_) ___ ___      | | | | __ _ _ __   __| |_      _____ _ __| | __        *
 *       | |   / _` | '__/ __|/ _ \ '__\ \ / / |/ __/ _ \_____| |_| |/ _` | '_ \ / _` \ \ /\ / / _ \ '__| |/ /        *
 *       | |__| (_| | |  \__ \  __/ |   \ V /| | (_|  __/_____|  _  | (_| | | | | (_| |\ V  V /  __/ |  |   <         *
 *        \____\__,_|_|  |___/\___|_|    \_/ |_|\___\___|     |_| |_|\__,_|_| |_|\__,_| \_/\_/ \___|_|  |_|\_\        *
 *                                                                                                                    *
 **********************************************************************************************************************
  auto.css

Projekt: Carservive-Handwerk.de
Autor:   Robert Kesseler
Datum:   12.8.2026
Version: 27.8.2026

Styles für about.php

Versionsinfo:


*******************************************************/

.hand_beschreibung {
  margin: 0 auto;	
  max-width: 50em;
  font-size: large;
}


.hand_flexbox {
  position: static;
  left: 10px;
  font-family: Helvetica, sans-serif;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.hand_item {
/*	border: solid black 3px; */
	border-radius: 5px;
	margin: 10px;
	display: flex;
	flex-wrap: wrap; /* Lässt den Text unter das Bild rutschen, wenn der Platz fehlt */
	align-items: flex-start; /* Richtet Bild und Text oben bündig aus */	
}

.hand_item img {
  border: 1px solid black;
  width: 15em;
  margin: 10px;
  flex-shrink: 0;         /* Verhindert, dass das Bild gestaucht wird */
  transition: transform 0.2s ease;
}

.hand_item img:hover {
  transform: scale(1.2);
}

.hand_item p {
max-width: 18em;
  margin: 10px;
/*  display: inline-block; /* Zwingt den Text, die Breite zu respektieren und neben das Bild zu rutschen */
}