/* Der Container definiert nun die Form und Größe (175x175px Kreis) */
.img-zoom-container {
    width: 175px;
    height: 175px;
    border-radius: 50%;
    overflow: hidden; /* WICHTIG: Schneidet alles ab, was über den Kreis hinausragt */
    margin: 0 auto;  /* Zentriert den Container, falls nötig */
}

/* Das eigentliche Bild innerhalb des Containers */
.profile-img-zoomed {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    /* Der Zoom- und Positionierungs-Effekt */
    transform: scale(1.6);         /* Vergrößert das Bild (1.0 ist normal, 1.6 ist ein starker Zoom) */
    transform-origin: center top;  /* Der Zoom-Mittelpunkt ist oben in der Mitte, um den Körper auszublenden */
    /*margin-top: 10px;               /* Feinjustierung: Schiebt das gezoomte Gesicht leicht nach unten */
}

/* Open Sans Variable Font (Normal) */
@font-face {
  font-family: 'opensans';
  font-style: normal;
  font-weight: 300 800; /* Deckt Stärken von Light (300) bis ExtraBold (800) ab */
  font-display: swap;
  src: url('../fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
}

/* Open Sans Variable Font (Kursiv) */
@font-face {
  font-family: 'opensans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
}

#badges{
	/*padding: 30px 0;*/
	background: #ffffff;
}

.badge-grid{
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 30px;
	margin: 0 auto;
	margin-top: 30px;
	
}
.badges-img{
	max-width: 250px;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.h1-lookalike{
	font-size: 3em;
	color: #ffffff;
	margin-top: 10px;
	margin-bottom: 40px;
	line-height: normal;
	font-weight: 300;
}

.h1-lookalike-dark{
	font-size: 3em;
	color: #353535;
	line-height: normal;
	font-weight: 300;
}