/* Body */

html {
	-webkit-text-size-adjust: 100%; /* Verhindert das automatische Skalieren in WebKit-Browsern */
	text-size-adjust: 100%; /* Standard-Eigenschaft für andere Browser */
}

body{
	background-color: #ffffff; 
	font-family: 'Open Sans', sans-serif;
	font-size: 1.0rem; 
}

p {
	font-size: 1.0rem; /* Besser als px: skaliert mit Nutzereinstellungen - 1 rem = 16px */
}

h1 {
	font-size: 1.6rem; 
}

h2 {
	font-size: 1.4rem; 
}

h3 {
	font-size: 1.1rem; 
}

/* Linkfarben */

a, 
a:hover, 
a:visited, 
a.active{
	color: #0000EE;
	text-decoration: underline;
}

/* Header */

.header1{
	display: flex;
	max-width: 1200px;
	margin: auto;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: 1px solid #000000;
}

.header1 img{
	max-width: 100%;
  	height: auto;
}

/* Content */

.content{ /* Content allgemein */
	min-height: 700px; 
	vertical-align: top; 
	text-align: left; 
	padding: 16px;
	display: flex;
	flex-direction: column;
	max-width: 1168px; /* Content Padding links und rechts abziehen! */
	margin: auto;
	background-color: #fffbf6;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
}

.content li{
	margin-left: 12px;
}

.listen_herzmauer{
	list-style-type: none;
	margin-left: 8px;
	padding: 0;
}

/* Content im Content mit Rahmen */

.content2{
	border-radius: 20px;
	padding: 16px;
	vertical-align: top;
	border: 1px solid #000000;
	background-color: #cccccc;
}

/* Content Bilder responsive */

.content_img {
	width: 100%; /* bzw. max-width: 100% */
	height: auto;
	margin: auto; /* zentriert das Bild */
	border-radius: 10%;
	border: 1px solid #000000;
}

@media all and (min-width : 600px) {
.content_img {
	width: 50%;
  }
}

/* Startseite */

.startseite_abschnitt_1_fragen { 
	border: 1px solid #000000;
	width: 70%;         /* WICHTIG: Eine feste Breite ist erforderlich */
	margin-left: auto;    /* Schiebt den Container von links in die Mitte */
	margin-right: auto;   /* Schiebt den Container von rechts in die Mitte */
	padding: 20px;
	border-radius: 20px;
	background-color: #a5d6a7;
	/* Kurzschreibweise: margin: 0 auto; */

}

.startseite_abschnitt_2_ueber_mich { 
	display: flex; /* Aktiviert die Anordnung nebeneinander */
	width: 100%;   /* Nimmt die volle verfügbare Breite ein */
	gap: 20px;
	justify-content: space-between; /* Verteilt Elemente an den linken und rechten Rand */
}

.startseite_abschnitt_2_ueber_mich_bild {
	width: 30%;

}
.startseite_abschnitt_2_ueber_mich_bild img {
	max-width: 100%;
	height: auto;
}

.startseite_abschnitt_2_ueber_mich_text {
	width: 70%;
	justify-content: flex-start;
}

@media (max-width: 600px) {
	.startseite_abschnitt_1_fragen {width: 80%;}
	.startseite_abschnitt_2_ueber_mich {flex-direction: column;}
	.startseite_abschnitt_2_ueber_mich_bild, .startseite_abschnitt_2_ueber_mich_text {width: 100%;}
}

/* Startseite Abschnitt 3 Contentboxen responsive */

.content_boxen { /* Content Startseite Abschnitt 3 - Boxen mit Bildern */
	display: flex; /* Aktiviert das Flexbox-Layout */
	flex-wrap: wrap; /* Erlaubt den Umbruch auf neue Zeilen, wenn der Platz nicht reicht */
	gap: 20px; /* Definiert den Abstand zwischen den Boxen */
}

.box {
  	width: calc(50% - 10px); /* Nimmt die Hälfte des Platzes abzüglich des halben Gaps ein */
  	padding: 20px;
	box-sizing: border-box; /* Stellt sicher, dass Padding nicht die Breite vergrößert */
	border-radius: 20px;
	text-align: center;
	vertical-align: top;
	font-size: 1.0rem;
	background-color: #a5d6a7;
	border: 1px solid #000000;
}

@media (max-width: 600px) {
    .box {
	width: 100%; /* Auf kleinen Bildschirmen volle Breite nutzen */
    }
}

.box img{
	max-width: 100%;
	height: auto;
	border: none;
	width: 20%;
}

/* Footer */

.footer{
	height: 60px; 
	text-align: center;
	display: flex;
	align-items: center;
	max-width: 1200px;
	margin: auto;
	border: 1px solid #000000; 
	background-color: #333;
	color: #f2f2f2;
	flex-direction: column;
	vertical-align: top; 
}

.footer a{
	color: #CCCCCC;
}

/* Klappmenü */

.content1 {
	padding: 10px; /* Text im Klappmenü */
}

details {
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
}

summary {
	font-weight: bold;

}

/* Optional: Pfeil-Animation */
	details[open] summary::after {
	content: "-";
}

summary::after {
	content: "+";
	float: right;
}

/* Zitate */

blockquote {
	padding: 0;
	margin: 0;
	text-align: center
}

blockquote p {
	font-size: 1.2rem;
	padding-bottom: 3em;
	font-family: Georgia, Times, "Times New Roman", serif;
	margin: 0;
	padding: 0;
}

blockquote p:before {
	content: "\201C";
	font-size: 1.2rem;
	font-weight: bold;
	font-family: Georgia, Times, "Times New Roman", serif;
}

blockquote p:after {
	content: "\201D";
	font-size: 1.2rem;
	font-weight: bold;
	font-family: Georgia, Times, "Times New Roman", serif;
}

cite {
	display: block;
	text-align: center;
	font-size: 1.1rem;
}

cite:before {
	content: "\2014 \0020";
	font-size: 1.1rem;
}

/* Runde farbige Buttons */

.termin-button {
	display: inline-flex;
	align-items: center;
	background-color: #ffec8b; 
	color: #000000;
	padding: 8px;
	text-decoration: none;
	border-radius: 9999px;
	border: 1px solid #000000;
	max-width: 200px;
}

.termin-button:hover {
	background-color: #ffb90f;
	text-decoration: none;
	color: #000000;
	transform: scale(1.1);
}

.button-icon {
	width: 20px;
	height: 20px;
	margin-right: 10px; /* Abstand zwischen Icon und Text */
}