/* Mobile Navigation */
.mobile-navigation {
	display: none;	
}

/* Float der Sidebar umkehren, da ich im Template die Reihenfolge getauscht habe */
aside {
	float: right;
}

/* Fehlerhaftes Margin korrigieren, statt: -140px -10px 40px !-20px!; */
.card-details #thumbnails {
	margin-left: -30px;
	margin-top: -140px;
}

.card-details.card-details-portrait #thumbnails {
	margin-top: -362px;
} 

/* Fix: Stempel klebt beim Verkleinern des Bildschirms nicht mehr direkt am Rand */
header {
	background-position-x: 5px;
	min-height: 2.8em;
	background-color: transparent;
}

/* Um das Springen der Seitenleiste beim Wechsel zwischen einer Portrait- und Querkarte weitestgehend zu minimieren */
.card-details #thumbnails ul.card {
	min-height: 449px;
}

/* Fix für Suchformular */
.styledForm .inputWrapper {
	float: right;
	max-width: 50%;
	margin-right: 0 !important;
	margin-top: 10px;
	min-height: 55px;
}

.card-details #facts,
.card-details #tags,
.card-details #source {
	z-index: 10;
	position: relative;
}

@media (max-width: 640px) {

	/* BEGIN DES RESPONSIVEN TEILS */

	/* Formular Suchseite */
	.styledForm {
		background: #e5e5e5;
	}
	
	.styledForm h2 {
		padding: 0 22px;
	}
	
	.styledForm .inputWrapper {
		float: none !important;
		display: block;
		max-width: 100%;
	}
	
	.styledForm input[type=text],
	.styledForm select {
		max-width: 100%;
	}


	/* Responsive Bilder */
	img {
		max-width: 100%;
		height: auto;
	}
	
	/* YouTube-Video auf Startseite skalieren */
	.videowrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}
	
	.videowrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	/* Layout-Rahmen responsiv */
	header,
	div[role=main],
	footer>ul,
	nav,
	#browser-warning p {
		max-width: 960px;
		width: 100%;
	}
	
	header,
	nav,
	div[role=main] {
		box-sizing: border-box;
		padding-right: 20px;
	}
	
	footer #feedback {
		padding: 0;
		max-width: 100%;
		width: auto; 
	}
	
	nav {
		margin: 0 auto 15px;
	}
	
	footer form textarea {
		max-width: calc(100% - 20px);
	}
	
	/* Überschreibt Inline-Style auf der "Aktuelles"-Seite */
	div[role=main] > div {
		max-width: 100%;
	}
	
	/* Slideshow auf der Startseite Sichtbar machen */
	#slideshow {
		max-height: 200px;
		max-width: 300px;
	}
	
	/* Breite der Spalten auf Archivseiten anpassen */
	.column-wrapper>.column {
		width: 395px;
		max-width: 100%;
	}

	/* ENDE DES RESPONSIVEN TEILS */

	/* BEGIN DES MOBILEN TEILS */

	/* Überschriften sind mobil kleiner und werden nicht abgebrochen */
	h1 {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		font-size: 1.5em;
		height: 105px;
		margin: 0 0 15px 0!important;
		padding: 0;
		white-space: normal;
	}
	
	h1 ~ .index-list {
		margin-top: -15px;
	}

	/* Ansichts-Steuerung Navigation */
	.desktop-navigation{
		display: none;
	}
	
	.mobile-navigation {
		display: block;
		max-width: 100%;
	}

	/* Um Darstellungsfehler zu vermeiden, wird der Stempel nicht am Header, sondern am Body befestigt */
	body {
		background: #FFF url('../media/stempel.png') no-repeat 5px 55px;
	}

	header {
		background: none;
		line-height: 1.5;
		margin-bottom: 10px;
	}

	/* Facebook-Box mit Bild ausblenden, bis eine mobile Lösung gefunden ist */
	.startseite-facebook-wrapper {
		display: none;
	}

	/* Eingabefeld für Newsletter auf der Startseite */
	.startseite-newsletter-input {
		width: auto !important;
	}

	/* Seitenleiste auf "Aktuelles"-Seite mobil ausblenden */	
	.aktuelles-sidebar {
		display: none;
	}
	
	/* Bilder neben Text auf 'Für Schüler und Lehrer' (.decoimage) */
	/* Bilder neben Text auf Startseite (.right) */
	.decoimage,
	.right {
		display: block;
		float: none;
		margin: 0 auto 1em;
		padding: 0;
		text-align: center;
	}
	
	/* Archivseiten */
	.column-wrapper > .column,
	.column-wrapper>.column:first-child {
		border: none;
		padding: 10px 0;
	}
	
	.card-category .column>.card-group>ul>li,
	.card-list .column>.card-group>ul>li {
		padding: 0;
	}
	
	.card-category .column .thumbnails, 
	.card-list .column .thumbnails {
		position: relative;
	}
	
	/* Postkarten-Detailseite */
	aside {
		/* Platz schaffen für die Thumbnails */
		padding-top: 100px;
		padding-left: 10px;
		padding-right: 10px;
		background: white;
		display: block;
		float: none;
		margin: 0 -10px;
		width: auto;
		position: relative;
	}
	
	.card-details h1+.card {
		max-width: 100%;
		/* Den Fancy-Hintergrund entfernen, da er leider verzieht wenn man den Bildschirm kleiner macht */
		background: none;
		margin-left: 0;
		margin-bottom: 10px;
		padding: 0;
	}
	
	.card-details h1+.card.portrait {
		/* Den Fancy-Hintergrund entfernen, da er leider verzieht wenn man den Bildschirm kleiner macht */
		background: none;
		margin: 0;
	}
	
	.card-details h1+.card li {
		max-width: 100%;
		/* Den Fancy-Hintergrund entfernen, da er leider verzieht wenn man den Bildschirm kleiner macht */
		background: none;
		padding: 0;
	}
	
	.card-details #map {
		position: relative;
		top: auto;
		left: auto;
	}
	
	.card-details #map h2 {
		background: none;
		text-align: left;
		color: inherit;
		padding: 0;
		text-shadow: none;
		position: relative;
		bottom: auto;
		left: auto;
		width: auto;
		margin: 0 0 10px;
	}
	
	/* Thumbnails unter die Karte packen */
	.card-details #thumbnails {
		background: none;
		position: absolute;
		top: 10px;
		/* Important, um die von irgend einem JS geschriebene Margin zu überschreiben */
		margin-top: -180px !important;
		margin-left: 0px;
		margin-bottom: 10px;
		padding: 0;
		width: auto;
		
		/* Transparenz hart setzen, da mobil kein Zoom */
		opacity: 1 !important;
	}
	
	/* Extra-Anpassungen für Seiten mit Portrait-Karten */
	.card-details-portrait {}
	
	.card-details #thumbnails .card {
		display: flex;
		padding-right: 10px;
		align-items: center;
	}
	
	.card-details #thumbnails .card.portrait img {
		/* Höhe von Bildern im Portrait-Format begrenzen */
		max-height: 50px;
	}
	
	section {
		display: block;
		float: none;
		margin: 0;
		width: auto;
	}
	
	.card-details #description {
		max-width: 100%;
	}
	
	.card-details #transcript {
		max-width: 100%;
	}
	
	.card-details #similar>ul {
		display: block;
	}
	
	.card-details #similar>ul>li {
		display: inline-block;
		margin-bottom: 20px;
		margin-right: 20px;
	}
	
	#zoom {
		display: none !important;
	}
	
	/* Schriftgröße muss mindestens 16px betragen, damit iOS-Geräte nicht das Formular zoomen */
	.card-details #transcript textarea {
		max-width: 100%;
	}
	
	.card-details #transcript input {
		width: auto;
		max-width: 100%;
	}

	textarea, input[type=text], input[type=email] {
		font-size: 16px !important;
	}
	
	/* Mini-Map auf Detailseiten */
	.card-details #map {
		margin: 15px 0;
	}
	#minimap {
		width: 100% !important;
		height: 200px !important;
	}

	/* Stadtplan */
	#stadtplan {
		height: 400px !important;
	}

	/* Zeitleiste */
	.timeline > li {
		width: 150px;
	}

	/* Suchseite */
	#search-input {
		max-width: 100%;
	}
	#search-filters select {
		margin-bottom: 8px;
	}
	.result-thumb {
		width: 60px !important;
	}

	/* Lightbox */
	#lightbox-img {
		max-width: 95vw;
		max-height: 85vh;
	}
	#lightbox-close {
		top: 10px;
		right: 15px;
	}

	/* Kontaktformular */
	#contact-form input,
	#contact-form textarea {
		max-width: 100% !important;
	}

	/* Footer: Listen untereinander statt nebeneinander */
	footer > ul > li {
		display: block;
		margin-bottom: 10px;
	}

	/* ENDE DES MOBILEN TEILS */
}