/* body { font-size:100%; background-image:url(grund.gif); background-attachment:fixed; }
Hintergrund laut ChatGPT - 06.06.2025
Sanfte Geborgenheit
Puderrosa		#F9E1E0	warm, weich, emotional
Cremeweiß		#FFF9F5	neutral, beruhigend
Sandbeige		#E5D5C5	natürlich, erdend                  Hintergrund
Hellgrau		#DCDCDC	zurückhaltend, elegant
Salbeigrün		#CFE3DA	frisch, natürlich                  Kasten (bis 16.07.25)
Frische Natur
Mintgrün		#D7EAE3	frisch, klar, beruhigend
Creme			#FDF9F3	warm, offen                        Kasten (ab 17.07.25) + H1
Helltaupe		#D7C8B6	erdverbunden, ruhig
Lavendelgrau	#E3E0F4	zart, feminin, entspannend
Staubrosa		#E7C7CC	weich, ausgleichend
Moderne Wärme
Warmes Blush	#F2D2BD	modern, warm
Soft Apricot	#F9E3D4	freundlich, offen
Wolkengrau		#EDEDED	neutral, luftig
Eisblau			#D9EBF2	klar, beruhigend
Mauve			#CDB8D2	stilvoll, ruhig
 */
body {
	font-family:'Poppins';
	color:#444444;
	font-size:100%;
	background-color: #E5D5C5;
	max-width: 68em;
	margin: auto;
	padding: 0.7em;
	}
* {box-sizing: border-box}
@media screen and (max-width: 64em) {body {font-size: 94.1%; }}
@media screen and (max-width: 61em) {body {font-size: 89.7%; }}
@media screen and (max-width: 58em) {body {font-size: 85.3%; }}
@media screen and (max-width: 55em) {body {font-size: 80.9%; }}
@media screen and (max-width: 52em) {body {font-size: 76.5%; }}
@media screen and (max-width: 49em) {body {font-size: 72.1%; }}
@media screen and (max-width: 46em) {body {font-size: 67.6%; }}
@media screen and (max-width: 43em) {body {font-size: 63.2%; }}
@media screen and (max-width: 40em) {body {font-size: 58.8%; }}
@media screen and (max-width: 37em) {body {font-size: 54.4%; }}
@media screen and (max-width: 34em) {body {font-size: 50.0%; }}
@media screen and (max-width: 31em) {body {font-size: 45.6%; }}
@media screen and (max-width: 28em) {body {font-size: 41.2%; }}
/* @media screen and (max-width: 25em) {body {font-size: 36.8%; }}
@media screen and (max-width: 22em) {body {font-size: 32.4%; }}
@media screen and (max-width: 19em) {body {font-size: 27.9%; }} */


/* statt die Fonts von Google zu holen, besser lokal hosten */
@font-face {
  font-family: "Poppins";
  font-display: swap;
  src: url(poppins-v23-latin-regular.woff2) format("woff2");
}
:root {
  --linkhintergrund: #ffeb01;
  --schatten-link: #7a587b; /* 7a587b mauve ö.ä. */
}
h1 {
	color:#444444; /* war FDF9F3 */
	text-shadow: 0.03em 0.03em 0.05em var(--schatten-link);
	font-size:4.0em;
	letter-spacing: 0.05em;
	text-align:center;
	line-height:1.0em;
	margin-top:0.3em;
	margin-bottom:0.1em;
}
h2 {
	font-size:2.5em;
	text-align:center;
	padding:0.8em;
	margin-top:-0.9em;
	margin-bottom:-1.0em;
}
h3 {
	font-size:2.0em;
	text-align:center;
	padding:0.0em;
	margin-bottom:-0.3em;
	}
p {
	font-size:1.75em;
	text-align:center;
	hyphens:none;
	line-height:1.2;
	margin-top:0.0em;
	margin-bottom:0.5em;
	}
p.kleiner {
	font-size:1.5em;
	}
p.links {
	font-size:1.75em;
	text-align:left;
	}
p.vorspann {
	font-size:1.6em;
	text-align:center;
	hyphens:none;
	font-weight:600;
	width:85%;
	margin:0 auto;
	line-height:1.2;
	margin-top:0.0em;
	margin-bottom:0.5em;
	}
p.tun {
	font-size:1.75em;
	text-align:center;
	hyphens:none;
	font-style:italic;
	margin-top:0.0em;
	margin-bottom:-1.5em;
	width:70%;
	margin:0 auto;
	}
p.dsgvo {
	font-size:1.75em;
	text-align:justify;
	hyphens:auto;
	line-height:1.2;
	margin-top:0.0em;
	margin-bottom:0.5em;
	}

.person {
	width: 95%;
	margin: 2em auto; /* zentriert horizontal */
	padding: 1.5em;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	border-radius: 0.6em;
	box-shadow: 0.2em 0.2em 0.8em var(--schatten-link);
	box-sizing: border-box;
	}

.person:nth-of-type(odd) {
	background-color: #DcEeF5; /* Eisblau */
	}

.person:nth-of-type(even) {
	background-color: #eeE3E2; /* Puderrosa */
	}

hr {
	margin-top: 3.0em;
	margin-bottom: 0.5em;
	border: 1px;
	height: 1px;
	background-color: var(--schatten-link);
	}
.foto {
	max-width:50%;
	height:auto;
	display:block;
	margin:0.6em auto;
	margin-bottom: 1.0em;
	border-radius: 0.6em;         /* Ecken abrunden */
    box-shadow: 0.2em 0.2em 0.8em var(--schatten-link);  /* weicher Schatten */
	}
.logo {
	max-width:40%;
	height:auto;
	display:block;
	margin:0.6em auto;
	}
.avatar {
    vertical-align: middle;
    max-width: 1.1em;
    height: auto;
    border-radius: 50%;
}
.qr-code {
    vertical-align: middle;
    max-width: 7.0em;
    height: auto;
}
.infobox {
  display: flex;
  justify-content: center; /* horizontale Zentrierung */
  align-items: center; /* vertikale Zentrierung */
  background-color: #FDF9F3; /* Puderrosa oder z. B. Sandbeige */
  padding: 0.5rem;
  border-radius: 0.6em;
  gap: 0.5rem;
  align-items: center;
  width: 95%;
  margin: 2rem auto;
  box-shadow: 0.2em 0.2em 0.8em var(--schatten-link);
}
.infobox img {
  max-width: 30%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.infotext h3 {
  margin-top: 0;
  color: #9C7A9D; /* Mauve als Akzent */
}
.infotext p {
  margin: 0.5rem 0 0 0;
}
#myBtn { /* der "Top"-Button */
  display: none;
  position: fixed;
  top: 0.8em;
  right: 0.8em;
  z-index: 99;
  font-size: 1.5em;
  font-weight:600;
  border: none;
  outline: none;
  background-color: #eee;
  color: #111c3b;
  cursor: pointer;
  padding: 0.3em;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: var(--linkhintergrund);
}

a:link,a:visited {
	color: var(--schatten-link);
	text-decoration:underline;
	}
a:active {
	color:#111c3b;
	background-color: var(--linkhintergrund);
	text-decoration:none;
	}
p a:hover {
	color:#ffffff;
	text-decoration:none;
	background-color: var(--schatten-link);
	}
div.bu a:hover {
	color:#111c3b;
	text-decoration:none;
	background-color: var(--linkhintergrund); 
	}