/*
Theme Name: dgsberlin, based on Twenty Sixteen V1.9
Author: muvicom � Fa. Uwe Meurer
Author URI: https://www.muvicom.de/

CSS for mobile
*/




@media ( max-width: 1151px ) {

	:root {
		/* colors */
		--std-color-orange-alpha: rgb(247, 198, 129);
		--std-color-turquoise-alpha: rgb(168, 200, 199);
		--std-color-green-alpha: rgb(193, 196, 163);
		
		/* font sizes */
		--mobile-fontsize: 15.5px;
		--mobile-lineheight: 1.35em;
		--mobile-fontsize-i: 1.02em;
		--mobile-lineheight-i: 1.375em;
		--mobile-fontsize-maintopic-headline: 27.1px;
		--mobile-lineheight-maintopic-headline: 1.3em;
		--mobile-fontsize-maintopic-subline: 19px;
		--mobile-lineheight-maintopic-subline: 1.21em; /* 23px */
		--mobile-fontsize-big-headline: 24px;
		--mobile-lineheight-big-headline: 1.3em;
		--mobile-fontsize-medium-headline: 20px;
		--mobile-lineheight-medium-headline: 1.3em; /* 36px */
		--mobile-fontsize-medium-subline: 16px;
		--mobile-lineheight-medium-subline: 1.2em;
		--mobile-fontsize-small-headline: 16px;
		--mobile-lineheight-small-headline: 1.2em;
		/* layout */
		--mobile-visual-left-content-column: 44%;
		--mobile-visual-top-bar-height: 5.5em;
		/*--mobile-visual-left-content-column-selected: 30.6%; /* [(100 / (44 + 100)) * 44] */
		--mobile-visual-left-content-column-selected: 8em;
		--mobile-visual-left-content-column-trans: all 0.4s ease-out;
		--mobile-visual-left-content-column-trans-05: all 0.5s ease-out;
	}
	
	body {
		font-size: var(--mobile-fontsize);
		line-height: var(--mobile-lineheight);
	}
	
	i,
	em,
	.italic, 
	.italic * {
		font-size: var(--mobile-fontsize-i);
		line-height: var(--mobile-lineheight-i);
	}

	figcaption {
		margin: 0.3em 1.2em 0em;
	}
	
	
	#top-container {
		min-width: var(--std-visual-global-min-width);
		height: var(--mobile-visual-top-bar-height);
	}

	#logo-navigation-container {
		position: relative;
		width: 100%;
		height: 100%;
		display: block;
	}
	
	#dgs-logo-container {
		width: var(--mobile-visual-left-content-column);
		min-width: 158px;
	}
	
	#dgs-logo-container a {
		bottom: 1em;
		left: var(--std-box-padding-left);
	}
	
	#dgs-logo-container img {
		width: 74px;
	}
	
	#site-navigation-container {
		width: calc(100% - var(--mobile-visual-left-content-column));
	}
	
	#content-area {
		padding-top: 7.5em;
		overflow: hidden;
	}
	
	#aside-first {
		margin-top: 1.5em;
	}
	
	#aside-first-main,
	.column-reverse {
		display: flex;
		flex-direction: column-reverse;
	}
	
	/**
	 * .0 - box standard
	 */
	.box h1 {
		margin-bottom: 0.6em;
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}

	.box * + h1 {
		margin-top: 0.75em;
	}
	
	.box h2, .box h3 {
		margin-top: 0.66em;
		font-size: var(--mobile-fontsize-small-headline);
		line-height: var(--mobile-lineheight-small-headline);
	}

	/**
	 * .0 - Social Media
	 */
	#socialmedia-container {
		top: 0.35em;
		right: 1em;
		width: calc(98% - var(--mobile-visual-left-content-column) - 1em);
		height: 1em;
		flex-direction: row-reverse;
	}
	
	.socialmedia-icon {
		height: 100%;
		width: 1em;
		margin-left: 0.5em;
	}

	
	/**
	 * .0 - Footer
	 */
	#foot-container {
		margin-top: 4em;
	}
	
	#foot-container > div:first-child {
		width: 100%;
		padding: 1em 0;
	}
	
	
	#foot-container img {
		width: 4.875em;
		margin-bottom: 0.8em;
		margin-left: var(--std-box-padding-left);
	}
	
	#foot-container > div:first-child p {
		margin-right: var(--std-box-padding-right);
		margin-left: calc(1.6em + var(--std-box-padding-left));
	}
	
	#foot-container > div:nth-child(2) {
		display: none;
	}
	
	
	/**
	 * .0 - Menu
	 */
	#mobile-navigation-container {
		width: 100%;;
		min-width: var(--std-visual-global-min-width);
	}
	 
	#desktop-navigation-container {
		display: none;
	}
	
	#mobile-menu-icon {
		position: absolute;
		top: -2.6em;
		right: 1em;
		bottom: 1em;
		display: block;
	}
	#mobile-menu-icon:hover {
		cursor: pointer;
	}
	#mobile-menu-icon li,
	#mobile-menu-icon li:visited {
		width: 27px;
		height: 4px;
		border-radius: 2px;
		background-color: var(--std-color-beige-grey-dark);
		transition: var(--std-content-trans);
	}
	#mobile-menu-icon li:last-child {
		background-color: var(--std-color-orange);
	}
	#mobile-menu-icon li + li {
		margin-top: 6px;
	}
	/*#mobile-menu-icon:hover li,*/
	#mobile-menu-icon:active li {
		background-color: var(--std-color-orange);
	}
	
	#mobile-navigation-container.selected #mobile-menu-icon li {
		width: 15px;
	}
	#mobile-navigation-container.selected #mobile-menu-icon li:first-child {
		margin-top: 12px;
		transform: rotate(-45deg);
	}
	#mobile-navigation-container.selected #mobile-menu-icon li:nth-child(2) {
		margin-top: -3px;
		transform: rotate(45deg);
	}
	#mobile-navigation-container.selected #mobile-menu-icon li:last-child {
		opacity: 0;
	}
	
	#mobile-menu {
		position: absolute;
		top: 0;
		right: -25em;
		width: 100%;
		max-width: 25em;
		padding-top: 0.5em;
		border-top: 2px solid var(--std-color-beige-grey-mid);
		border-bottom: 2px solid var(--std-color-beige-grey-mid);
		background-color: var(--std-color-beige-bright);
		transition: var(--std-long-content-trans);
	}
	
	#mobile-navigation-container.selected #mobile-menu {
		right: 0;
	}

	#mobile-menu li a,
	#mobile-menu li a:visited {
		padding: 0.3em 0.7em 0.25em 0.7em;
		display: block;
		color: var(--std-color-text-mid-grey);
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}
	
	#mobile-menu li a:hover {
		color: var(--std-color-text-dark-grey);
	}

	#mobile-menu li a:active {
		color: var(--std-color-orange);
	}
	
	#mobile-menu .global-menu {
		margin-top: 0.5em;
		padding: 0.35em 0 0.35em;
		border-top: 2px solid var(--std-color-beige-grey-mid);
		background-color: var(--std-color-beige);
	}
	
	#mobile-menu .global-menu li a {
		font-weight: normal;
	}
	
	#mobile-menu .global-menu li.current-menu-item a {
		font-weight: bold;
	}
	
	
	/**
	 * .0 - General
	 */
	* + #main-content {
		margin-top: 2em;
	}
	
	#main-content.two-columns {
		display: flex;
		flex-direction: column; /*-reverse;*/
	}

	/**
	 * .0 - front page
	 */
 	/*** topics ***/
	#main-topics-container-desktop {
		display: none;
	}
	
	#main-topics-container {
		width: 100%;
		color: #ffffff;
	}
	
	#main-topics-container article {
		cursor: pointer;
	}
	
	#main-topics-container article + article {
		margin-top: 1.5em;
	}
	
	.main-topic-picture {
		display: flex;
		flex-direction: row;
	}
	
	.main-topic-picture picture {
		width: var(--mobile-visual-left-content-column);
		z-index: 2;
	}
	.main-topic-picture picture img {
		width: 100%;
	}
	
	.main-topic-picture header {
		position: relative;
		left: 0;
		width: calc(100% - var(--mobile-visual-left-content-column));
		display: flex;
		font-style: italic;
		z-index: 3;
		transition: var(--std-long-content-trans);
	}
	.selected .main-topic-picture header {
		left: -44.3%;
	}

	.main-topic-picture header > div:first-child {
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 0.8em 1em;
		box-sizing: border-box;
		background-color: var(--std-color-orange);
		transition: var(--std-long-content-trans);
	}
	.selected .main-topic-picture header > div:first-child {
		width: 180%;
		padding: 0.8em 1.1em;
	}
	
	.main-topic-picture header h1 {
		font-size: var(--mobile-fontsize-maintopic-headline);
		line-height: var(--mobile-lineheight-maintopic-headline);
	}
	
	.main-topic-picture header > div {
		font-size: var(--mobile-fontsize-maintopic-subline);
		line-height: var(--mobile-lineheight-maintopic-subline);
		z-index: 4;
	}
		
	.main-topic-picture .triangle {
		position: relative;
		left: -0.7em;
		align-self: center;
		z-index: 3;
	}

	.main-topic-text {
		position: relative;
		width: 100%;
		margin-top: 0;
		box-sizing: border-box;
		background-color: var(--std-color-orange-dark);
		z-index: 6;
		transition: var(--std-long-content-trans);
	}
	#main-topics-container article.selected .main-topic-text {
		margin-top: -1.5em;
	}

	.main-topic-text > div {
		position: relative;
		overflow: hidden;
	}
	
	.main-topic-text > div > div {
		position: relative;
		margin-top: -25em;
		padding: 1.25em 2em 1.25em var(--std-box-padding-left);
		z-index: 7;
		transition: var(--std-long-content-trans);
	}
	#main-topics-container article.selected .main-topic-text > div > div {
		margin-top: 0;
	}
	
	.main-topic-text .triangle {
		position: absolute;
		top: -0.7em;
		left: calc(var(--mobile-visual-left-content-column) - 1em);
		opacity: 0;
		background-color: var(--std-color-orange-dark);
		z-index: 6;
		transition: var(--std-content-trans);
	}
	#main-topics-container article.selected .triangle {
		opacity: 1;
	}

	#main-topics-container article:nth-child(2) .main-topic-picture header > div,
	#main-topics-container article:nth-child(2) .triangle {
		background-color: var(--std-color-turquoise);
	}

	#main-topics-container article:nth-child(3) .main-topic-picture header > div,
	#main-topics-container article:nth-child(3) .triangle {
		background-color: var(--std-color-green);
	}

	#main-topics-container article:nth-child(2) .main-topic-text,
	#main-topics-container article:nth-child(2) .main-topic-text .triangle {
		background-color: var(--std-color-turquoise-dark);
	}

	#main-topics-container article:nth-child(3) .main-topic-text,
	#main-topics-container article:nth-child(3) .main-topic-text .triangle {
		background-color: var(--std-color-green-dark);
	}

	/**
	 * .0 - category selection
	 */
	.category-posts-selection article h1 {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}
	
	.solarservices {
		flex-direction: row-reverse;
	}
	
	.solarservices aside {
		width: 100%;
	}
	
	.category-posts > div {
		margin-top: 1.5em;
	}
	.category-posts > div + div {
		margin-top: 0;
		margin-left: 0;
	}
	

	/**
	 * .0 - prologue
	 */	
	.prologue {
		margin-bottom: 1.5em;
	} 
	 
	.prologue-text {
		margin-top: 1.5em;
	}
	 
	figure .image-ontop > div,
	.prologue-text > * {
		padding-right: var(--std-box-padding-right);
		padding-left: var(--std-box-padding-left);
	}
	
	figure .image-ontop > div p {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}
	figure .image-ontop > div p:first-child {
		font-size: var(--mobile-fontsize-medium-subline);
		line-height: var(--mobile-lineheight-medium-subline);
	}

	.prologue-text h1 {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}
	
	.services-prologue-image > div p {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}
	.services-prologue-image > div p:first-child {
		font-size: var(--mobile-fontsize-medium-subline);
		line-height: var(--mobile-lineheight-medium-subline);
	}
	
	.services-prologue-text h1 {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}
	
	/**
	 * .0 - aside box
	 */
	.teaser .box header,
	aside .contact header,
	.box.info header {
		padding: 0.4em var(--std-box-padding-right) 0.3em var(--std-box-padding-left);
	}
	
	.teaser .box header h1,
	aside .contact h1 {
		font-size: var(--mobile-fontsize-big-headline);
		line-height: var(--mobile-lineheight-big-headline);
	}

	/**
	 * .0 - contact
	 */
	.box.post-detail .contact,
	.box.post-detail .contact + * {
		margin-top: 0.6em;
	}
	 	
	aside .contact header {
		padding: 0.33em 0.66em;
	}
	
	aside .contact h1 {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}

	.box.post-detail .contact .box {
		margin-left: calc(-1 * var(--std-box-padding-left));
		margin-right: calc(-1 * var(--std-box-padding-right));
	}

	.box.post-detail .contact .box + .box {
		margin-top: 1.3em;
	}

	.box.post-detail .contact .box > div {
		padding-left: var(--std-box-padding-left);
		padding-right: var(--std-box-padding-right);
	}
	
	/**
	 * .0 - aside teaser
	 */
	#aside-teaser > section > header h1 {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}

	.teaser .box h1,
	.teaser .box h2,
	.contact .box h1 {
		font-size: var(--mobile-fontsize-small-headline);
		line-height: var(--mobile-lineheight-small-headline);
	}

	.teaser-post-selection {
		position: relative;
		max-height: initial;
		display: flex;
		/*overflow: visible;*/
	}

	.teaser-post-selection .box > * > picture img {
		width: 100%;
	}

	.teaser-post-selection .box > * {
		width: 14.5em;
		height: 100%;
		display: grid;
		grid-template-areas: "pic"
							 "text";
		grid-template-rows: 14.5em 1fr;
		grid-template-columns: auto;
	}
	
	.teaser-post-selection .box picture {
		grid-area: pic;
		width: 100%;
	}

	.teaser-post-selection .box section {
		grid-area: text;
	}

	.teaser-post-selection .box + .box {
		margin-top: 0;
		margin-left: 1.5em;
	}

	/**
	 * .0 - aside teaser grid
	 */
	#aside-teaser.grid.gridcols {
		column-count: auto !important;
	}

	#aside-teaser.grid .teaser-post-selection article {
		width: auto !important;
	}
	
	#aside-teaser.grid .teaser-post-selection .text-bottom {
		align-self: flex-start;
	}
	

	/**
	 * .0 - widgets
	 */	
	 
	/* box info */
	/*
	.box.info .beside {
		display: grid;
		grid-template-areas: "pic text";
		grid-template-columns: 2.5fr 1fr;
	}
	*/
	
	 
	/* offer box */
	.box.info.offer {
		grid-template-areas: "pic head"
							 "text text";
		grid-template-columns: var(--mobile-visual-left-content-column) 1fr;
	}

	.box.info.offer header {
		padding: 0.25em 1em 0.5em;
	}
	
	.box.info.offer header .triangleClip.down.small {
		top: calc(50% - 0.9em);
		bottom: auto;
		left: -0.89em;
		width: 0.9em;
		height: 1.8em;
		clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
	}

	/**
	 * .0 - post-detail
	 */
	.box.post-detail > figure,
	.box.post-detail footer {
		margin: 0.5em 0 1.25em calc(-1 * var(--std-box-padding-left));
	}

	.box.post-detail > figure picture,
	.box.post-detail footer {
		width: calc(100% + var(--std-box-padding-right) + var(--std-box-padding-left));
	}

	.box.post-detail > figure figcaption {
		margin-right: var(--std-box-padding-right);
		margin-left: var(--std-box-padding-left);
	}

	.box.post-detail > div figure {
		margin: 0.7em 0 1em;
	}

	.box.post-detail > div img {
		margin: 0.7em 0 0.5em;
	}
	
	.box.post-detail > div {
		margin-top: 1.25em;
	}

	.box.post-detail h3 {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}	

	.box.post-detail h1 + h2 {
		margin-top: 0;
	}

	.box.post-detail * + h3 {
		margin-top: 0.6em;
	}
	
	.box.post-detail h3 + h4 {
		margin-top: 0.3em;
	}
	
	.box.post-detail h4 {
		margin-top: 0.5em;
		color: inherit;
		font-size: inherit;
		line-height: inherit;
	}	
	
	.box.post-detail footer {
		margin-top: 1.5em;
		margin-bottom: calc(-1 * var(--std-box-padding-bottom));
		padding: 1em var(--std-box-padding-right) 1.5em var(--std-box-padding-left);
	}

	.box.post-detail footer article + article {
		margin-top: 1.3em;
	}
	
	
	/**
	 * .0 - course
	 */
	.course h1 {
		margin-bottom: 0;
	}

	.box.post-detail.course .text-fullwidth header {
		margin-right: calc(-1 * var(--std-box-padding-right));
		margin-left: calc(-1 * var(--std-box-padding-left));
		padding-right: var(--std-box-padding-right);
		padding-left: var(--std-box-padding-left);
		padding-top: 0.25em;
		padding-bottom: 0.25em;
	}
	
	.box.post-detail.course .text-fullwidth header h3 {
		margin-top: 0;
	}
	
	.box.post-detail.course .course-dates > * {
		margin-top: 0.5em;
	}
	
	.box.post-detail.course .course-dates a > div:first-child {
		width: 9.5em;
	}
	.box.post-detail.course .course-dates a > div + div {
		margin-left: 0.5em;
	}
	
	/**
	 * .0 - article with teaser / teaser-and-details
	 */
	.teaser-and-details + .teaser-and-details {
		margin-top: 1.5em;
	}
	 
	.teaser-and-details .box.selectable {
		font-size: var(--mobile-fontsize);
		line-height: var(--mobile-lineheight);
	}	

	.teaser-and-details .box > div > section {
		padding: 0.4em var(--std-box-padding-right) 0 var(--std-box-padding-left);
	}
	
	.teaser-and-details .box.selectable h1 {
		margin-bottom: 0.1em;
		font-size: var(--mobile-fontsize-small-headline);
		line-height: var(--mobile-lineheight-small-headline);
	}	 

	.teaser-and-details .box .teaser-details-container > div {
		padding-top: 0.4em;
	}
	.teaser-and-details.selected .box .teaser-details-container > div {
		margin-top: 0px;
	}

	.teaser-and-details .box .teaser-details-container > div > div {
		padding: 0.2em var(--std-box-padding-right) 0.9em var(--std-box-padding-left);
	}


	/**
	 * .0 - employee
	 */
	.employee {
		grid-template-areas: 	"header" 
								"aside"
								"main";
		grid-template-columns: 1fr;	
	}
	
	.employee h3 {
		font-size: inherit;
		line-height: inherit;
	}
	
	.employee > aside{
		margin-left: 0;
		flex-direction: row;
	}
	
	.employee > aside > div + div {
		margin-top: 0;
		margin-left: 1.5em;
	}
	
	/**
	 * .0 - calendar
	 */
	#calendar.box {
		padding-bottom: 0;
	}
	 
	#calendar.box > header {
		padding-bottom: 0.2em;
	}
	 
	#calendar.box > section {
		margin-left: calc(-1 * var(--std-box-padding-left));
	}

	#calendar.box > section header.date-overview {
		display: none;
	}

	article .date-overview {
		padding: 0.4em 0 0.4em calc(-7px + var(--std-box-padding-left));
	}
	
	article .date-overview > div {
		width: 92%;
	}
	
	article .date-overview > div:first-child b {
		margin-right: 0.5em;
	}

	article .date-overview > div:first-child br {
		float: left;
	}
	
	article .date-overview > div + div {
		margin-top: 0.4em;
	}
	
	article .date-overview > div:last-child {
		display: flex;
	}

	article .date-overview > div:last-child > div:first-child  {
		margin-right: 2em;
	}
	
	.date-price-detail {
		width: 300%;
	}
	
	.date-detail .box.post-detail.course {
		width: calc(calc(calc(100% - var(--std-box-padding-left)) - var(--std-box-padding-right)) - 7px);
		padding-left: calc(-7px + var(--std-box-padding-left));
	}
	
	/**
	 * .0 - order
	 */
	.order-form {
		right: 0;
		z-index: -1;
	}
	.order-form.active {
		z-index: 999;
	}
	
	.order-form > div {
		padding-top: calc(1em + var(--mobile-visual-top-bar-height));
	}
	 
	.order-form .order-content {
		width: 100%;
	}
	
	.order-form .order-content > :last-child {
		width: 100%;
	}

	.order-form .order-content-form,
	.order-form .order-content > :last-child > header {
		width: calc(calc(calc(100% - var(--std-box-padding-left)) - var(--std-box-padding-right)) - 7px);
		padding-top: 1em;
		padding-bottom: 1em;
		padding-left: calc(-7px + var(--std-box-padding-left));
	}
	.order-form .order-content > :last-child > header {
		padding-bottom: 0.2em;
	}
	
	.order-form .order-content > :last-child > header h1 {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--desktop-lineheight-medium-headline);
	}
	
	.order-form h2,
	.order-form h3 {
		font-size: var(--desktop-fontsize-small-headline);
		line-height: var(--desktop-lineheight-small-headline)
	}

	.order-form .course-to-book-discounts > div + div {
		margin-top: 0.6em;
	}

	/**
	 * .0 - woocommerce
	 */
	.woocommerce form .form-row label {
		font-size: var(--mobile-fontsize-small);
	}
	
	.woocommerce h2,
	.woocommerce h3 {
		font-size: var(--mobile-fontsize-medium-headline);
		line-height: var(--mobile-lineheight-medium-headline);
	}

} /* max-width: 1150px */


@media only screen
and (max-width: 28em) {
	figure .image-ontop > div {
		bottom: 0;
	}
	
	.box.post-detail table.first-col-head tr {
		display: grid;
		grid-template-areas: "heading" 
							 "text";
	}

	.box.post-detail table.first-col-head td {
		grid-area: heading;
	}
	.box.post-detail table.first-col-head td + td {
		padding-left: 0;
		grid-area: text;
	}
}

@media only screen
and (max-width: 41em) {
	/**
	 * .0 - widgets
	 */	
	 
	/* box info */
	.box.info .beside {
		display: grid;
		grid-template-areas: "pic ." 
							 "text text";
		grid-template-columns: 1fr 1.5fr;
	}

	.box.info .beside section {
		padding-top: 0;
		padding-right: var(--std-box-padding-right);
	}
}

@media only screen
and (min-width: 41em) 
and (max-width: 1151px) {
	:root {
		/* layout */
		--mobile-visual-left-content-column: 18em;
	}

	.selected .main-topic-picture header {
		left: -18em;
	}
}