/********************************************************
* Filename:     responsive.css
* Description:  css-Datei für responsives Layout
* Author:		    Ing. Andreas Gabriel - 2020-10-16
********************************************************/


/************************************************************
  Responsive Layouts
************************************************************/
@media (max-width: 1350px) {
	#mainmenu a { padding:.4em .6em; }
}

@media (max-width: 1250px) {
  body { font-size:17px; }
	#terminanfrage { height:36.5em; }
}

@media (max-width: 1150px) {
	#mainmenu a { padding:.4em .4em; }
}

@media (max-width: 1090px) {
	#mainmenu { font-size:100%; margin:.8em; }
	.mainmenugrid	{ grid-gap:.1em; }
}

@media (max-width: 950px) {
  body { font-size:16px; }
	#terminanfrage { height:38.5em; }
}

@media (max-width: 880px) {		/* Burgermenu und umschalten auf einspaltig */ 
	#menuwrapper { position:fixed; width:100%; top:0; }
	#mainmenu { display:none; }
	#bmwrapper { display:block; }
	.contentwrapper { padding-top:3em; }

	#headerwrapper { height:auto; }
	#logo { margin:1.6em auto 0 auto; }
	#header .contact { text-align:center; margin:0 auto; }
	#header .contact { margin-top:1.5em; }
	#header .contact .lettering { display:none; }
	#header .contact .slogan { display:none; font-size:105%; }
	#emoimagewrapper { padding-bottom:1.5em }
	#imagewrapper { border-radius:.5em; }
	#homebutton { padding: .9em 1em .9em .5em; }
	#menubarlogo { height:1em; margin-bottom:0; }
	#nextAppearances { margin-top:-2.5em; }

	.headergrid { grid-template-columns:100%; }
	.standardgrid { grid-template-columns:100%; }
	.archivgrid { grid-gap:0 1em; }
	.archivgrid2 { grid-template-columns:auto; grid-gap:.3em; }
	.musikergrid { grid-template-columns:100%; grid-gap:0; }
	.musikergrid2 { grid-gap:0 1em; }
	.historygrid { grid-template-columns:100%; grid-gap:0; }
	.mediagrid { grid-template-columns:100%; grid-gap:0; }
	.right { text-align:left }

	.pprofil { margin-bottom:1em; text-align:left; grid-template-columns:min-content auto; }
	.pprofil .zitat { align-self:center; font-size:100%; }
	.portrait img { margin:0; }
	#musiker .zitat { text-align:left; }
	#musiker details { margin-bottom:3em; }
	#geschichte #gruppenbild {grid-column:1; }
	.historygrid .stillive { margin-bottom:2em; }
	#hoerproben h2 { margin-top:1.5em; }
	.mediaheadergrid .info { margin-left:0; }

	.address {
		display: grid;
    grid-template-columns: auto auto;
    width: fit-content;
    margin: 0 auto;
		margin-top:.5em;
	}
	.address div:nth-child(2)::after { content:''; }
	.address div:nth-child(3) { text-align:right; }
	.address div:nth-child(4) { text-align:left; }

	.footergrid { grid-template-columns:auto; grid-gap:3em; }
	#footermenu { text-align:center; }
	#centerblock { text-align:center; }
	#footer .contact { text-align:center; margin:1em auto; }
	#footer .address { margin-top:1em; }
	#copyright { text-align:center; font-size:70%; margin-top:2em; }
}

@media (max-width:640px) {
	#terminanfrage { height:58em; }
}

@media (max-width:600px) {
	#eventswrapper { grid-template-columns: 100%; }
	#eventswrapper div div,
	#eventswrapper div h2,
	#eventswrapper div h3 { display:inline; }
	#eventswrapper div div { margin-right:.5em; }
	#eventswrapper div h2,
	#eventswrapper div h3 { margin-right:.2em; }
	#eventswrapper > div { padding:.5em 1.2em; text-align:center; }
	#eventswrapper .eventHint { grid-column:1; }
}

@media (max-width: 460px) {
	.subwrapper { margin:0 1em; }
}

@media (max-width: 360px) {
}