/*
    CSS für die Seite "Kontakt"
    Farbpalette:
    #FAF3D2 (sehr helles Gelb):  Texthintergrund, für hover bei Menüpunkten
    #FFF4B0 (helles Gelb) 
    #FCD355 (Goldgelb): Menü-Details
    #1a1a1a (dunkel): Menü-Hintergrund
    #090907 (fast schwarz): Textfarbe und Rahmen
*/
body { /* seitenspezifische Anpassung von <body> */    
    overflow-y: auto;
    overflow-x: hidden;
	background-color: #FAF3D2; /* damit wird die Farbe des Seiteninhalts definiert */
}

/* Wrapper, der den Viewport (abzgl. Menü) füllt und zentriert */
main.Seitenmitte {
    min-height: calc(100svh - 130px - 40px); /* Menü + oberer/unterer Body-Rand */
    margin-top: 130px;                       /* Platz für die fixe Menüleiste */
    padding: 2rem 0;
    text-align: center;
	color: #090907;
}


/* ============================= */
/*         Inhalt          */
/* ============================= */

p.fett { font-weight: bold; }

/* Einstiegsseite --------------------------------------------- */

.Einstieg {
	position: relative; 
	width: 80%;
	margin-left: auto; margin-right: auto;
	margin-top: 1%;
	margin-bottom: 5%;
}

.Einstieg h1 {
	margin-bottom: 1em;
	font-size: 2.5em;
	text-align: center;
}

.Einstieg p {
	margin-bottom: 0.5em;
	font-size: medium;
}

.Einstieg p.Datenschutz {
	margin-left: auto; margin-right: auto;
	width: 80%;
	text-align: center;
}

.Einstieg p.Fehlermeldung {
	margin-top: 0.5em;
	margin-left: 5%;
	color: red;
	font-weight: bold;
}

.Einstieg form {
	width: 80%; 
	margin-left: auto; 
	margin-right: auto;
}

.Einstieg fieldset {
	margin-top: 2em;
	border: 1px solid #090907;
}

.Einstieg fieldset legend {
	color: #1a1a1a;
	font-size: 1.5em;
	font-weight: bold;
	
}

.Einstieg input {
      font-size: large;
	  margin-top: 0.3em;
      margin-left: 5%;
	  width: 90%;
	  padding: 0.5em;	  
	  background-color: #FCD355;
	  border: 1px solid #090907;
}	
.Einstieg input:focus {
	background-color: #FAF3D2; 
	border-color: #1a1a1a;
	outline: none; /* Entfernt den Standard-Fokus-Rand */
	box-shadow: 0 0 5px 2px #090907; /* Fügt einen dezenten Schatten hinzu */
}

.Einstieg textarea {
      font-size: large;
	  margin-top: 0.3em;
      margin-left: 5%;
	  width: 90%;
	  height: 10em;
	  padding: 0.5em;	  
	  background-color: #FCD355;
	  border: 1px solid #090907;
}	
.Einstieg textarea:focus {
	background-color: #FAF3D2; 
	border-color: #1a1a1a;
	outline: none; /* Entfernt den Standard-Fokus-Rand */
	box-shadow: 0 0 5px 2px #090907; /* Fügt einen dezenten Schatten hinzu */
}

/* Vorschau --------------------------------------------- */

.Vorschau {
	position: relative; 
	width: 60%;
	margin-left: auto; margin-right: auto;
	margin-top: 1%;
	margin-bottom: 5%;
	padding: 2em;
}

.Vorschau h1 {
	margin-bottom: 1em;
	font-size: 2.5em;
	text-align: center;
}

.Vorschau h2 {
	margin-bottom: 1em;
	font-size: 1.5em;
	text-align: center;	
}

.Vorschau p {
	margin-bottom: 0.5em;
	font-size: medium;
	text-align: left;
}

.Vorschau p.leicht_eingerueckt { margin-left: 5%; }

.Vorschau p.Buttonleiste { text-align: center; }

/* abschicken --------------------------------------------- */

.abschicken {
	position: relative; 
	width: 60%;
	margin-left: auto; margin-right: auto;
	margin-top: 1%;
	margin-bottom: 5%;
	padding: 2em;
}

.abschicken h1 {
	margin-bottom: 1em;
	font-size: 1.6em;
}

/* Fehler beim abschicken:  Überschrift h1 wird nich angezeigt */
.abschicken h1.Fehler {display: none;}

.abschicken h2 {
	margin-bottom: 1em;
	font-size: 1.4em;
	text-align: center;	
}

.Abbruch {position: relative;}
.Abbruch h1 {font-size: 2em; margin-bottom: 1.5em;}
.Abbruch h2 {font-size: 1.8em; margin-bottom: 2em;}

h2.Mail { font-style: italic; font-weight: normal; }


button {
    display: inline-block;
	background-color: #1a1a1a;
    margin-top: 1em;
	color: #FCD355;    
    font-weight: bold;    
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
	width: 180px;
	font-size: 1.2em;
	padding: 10px;
	cursor: pointer;
}
button:hover {
    color: #FAF3D2;
    text-decoration: underline;
}

/* ============================= */
/*       RESPONSIVE DESIGN      */
/* ============================= */

@media (max-width: 400px) {    
	.Einstieg {width: 96%; margin-bottom: 2%;}
	.Einstieg h1 {margin-bottom: 0.5em; font-size: 1.5em;}
	.Einstieg img {width: 80px; height: 76px; margin-bottom: 2em;}
	.Einstieg form {width: 96%;}
	.Einstieg fieldset legend {font-size: 1em;}
	.Einstieg p {font-size: x-small;  line-height: 1.2em;}
	.Einstieg input {font-size: small;}	
	.Einstieg textarea {font-size: small;}	
	.Einstieg button {width: 100px; font-size: 1em; padding: 5px; margin-bottom: 20px;}
	.Vorschau {width: 96%; margin-bottom: 2%; padding: 0.5em;}
	.Vorschau h1 {font-size: 1em;}
	.Vorschau h2 {font-size: 0.7em; line-height: 1.1em;}
	.Vorschau p {font-size: x-small; line-height: 1.2em;}
	.abschicken {width: 96%; padding: 0.5em;}
	.abschicken h1 {font-size: 1.2em; line-height: 1.1em; margin-bottom: 5em;}
	.abschicken h2 {font-size: 1em; line-height: 1.1em; margin-bottom: 5em;}
	.Abbruch h1 {font-size: 1.2em;}
	.Abbruch h2 {font-size: 1em;}
	button {width: 100px;}
}

@media (min-width: 400px) and (max-width: 700px) {	
	.Einstieg {width: 90%;}
	.Einstieg h1 {margin-bottom: 0.5em; font-size: 1.8em;}
	.Einstieg img {width: 100px; height: 95px; margin-bottom: 1.5em;}
	.Einstieg form {width: 90%;}
	.Einstieg fieldset legend {font-size: 1.2em;}
	.Einstieg p {font-size: small;  line-height: 1.4em;}
	.Einstieg input {font-size: small;}	
	.Einstieg textarea {font-size: medium;}	
	.Einstieg button {width: 120px; font-size: 1.2em; padding: 8px; margin-bottom: 15px;}
	.Vorschau {width: 90%; padding: 1em;}
	.Vorschau h1 {font-size: 1.5em;}
	.Vorschau h2 {font-size: 0.9em;  line-height: 1.3em;}
	.Vorschau p {font-size: small; line-height: 1.3em;}
	.abschicken {width: 90%; padding: 1em;}
	.abschicken h1 {font-size: 1.1em; line-height: 1.3em;  margin-bottom: 3em;}
	.abschicken h2 {font-size: 0.9em; line-height: 1.3em;  margin-bottom: 3em;}
	.Abbruch h1 {font-size: 1.4em;}
	.Abbruch h2 {font-size: 1.2em;}
	button {width: 125px;}
}

@media (min-width: 700px) { /* Tablet quer */
	.Einstieg {width: 90%;}
	.Einstieg form {width: 90%;}
	.Einstieg p {font-size: small; line-height: 1.4em;}
	.Vorschau {width: 80%; padding: 1.5em;}
	.Vorschau h1 {font-size: 1.8em;}
	.Vorschau h2 {font-size: 1.1em;}
	.Vorschau p {font-size: small; line-height: 1.4em;}
	.abschicken {width: 80%; padding: 1.5em;}
	.abschicken h1 {font-size: 1.3em; line-height: 1.4em;  margin-bottom: 2em;}
	.abschicken h2 {font-size: 1.1em; line-height: 1.4em;  margin-bottom: 2em;}
	.Abbruch h1 {font-size: 1.6em;}
	.Abbruch h2 {font-size: 1.4em;}
	button {width: 150px;}
}

@media (min-width: 1000px) {
	.Einstieg {width: 80%;}
	.Einstieg form {width: 80%;}
	.Einstieg p {font-size: medium;}
	.Vorschau {width: 70%; padding: 2em;}
	.Vorschau h1 {font-size: 2.2em;}
	.Vorschau h2 {font-size: 1.3em;}
	.Vorschau p {font-size: medium;}
	.abschicken {width: 70%; padding: 2em;}
	.abschicken h1 {font-size: 1.5em;  margin-bottom: 1.5em;}
	.abschicken h2 {font-size: 1.3em;  margin-bottom: 1.5em;}
	.Abbruch h1 {font-size: 1.8em;}
	.Abbruch h2 {font-size: 1.6em;}
	button {width: 180px;}
}

@media screen and (min-width: 1400px) { /* breiter Bildschirm */
	.Vorschau {width: 60%;}
	.Vorschau h1 {font-size: 2.5em;}
	.Vorschau h2 {font-size: 1.5em;}
	.Vorschau p {font-size: large;}
	.abschicken {width: 60%; padding: 2em;}
	.abschicken h1 {font-size: 1.7em;  margin-bottom: 1em;}
	.abschicken h2 {font-size: 1.5em;  margin-bottom: 1em;}
	.Abbruch h1 {font-size: 2em;}
	.Abbruch h2 {font-size: 1.8em;}
}