@charset "utf-8";

/*
Responsive layer for the archived 2012 BG site.
Desktop remains governed by the original CSS; these rules only start once the
fixed 960px layout no longer fits comfortably.
*/

@media screen and (max-width: 980px) {
	html {
		-webkit-text-size-adjust: 100%;
	}

	body {
		min-width: 0;
		text-align: left;
	}

	img,
	object,
	embed,
	iframe {
		max-width: 100%;
	}

	img {
		height: auto;
	}

	textarea,
	input,
	select {
		box-sizing: border-box;
		max-width: 100%;
	}

	#header,
	#content-wrapper,
	#content,
	#footer {
		box-sizing: border-box;
		width: auto;
		max-width: 960px;
		margin-left: 10px;
		margin-right: 10px;
	}

	#header-wrapper {
		min-width: 0;
	}

	#header {
		min-height: 136px;
	}

	h1 a {
		box-sizing: content-box;
	}

	#nav_main {
		position: static;
		right: auto;
		bottom: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin: 0 10px;
		padding-bottom: 4px;
	}

	#nav_main li {
		float: none;
	}

	#nav_main a,
	body.nm-startseite li#nm-startseite a,
	body.nm-informationen li#nm-informationen a,
	body.nm-aktivitaeten li#nm-aktivitaeten a,
	body.nm-downloads li#nm-downloads a,
	body.nm-blog li#nm-blog a,
	body.nm-termine li#nm-termine a,
	body.nm-galerie li#nm-galerie a,
	body.startseite li#nm-startseite a,
	body.informationen li#nm-informationen a,
	body.aktivitaeten li#nm-aktivitaeten a,
	body.downloads li#nm-downloads a,
	body.blog li#nm-blog a,
	body.termine li#nm-termine a,
	body.galerie li#nm-galerie a {
		margin: 0;
		padding-left: 13px;
		padding-right: 13px;
		white-space: nowrap;
	}

	#nav_header-wrapper {
		right: 20px;
		top: 20px;
	}

	#nm-informationen-box {
		display: none !important;
	}

	#content {
		overflow: hidden;
	}

	.alert h2,
	.alert p,
	.error h2,
	.error p,
	.success h2,
	.success p {
		box-sizing: border-box;
		width: auto;
		max-width: 920px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.col,
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col7,
	.col8,
	.col9,
	.col10,
	.col11,
	.col12,
	.colp33,
	.colp66,
	.marg.col,
	.marg.col2,
	.marg.col3,
	.marg.col4,
	.marg.col5,
	.marg.col6,
	.marg.col7,
	.marg.col8,
	.marg.col9,
	.marg.col10,
	.marg.col11,
	.marg.col12 {
		box-sizing: border-box;
	}

	#main.colp66,
	.colp66 {
		width: 66.666%;
	}

	#sidebar.colp33,
	.colp33 {
		width: 33.333%;
	}

	.col12,
	#main.col12 {
		width: 100%;
	}

	.col6 {
		width: 50%;
	}

	.col4 {
		width: 33.333%;
	}

	.col3 {
		width: 25%;
	}

	.subgrid {
		margin-left: -20px;
		margin-right: -20px;
	}

	#content,
	body.startseite #content,
	body.blog #content,
	body.blog_artikel #content,
	body.termine #content,
	body.termine_detail #content,
	body.aktivitaeten #content,
	body.aktivitaeten_detail #content,
	body.informationen_detail #content,
	body.kontakt #content {
		background-image: none;
	}

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

	.text dl.text dd,
	.text .box dl.text dd {
		box-sizing: border-box;
		max-width: calc(100% - 140px);
		width: auto;
	}

	.box {
		box-sizing: border-box;
	}

	.text table {
		display: block;
		overflow-x: auto;
		width: 100%;
	}

	ul.termin {
		box-sizing: border-box;
	}

	ul.termin h3 {
		width: auto;
	}

	#welcome a.read-more span {
		width: 100%;
		height: 100%;
		line-height: 292px;
	}

	#welcome a.read-more {
		max-width: 438px;
	}

	#welcome a.read-more img {
		display: block;
		width: 100%;
	}

	#subscriptions.col6 {
		overflow: hidden;
	}

	#galerie-box {
		box-sizing: border-box;
		width: auto;
		margin-left: 10px;
		margin-right: 10px;
	}

	.album_preview {
		box-sizing: border-box;
		width: 100%;
		max-width: 438px;
	}

	body.galerie-bild .galerie_picture img {
		max-width: 100%;
		height: auto;
	}

	body.kontakt #js-contact_form input,
	body.kontakt #js-contact_form textarea {
		box-sizing: border-box;
		width: 100%;
	}

	.reunion-meta li {
		box-sizing: border-box;
		width: calc(33.333% - 20px);
	}
}

@media screen and (max-width: 820px) {
	#header {
		min-height: 180px;
	}

	#nav_header-wrapper {
		display: none;
	}

	#main.colp66,
	#sidebar.colp33,
	.colp66,
	.colp33,
	.col6,
	.col4,
	.col3,
	.col2,
	.col,
	.marg.col,
	.marg.col2,
	.marg.col3,
	.marg.col4,
	.marg.col5,
	.marg.col6,
	.marg.col7,
	.marg.col8,
	.marg.col9,
	.marg.col10,
	.marg.col11,
	.marg.col12 {
		float: none;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}

	#sidebar {
		clear: both;
	}

	#content .col,
	#content .col2,
	#content .col3,
	#content .col4,
	#content .col5,
	#content .col6,
	#content .col7,
	#content .col8,
	#content .col9,
	#content .col10,
	#content .col11,
	#content .col12,
	#content .colp33,
	#content .colp66 {
		padding-bottom: 20px;
	}

	#entrance,
	#welcome,
	#subscriptions.col6 {
		border-right: 0;
	}

	#subscriptions.col6 {
		border-top: 1px solid #ccc;
	}

	#subscr_newsl,
	#subscr_feeds {
		width: auto;
		max-width: 260px;
	}

	#subscr_feeds {
		margin-left: 24px;
	}

	#galerie-box li {
		float: left;
		box-sizing: border-box;
		width: 50%;
		min-height: 290px;
		border-left: 0;
	}

	.reunion-meta li,
	.reunion-note,
	.reunion-form {
		float: none;
		width: auto;
		margin-right: 0;
	}

	.reunion-note {
		margin-bottom: 18px;
	}
}

@media screen and (max-width: 620px) {
	body {
		font-size: 13px;
		line-height: 22px;
	}

	#header,
	#content-wrapper,
	#content,
	#footer,
	#galerie-box {
		margin-left: 10px;
		margin-right: 10px;
	}

	#header {
		min-height: 0;
		padding-bottom: 10px;
	}

	h1 a {
		width: 205px;
		height: 44px;
		padding: 24px 10px 20px;
		background-position: 0 50%;
		background-size: 205px auto;
	}

	#nav_main {
		margin: 0 10px;
	}

	#nav_main a,
	body.nm-startseite li#nm-startseite a,
	body.nm-informationen li#nm-informationen a,
	body.nm-aktivitaeten li#nm-aktivitaeten a,
	body.nm-downloads li#nm-downloads a,
	body.nm-blog li#nm-blog a,
	body.nm-termine li#nm-termine a,
	body.nm-galerie li#nm-galerie a,
	body.startseite li#nm-startseite a,
	body.informationen li#nm-informationen a,
	body.aktivitaeten li#nm-aktivitaeten a,
	body.downloads li#nm-downloads a,
	body.blog li#nm-blog a,
	body.termine li#nm-termine a,
	body.galerie li#nm-galerie a {
		font-size: 13px;
		line-height: 32px;
		padding-left: 11px;
		padding-right: 11px;
	}

	#content > h2,
	#content > h3,
	#content > h4,
	#content > p,
	#content > #nav_breadcrumb {
		margin-left: 14px;
		margin-right: 14px;
	}

	#nav_breadcrumb {
		padding-top: 12px;
	}

	h2 {
		font-size: 24px;
		line-height: 32px;
	}

	h3 {
		font-size: 19px;
		line-height: 28px;
	}

	.col,
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col7,
	.col8,
	.col9,
	.col10,
	.col11,
	.col12,
	.colp33,
	.colp66 {
		padding-left: 14px;
		padding-right: 14px;
	}

	.subgrid {
		margin-left: -14px;
		margin-right: -14px;
	}

	.text dl.text dt,
	.text dl.text dd,
	.text .box dl.text dd {
		float: none;
		position: static;
		width: auto;
		max-width: none;
		border-left: 0;
		border-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	ul.termin {
		padding-left: 0;
	}

	ul.termin .meta_date {
		position: static;
		display: block;
		box-sizing: border-box;
		width: auto;
		margin-bottom: 8px;
	}

	.apm_list > li,
	.apm_item,
	.bo_event > ul .apm_item,
	#sidebar .apm_item {
		padding-left: 0;
	}

	.apm_list .meta_date_start,
	.apm_list .meta_date_end,
	.apm_item .meta_date_start,
	.apm_item .meta_date_end,
	#sidebar .apm_item .meta_date_start,
	#sidebar .apm_item .meta_date_end {
		position: static;
		float: left;
		margin: 0 8px 10px 0;
	}

	.apm_list .meta_until,
	.apm_item .meta_until,
	#sidebar .apm_item .meta_until {
		display: none;
	}

	.apm_list h3,
	.apm_item h3 {
		clear: both;
	}

	.dl_list li a {
		padding-right: 30px;
		line-height: 22px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.dl_list .meta_size {
		position: static;
		display: block;
	}

	.bo_album h3,
	.bo_album h4,
	.bo_album p.meta_photographers,
	.bo_album .meta {
		margin-left: 0;
	}

	a.bo_album_preview {
		float: none;
		margin: 0 0 15px;
	}

	.album_preview {
		height: auto;
		min-height: 198px;
	}

	.album_preview .image-wrapper,
	.album_preview .meta_date {
		float: none;
	}

	.album_preview .meta,
	.album_preview .meta_descr {
		position: static;
		box-sizing: border-box;
		width: auto;
	}

	.image_preview span {
		width: 100%;
		max-width: 198px;
		margin: 0 auto;
	}

	#galerie-box li {
		float: none;
		width: auto;
		height: auto;
		min-height: 260px;
		padding-left: 14px;
	}

	#subscr_newsl,
	#subscr_feeds {
		float: none;
		width: auto;
		max-width: none;
		margin-left: 0;
	}

	#NewsletterEMailAddress {
		width: calc(100% - 44px);
	}

	#unesco {
		padding-top: 22px;
		padding-bottom: 22px;
	}

	.reunion-page {
		padding-left: 14px;
		padding-right: 14px;
	}

	.reunion-hero h2 {
		font-size: 26px;
		line-height: 32px;
	}

	.reunion-inline .reunion-row {
		float: none;
		width: auto;
	}

	.reunion-submit {
		width: 100%;
	}
}