/* Mobilansicht
   Greift nur bei Bildschirmen schmaler als 1000px (Smartphone, Tablet hochkant).
   Die Desktop-Ansicht (960px-Layout in base.css/subpages.css) bleibt unberuehrt.
   !important ist noetig, wo das HTML Inline-Styles setzt (z. B. min-width am body). */

@media (max-width: 999px) {

	body {
		min-width: 0 !important;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* Feste 960px-Breiten aufheben, seitlicher Rand 16px */
	#header-foreground,
	#content,
	#footer-foreground,
	.content-3column-container,
	.content-3column-span {
		width: auto;
		box-sizing: border-box;
	}

	#header-foreground,
	#content,
	#footer-foreground {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Kopfbereich wie am Desktop: Logo links, Navigation rechts daneben.
	   Das Logo verkleinert sich, damit die Navigation daneben Platz hat;
	   auf sehr schmalen Geraeten (unter ca. 360px) rutscht sie unter das Logo. */
	#header-foreground {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	#logo {
		float: none;
		top: 0;
		flex: 1 1 140px;
		max-width: 200px;
	}

	#logo img {
		display: block;
		width: 100%;
	}

	#navigation {
		float: none;
		top: 0;
		flex: none;
		/* bleibt rechts, auch wenn es unter das Logo rutscht */
		margin-left: auto;
	}

	/* Menuepunkte untereinander statt nebeneinander, Optik (orange Linie rechts) wie am Desktop.
	   font-size 0 blendet das   aus dem Desktop-Markup aus. */
	#navigation ul li {
		float: none;
		margin: 0 0 4px;
		font-size: 0;
		line-height: 0;
	}

	#navigation ul li:last-child {
		margin-bottom: 0;
	}

	#navigation ul li br {
		display: none;
	}

	#navigation ul li .title {
		display: inline-block;
		line-height: 20px;
	}

	/* groessere Tippflaeche */
	#navigation ul li a {
		display: inline-block;
		padding: 4px 0;
	}

	#content {
		margin-top: 10px;
		padding-bottom: 40px;
	}

	/* Einleitungsbereich: Text und Bild untereinander */
	#content-banner,
	#content-banner-impressum {
		height: auto;
		margin-bottom: 20px;
	}

	#content-left,
	#content-one-column,
	#content-right,
	.content-right {
		float: none;
		width: auto;
	}

	.content-right {
		padding: 0 !important;
		text-align: left !important;
		margin-top: 20px;
	}

	#content-right {
		background-color: transparent;
		margin-top: 20px;
	}

	#content-right img {
		position: static;
	}

	/* Platzhalter-Kasten auf der Referenzen-Seite */
	#content-right .content-3column.plain {
		display: none;
	}

	h1 {
		font-size: 26px;
	}

	/* Zitat auf der Startseite: beide Zeilen fliessen als ein Satz,
	   Anfuehrungszeichen wie bei p.quote, Autor direkt darunter */
	#teaser,
	#teaser_small {
		float: none;
	}

	#teaser {
		display: inline;
		font-size: 20px;
		line-height: 28px;
	}

	#teaser:first-child:before,
	#teaser + #teaser:after,
	#teaser_small:before {
		color: #FF8322;
		font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
		font-style: normal;
	}

	#teaser:first-child:before {
		content: "\00bb";
	}

	#teaser + #teaser:after {
		content: "\00ab";
	}

	#teaser_small:before {
		content: "\2013\00a0";
	}

	#teaser_small {
		margin: 10px 0 0;
		color: #555;
	}

	/* Porträt: mobil nicht neben dem Zitat bzw. der Einleitung,
	   sondern bei der Person (Startseite unten, Ueber uns bei der Seminarleitung) */
	.desktop-only {
		display: none;
	}

	.mobile-only {
		display: block;
	}

	.profile-card {
		display: flex;
		align-items: center;
		gap: 16px;
		padding-top: 20px;
		border-top: 1px dotted orange;
	}

	.profile-card img {
		flex: none;
		width: 112px;
		border-radius: 4px;
	}

	.profile-card p {
		font-size: 16px;
		line-height: 24px;
	}

	.profile-portrait {
		float: left;
		width: 112px;
		margin: 4px 16px 8px 0;
		border-radius: 4px;
	}

	/* Spalten untereinander */
	.content-3column,
	.content-2column-span,
	.projects-left {
		float: none;
		width: auto;
		margin-right: 0;
	}

	.content-3column[style*="text-align: right"] {
		text-align: left !important;
	}

	/* Leere Kaesten neben den Klapp-Menues */
	.projects-right {
		display: none !important;
	}

	.projects-left a,
	.projects-left button.toggle {
		font-size: 20px;
	}

	.content-3column-container ul {
		margin-left: 20px;
	}

	/* Lange Woerter und Links (z. B. URLs) umbrechen statt ueberstehen */
	#content {
		overflow-wrap: break-word;
	}

	/* Footer: Hoehe frei.
	   Der Desktop haelt den Footer per fester Hoehe und negativem Rand unten;
	   mobil uebernimmt das Flexbox, weil die Footer-Hoehe hier variiert. */
	html,
	body {
		height: auto;
	}

	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	body > #container {
		flex: 1 0 auto;
		min-height: 0;
	}

	#footer-background {
		flex-shrink: 0;
		height: auto;
		margin-top: 0;
	}

	/* Footer wie am Desktop: Links links untereinander, Copyright rechts.
	   Das Copyright steht zweizeilig, damit es neben die Links passt. */
	#footer-foreground #copyright {
		text-align: right;
	}

	#footer-foreground #copyright span {
		display: block;
	}
}