/* Allgemeines */
	body { font-family: Arial, Helvetica, sans-serif; color:#000; background-color: #FFF; font-size:18px; min-width:330px; text-align:center; margin:0; padding:0; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale; }
	p {}
	td {}
	a:link { color:#000; text-decoration:none; }
	a:visited { color:#000; text-decoration:none; }
	a:hover { color:#000; text-decoration:none; }
	a:active { text-decoration:none; }
	a:focus { outline: none; }
	.master { position:relative; width:95%; max-width:1200px; margin:auto; overflow: hidden; } 
	.row:after { content:""; display:table; clear:both; }
	.bold { font-weight:bold; }
    .h1 { font-size:60px; text-transform: uppercase; font-family:Georgia, 'Times New Roman', Times, serif; }
	.h2 { font-size:40px; font-family:Georgia, 'Times New Roman', Times, serif; }
    .h3 { font-size:30px; font-family:Georgia, 'Times New Roman', Times, serif; }
	.center { text-align:center; }
	.uppercase { text-transform: uppercase; }
	.more_space { letter-spacing: +2px; }
	.left { text-align:left; }
	.grey_text { color: #6b7280; }
/**************/

/* Inhalte */
	#header { position:relative; width:100%; }
	#headerContent { line-height: 50px; padding-top:30px; padding-bottom: 30px; }

	#main { position:relative; width:100%; min-height:500px; }

	#firstContentContainer { padding-top: 40%; background-image: url('../design/biohof_1.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; }
	#firstContent { }

	
	#secondContentContainer { width:100%; background-color: #CEDC7A; }
	#secondContent { padding-top:100px; padding-bottom: 80px; }
	#welcome_text { position: relative; max-width:700px; margin: auto; line-height: 200%; }

	#thirdContentContainer {  }
	#thirdContent { padding-top:100px; padding-bottom:80px; text-align: center; }
	#contactContent { text-align: left; }
	.checklist { margin: 0 0 1rem 0; padding-left: 0; list-style: none; }
  	.checklist li { position: relative; margin: .4rem 0; padding-left: 1.5rem; }
  	.checklist li::before { content: '✔'; position: absolute; left: 0; top: 0; line-height: 1.3; font-weight: 700; }

	#fourthContentContainer { padding-top: 15%; background-image: url('../design/biohof_2.jpg'); background-repeat:no-repeat; background-size:cover; background-position: top; }
	#fourthContent { padding-top: 100px; padding-bottom: 100px; }

	#imprintContent { padding-top:100px; padding-bottom: 100px; }
	#imprintContent a:link { color:#000; text-decoration:none; }
	#imprintContent a:visited { color:#000; text-decoration:none; }
	#imprintContent a:hover { color:#FFF; text-decoration:none; }
	#imprintContent a:active { text-decoration:none; }
	#imprintContent a:focus { outline: none; }

	#footer { position:relative; width:100%; min-height:150px; padding-top:40px; }
	#footerContent { }


	@media only screen and (min-width:2560px) { 

	}

	@media only screen and (max-width:1200px) { 

	}

	@media only screen and (max-width:992px) { 
		.h1 { font-size: 50px; }
		.h2 { font-size: 35px; }
		.h3 { font-size: 25px; }
	}

	@media only screen and (max-width:768px) { 
		.h1 { font-size: 40px; }
		.h2 { font-size: 30px; }
		.h3 { font-size: 20px; }
	}

	@media only screen and (max-width:600px) { 
		.h1 { font-size: 35px; }
		.h2 { font-size: 28px; }
	}

/**********/

/* Sprachauswahl — nur Test/Vorschau, in Produktion liefert der Worker sie nicht
   aus. Die Sprachen standen als Aufzaehlung da und waren durch die globale Regel
   (a { color:#000; text-decoration:none }) nicht als Links zu erkennen. Jetzt
   Kacheln: eigene Flaeche, Rahmen in der Hausfarbe, Fuellung beim Hover. */
	#sprachauswahl { padding-top:90px; padding-bottom:90px; }
	#sprachauswahl .hinweis { max-width:600px; margin:25px auto 50px auto; line-height:170%; }

	.sprachgitter { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:15px; max-width:820px; margin:auto; }

	.sprachkachel { display:block; padding:22px 15px; border:2px solid #CEDC7A; transition:0.5s; }
	.sprachkachel:link,
	.sprachkachel:visited { color:#000; text-decoration:none; }
	.sprachkachel:hover { background-color:#CEDC7A; }
	/* Feste Zeilenhoehe, sonst zieht das koreanische Schriftbild seine Kachel
	   drei Pixel hoeher und mit ihr die ganze Gitterzeile. */
	.sprachkachel .name { display:block; font-family:Georgia, 'Times New Roman', Times, serif; font-size:24px; line-height:28px; }
	.sprachkachel .code { display:block; margin-top:6px; font-size:14px; color:#6b7280; text-transform:uppercase; letter-spacing:+1px; }
	.sprachkachel:hover .code { color:#000; }

	/* Auf dem Handy zu zweit nebeneinander: elf Kacheln in einer Spalte waeren
	   sonst eine lange Rutschpartie. */
	@media only screen and (max-width:600px) {
		#sprachauswahl { padding-top:60px; padding-bottom:60px; }
		.sprachgitter { grid-template-columns:repeat(2, 1fr); gap:12px; }
		.sprachkachel { padding:18px 10px; }
		.sprachkachel .name { font-size:20px; line-height:24px; }
	}
/**********/

/* Buttons und Formulare */	
	.button_green { width:80%; max-width:300px; height:44px; border: 2px solid #CEDC7A; color: #000; background-color: #CEDC7A; -webkit-appearance: none; display: inline-block; line-height: 40px; transition: 0.5s; }
	.button_green:hover { background-color: transparent; color:#000; }
	.button_green:focus { outline: none; }

/********/

/* Kontakt: Messenger und Benachrichtigungs-Hinweise nebeneinander */
	#kontakt_spalten { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:900px; margin:60px auto 0 auto; text-align:left; }
	.kontaktSpalte { border:2px solid #CEDC7A; padding:30px; }
	.kontaktSpalte .h3 { display:block; margin-bottom:20px; }
	.kontaktSpalte p { margin:0 0 30px 0; line-height:170%; }
	.kontaktSpalte .checklist { margin:0; }
	.kontaktSpalte li { line-height:160%; margin:.8rem 0; }

	/* Der Knopf fuellt die Spalte: die Standardbreite (80%/max 300px) traegt
	   Labels wie "Open the Hidden Messenger" nur knapp. box-sizing muss sein —
	   die Seite rechnet sonst content-box, dann kaemen zu den 100% noch
	   Innenabstand und Rahmen dazu und der Knopf stuende ueber den Kasten hinaus. */
	.kontaktSpalte .button_green { box-sizing:border-box; width:100%; max-width:none; padding:0 20px; text-align:center; }

	/* Die linke Spalte ist die Handlungsaufforderung und traegt deshalb die
	   Flaeche: gefuellt in der Hausfarbe wie das Hofladen-Band darueber, mit
	   groesserer Ueberschrift. Der Knopf wird dunkel — gruen auf gruen waere auf
	   dem gefuellten Grund nicht mehr zu sehen. Beim Hover faellt die Flaeche wie
	   ueberall auf der Seite weg, die Schrift bleibt auf Gruen lesbar.
	   Die Hoehe kommt aus dem Innenabstand statt aus einem festen Wert: bricht
	   eine Beschriftung auf schmalen Geraeten doch einmal um (die Seite laesst
	   330px zu), waechst der Knopf mit, statt die zweite Zeile abzuschneiden. */
	#chat { background-color:#CEDC7A; border-color:#CEDC7A; }
	#chat .h3 { font-size:35px; }
	#chat .button_green { height:auto; line-height:1.35; padding:16px 15px; font-weight:700; background-color:#000; border-color:#000; }
	#chat .button_green:link,
	#chat .button_green:visited { color:#FFF; }
	#chat .button_green:hover { background-color:transparent; color:#000; }

	/* Grussformel unter den Kaesten — grau wie in der Altfassung. */
	#kontakt_gruss { margin-top:45px; line-height:180%; }

	/* Untereinander, sobald zwei Spalten zu schmal wuerden. Bei 769px — dem
	   schmalsten Fall mit zwei Spalten — stehen 235px im Knopf zur Verfuegung,
	   die laengste Beschriftung ("Open the Messenger", fett) misst 178px. */
	@media only screen and (max-width:768px) {
		#kontakt_spalten { grid-template-columns:1fr; gap:25px; margin-top:45px; }
		.kontaktSpalte { padding:25px; }
		#chat .h3 { font-size:30px; }
		#kontakt_gruss { margin-top:35px; }
	}
/************/

/* Messenger-Hinweise je Geraet (das Layout setzt `data-os` am <html>).
   Nur Ausblenden: Ohne Erkennung -- kein JavaScript, unbekanntes Geraet,
   Desktop -- bleibt die ganze Liste sichtbar. Am Rechner ist die Frage ohnehin
   nicht iOS oder Android, sondern ueberhaupt Telefon; das sagt schon der
   Einstiegstext. */
:root[data-os="ios"] .checklist li[data-os="android"],
:root[data-os="android"] .checklist li[data-os="ios"] {
	display: none;
}