body {
	color:red;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	padding-top:100px;
}

#logotext, a {
	color:red;
}
#logotext {
	display:block;
	float:right;
	text-align:right;
	margin-bottom: 50px;
}
#logotext h1 {
	font-size:4em;
	font-weight:200;
	margin:50px 0 auto;
}
#logotext h2 {
	font-size:1.4em;
	font-weight:300;
}


#wrapper-anklicken {
	text-align:right;
}
#bilderanklicken {
	display:inline-block;
	font-size:0.7em;
	margin-bottom:20px;
}


#wrapper-bilder {
	width: 50%;
	margin: 0 25%;
}
#wrapper-footer {
	clear: both;
	font-size: 0.75em;
	margin-top: 50px;
	text-align:right;
}
#linkwechsel {
  display: flex;
  justify-content:space-between;
}


#linkwechsel a {
	text-decoration:none;
}
#linkwechsel img {
	max-width: 100%;
	height: auto;
}


/* Portrait-Smartphone: Bilder untereinander statt nebeneinander,
   Titel (h1/h2) oberhalb der Bilder statt rechts daneben. */
@media (max-width: 600px) and (orientation: portrait) {

	body {
		padding-top: 40px;
	}

	#wrapper-anklicken {
	text-align:center;
}

	#wrapper-bilder {
		width: 100%;
		margin: 0;
		padding: 0 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	/* Reihenfolge nur visuell geändert, das HTML bleibt gleich */
	#logotext {
		order: -2;
		float: none;
		text-align:left;
		margin: 0 auto 30px auto;
	}
	#logotext h1 {
		font-size: 2.4em;
		margin: 0 0 10px;
	}
	#wrapper-anklicken {
		order: -1;
	}
	#linkwechsel {
		order: 0;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}
	#wrapper-footer {
		order: 1;
		text-align: left;
		margin: 20px auto 0 auto;
	}
}


/* Tablet, beide Ausrichtungen: Desktop-Anordnung bleibt (Bilder nebeneinander,
   Titel rechts), nur der Container bekommt mehr Breite statt der schmalen
   50%-Spalte, die auf einem Tablet unnötig viel Rand verschenkt. */
@media (min-width: 601px) and (max-width: 1024px) {

	#wrapper-bilder {
		width: 80%;
		margin: 0 10%;
	}
}


/* Smartphone im Querformat: erkannt über geringe Höhe statt fester Breite,
   damit es sich nicht mit einem Tablet im Querformat überschneidet.
   Gleiche Breitenkorrektur wie beim Tablet, zusätzlich weniger vertikaler
   Abstand, weil in dieser Ausrichtung kaum Höhe zur Verfügung steht. */
@media (orientation: landscape) and (max-height: 500px) {

	body {
		padding-top: 30px;
	}
	#wrapper-bilder {
		width: 80%;
		margin: 0 10%;
	}
	#logotext {
		margin-bottom: 20px;
	}
	#logotext h1 {
		font-size: 2.5em;
		margin: 10px 0 auto;
	}
}