#about {
	scroll-behavior: smooth;
	margin: 0;
	min-height: 100vh;           /* statt height: 100vh – damit es wachsen kann */
	display: flex;
	flex-direction: column;      /* falls du später mehr Inhalt über/unter dem Container willst */
	justify-content: center;     /* vertikal zentrieren */
	background-color: white;
	overflow-y: auto;            /* falls Inhalt zu hoch */
}

/*@import url('https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap');
	.londrina-sketch-regular {
		font-family: "Londrina Sketch", sans-serif;
		font-weight: 400;
		font-style: normal;
	}*/

.logo-img {
	width: 250px;
	height: 250px;
	pointer-events: none;
	overflow: visible;
	margin: 0 auto;
}

.logo-wrapper {
	filter: drop-shadow(0px 10px 9px rgba(0, 0, 0, 0.2));
	-webkit-filter: drop-shadow(0px 10px 9px rgba(0, 0, 0, 0.2));
	position: relative;
	transition: filter 0.1s ease-out;
	transform: translateZ(0);
	overflow: visible;
	margin: 0 auto;
}
.logo-container {
	position: relative;
	width: 250px;
	aspect-ratio: 1 / 1;  /* Quadrat */
	height: auto;
	overflow: visible;
}

.square-img {
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 400px;
	max-height: 400px;
	object-fit: contain;
	display: block;
	margin-inline: auto;
	padding: 1rem;
	transition: transform 0.3s ease; /* optional für sanftes Ein-/Ausblenden */
}
.sides { transform: scale(1);}
#about .card-body { margin-top: 0; padding-top: 0;}
#about .card-title {font-weight: 100; font-size: 4rem; }
#about .card-text { font-size: 4rem;}

@media (min-width: 768px) and (max-width: 1200px) {  /*  gilt für md, lg */
	#about .card-title {font-size: 3rem;}
	.card-title {font-size: 3rem;}
}

@media (min-width: 768px) {  /*  md und größer  */
	.sides {transform: scale(0.8);}
	.sides.card-body {margin-top: -2rem;}
}

.faehnchen {
	display: inline-block;
	padding: 0.5em 2em 0.5em 2em;
	background: #e0d3bc;
	color: #222;
	font-weight: bold;
	font-size: 1.5em;
	font-family: sans-serif;
	position: relative;
	/* Fähnchenform */
	clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
	/* Rotation */
	transform: rotate(-8deg);
	/* Optional: Schatten */
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
	min-width: 90%;
	margin-bottom: 1rem;
}
.faehnchen::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-left: 1.2em solid #e0d3bc;
}

.dsgvo {font-size: 1rem; font-weight: 300;}
.dsgvo h2 {font-size: 1.4rem;}
.dsgvo h3 {font-size: 1.2rem;}
.dsgvo h4 {font-size: 1.1rem;}
.dsgvo h5 {font-size: 1rem;}

.social-icon img {
	height: 1.75rem;
	padding: 0 .25rem .25rem;
}