/* GLOBAL CSS
============================================ */

	html{background-color: #0c0c0f; /*height: 100%;*/}

*, *:before, *:after {box-sizing:border-box;}

	p {line-height: 1rem;}

	.popup p {line-height: 17pt;}

	.hidden {display: none;}

	h3 {color: #5e685e;}

	.liste{
		padding: 0.3rem 1rem 0.8rem 1rem;
		list-style:none;
		text-align: left;
	}

	.site-wrapper {
			display: flex;
			align-items: flex-start;
			flex: 1 1 auto;
			position: relative;
			padding: 0 2.1428571429rem;
			width: 100%;
			height: 100%;}

	.nav{flex-grow: 1;}

	.title-font, .crumb, .nav-link a, .active, .nav-btn, .site-sidebar-banner, .site-title, .site-subtitle, .album-title, .textbox, .card-font, .popup{
			font-family: "Ubuntu", sans-serif;
			font-weight: 300;
			font-style: normal;
			text-decoration: none;}

	.title-font{
			font-size: 14pt;
			line-height: 110%;
			letter-spacing: 4px;
			color: #c4b688;}

	.active, .nav-btn, .crumb a, .site-sidbar-banner a, .nav-link a:hover, .popup p a{
		color: #8c8c8b;
		text-decoration: none;
		transition: color 0.25s cubic-bezier(0.45, 0.3, 0.15, 0.95),opacity 0.25s cubic-bezier(0.45, 0.3, 0.15, 0.95);}

	.nav, .nav-link a, .active a, .nav-btn a, .site-sidebar-banner a {
			font-size: 14pt;
			font-weight: 300;
			text-decoration: none;
			color: #8c8c8b;}

	.nav-link a:hover, .nav-btn:hover, .active:hover, .site-sidebar-banner:hover, .site-sidebar-banner a:hover, .artikel-text a:hover, .popup p a:hover {color: #dbdbdb; cursor: pointer;}

	.active a{color: #dbdbdb !important;}

	.artikel-text a {
		color: #c4b688;
		text-decoration: none;}

	.nav-link, .active, .nav-btn {padding-top:30px;}

	.site-sidebar-btn .line {
			width: 1.6428571429rem;
			height: 0.2142857143rem;
			background: #8c8c8b;
			position: relative;
			transition: opacity .2s linear, transform .2s linear, left .2s linear;}

	.site-sidebar-btn .line + .line {margin-top: 0.2857142857rem;}

	.crumb {
		color: #8c8c8b;
		font-size: 10pt;
		line-height: 113%;
		letter-spacing: 2px;
		margin-top: 15px;}

	.site-sidebar{
		background-color: rgba(0, 0, 0, 0.75);
		list-style: none;
		z-index: 5;}

	.site-sidebar-body{
		padding-left: 30px;
		list-style: none;}

	.site-sidebar-banner {
		border-style: solid;
		border-color: #c4b688;
		border-width: 1px;
		padding: 1rem;
		margin: 0 1rem 0 1rem;
		text-align: center;
		cursor: pointer;
		background-color: #00000080;}

	.site-sidebar-footer {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30px;}

	.site-header{
		text-align: center;}

	.site-title{
		font-size: 14pt;
		line-height: 110%;
		color: #c4b688;
		text-transform: uppercase;
		letter-spacing: 4px;}

	.rahmen{
		background-color: #00000080;
		padding: 1.4rem;
	}

	.edge{
		border-style: solid;
		border-color: #423a2edb;
		border-width: 1px;
	}

	.spiegel{
		display: flex;
		flex-direction: row;
		margin-bottom: 1rem;
	}

	.spiegel img{flex-basis: calc(100% / 2); width:50% !important;}

	.vollzeilig {max-width: 100%}

	.zentriert {text-align: center;}

	.bottomline{border-bottom: 1px solid #fff8efa3;}

	.ribbon{display: revert !important;} /* sorgt dafür, dass die Artikel nicht nebeneinander rücken */

	.artikel-image{
		width: 100%;
		height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
		max-height: 300px;
	}

	@media (min-width: 1080px){

		body{
			display: flex;
			max-width: 100vw;
			min-height: 100vh;
		}

		.background{
			margin: -8px;
			width: 100vw;
			overflow-y: auto;
			overflow-x: hidden;
			background-color: #171720;
			background-image: url("https://www.amraswandel.de/media/Amra_2_Background.jpg");
			background-position: left;
			background-repeat: no-repeat;
			background-size: cover;
			background-attachment: fixed;
		}
		
		.site-sidebar {
			display: flex;
			flex-direction: column;
			position: fixed;
			bottom: 0;
			min-width: 300px;
			height: 100vh;}

		.site-main {
			margin-left: 300px;
			padding: 3.8rem 0 2rem 2rem;
			flex-basis: calc(100% - 300px);
			width: 100vw;}

		.site-sidebar-head {padding-left: 30px; padding-top: 5rem;}

		.site-sidebar-body {display:flex; flex-grow: 1; flex-direction: column; padding-top: 30px;}

		.artikel-grid, .button-grid {margin: 0 -0.6rem 0 -0.6rem;}

		.crumb {display: block;}

		.site-sidebar-btn {display: none;}
	}

	@media (min-width: 531px) and (max-width: 1079px){

		.background{
			margin: -8px;
			flex: 1 1 100vw;
			overflow-y: auto;
			overflow-x: hidden;
			background-color: #171720;
			background-image: url("https://www.amraswandel.de/media/Amra_2_Background.jpg");
			background-position: left;
			background-repeat: no-repeat;
			background-size: cover;
			background-attachment: fixed;
		}

		.site-main{
			width:100vw;
			padding: 5rem 0 0 0;
		}
	
		.site-sidebar{
			display: flex;
			flex-direction: column;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;}	

		.site-sidebar-head{display: flex;flex-direction: row;}

		.site-sidebar-body, .site-sidebar-footer {display: none;}

		.crumb{display: none;}

		.nav{
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;}

		.site-logo{
			display: flex;
			flex-grow: 1;
			padding: 24px 0 25px 18px;
		}

		.site-sidebar-btn {
			padding: 23px;
			cursor: pointer;
			outline: 0;
			display: block;
			background: transparent;
		}

		.site-wrapper-mobile{
			padding-left: 0;
			padding-right: 0;}

		.artikel-text{
			padding: 0 1rem 1rem 1rem;
		}
		.card{display: none;}

		.spiegel {
			margin: 0 -1rem -1rem -1rem !important;
		}
	}

		@media (min-width: 1px) and (max-width:530px){
		.background-mobile {
			margin: -8px;
			flex: 1 1 100vw;
			background-color: #171720;
			background-image: url("https://www.amraswandel.de/media/Amra_2_Background.jpg");
			overflow-y: auto;
			overflow-x: hidden;
			background-size: cover;
			background-position: left;
			background-repeat: no-repeat;
			/*will-change: transform;*/
			z-index: -1;
		}

		.site-main{
			width:100vw;
			padding: 5rem 0 0 0;
		}
	
		.site-sidebar{
			display: flex;
			flex-direction: column;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;}	

		.site-sidebar-head{display: flex;flex-direction: row;}

		.site-sidebar-body, .site-sidebar-footer {display: none;}

		.crumb{display: none;}

		.nav{
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;}

		.site-logo{
			display: flex;
			flex-grow: 1;
			padding: 24px 0 25px 18px;
		}

		.site-sidebar-btn {
			padding: 23px;
			cursor: pointer;
			outline: 0;
			display: block;
			background: transparent;
		}

		.site-wrapper-mobile{
			padding-left: 0;
			padding-right: 0;}

		.artikel-text{
			padding: 0 1rem 0 1rem;
		}
		.card{display: none;}
	}

	@media (min-width: 1px) and (max-width:439px){#spiegel-sylphen {display: none;}}
	@media (min-width: 1px) and (max-width:515px){#spiegel-aeos {display: none;}}
	@media (min-width: 1px) and (max-width:414px){#spiegel-yizari {display: none;}}
	@media (min-width: 1px) and (max-width:368px){#spiegel-dracier {display: none;}}



/* HOME CSS
============================================ */

	#home-back{
				background-image: url('https://www.amraswandel.de/media/Frontbild_sturm.jpg');
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				position: fixed;
				height: 100%;}

	.home-site-main-logo {
				background-image: url("https://www.amraswandel.de/media/AW_silver.svg");
				background-position: center;
				background-repeat: no-repeat;
				position: relative;
				min-height: 181vh;
				width: 62px;
				left: 48%;}

	@media (min-width: 1180px){

		#home-back{left: 22%; width: 65%;}
	}

	@media (max-width: 1179px){
		#home-back{width: 100%;}

		.home-site-main-logo{left:46%;}
	}

/* WELT CSS
============================================ */

	.welt-site-main{max-width: 80vh;}

	.welt-site-main-content {
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					flex-grow:1;}

	.welt-karte {
					background-repeat: no-repeat;
					background-size: contain;
					min-height: 680px;
	}

@media (max-width: 1235px) and (min-width: 1131px) {
   .button-grid {margin-top: -73px !important;}
}

@media (max-width: 1130px) and (min-width: 1081px) {
  .button-grid {margin-top: -150px !important;}
}

@media (max-width: 1080px) and (min-width: 871px) {
  .button-grid {margin-top: 0px !important;}
}

@media (max-width: 870px) and (min-width: 745px) {
  .button-grid {margin-top: -45px !important;}
}

@media (max-width: 744px) and (min-width: 645px) {
  .button-grid {margin-top: -136px !important;}
}

@media (max-width: 644px) and (min-width: 515px) {
  .button-grid {margin-top: -203px !important;}
}

@media (max-width: 514px) and (min-width: 416px) {
  .button-grid {margin-top: -305px !important;}
}

@media (max-width: 415px) and (min-width: 330px) {
  .button-grid {margin-top: -388px !important;}
}

@media (max-width: 329px) {
  .button-grid {margin-top: -440px !important;}
}

	@media (min-width: 1180px){
		.artikel-item-vierer {
			flex-basis: calc(100% / 4);
			max-width: calc(100% / 4);
			padding: 0;
		}
	}

	@media (max-width: 1179px){
		.artikel-item-vierer {
			flex-basis: calc(100% / 2);
			max-width: calc(100% / 2);
		}

	}
	
/* FUNDUS CSS
============================================ */	

	.album-grid {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.album-title{
		font-size: 1.1428571429rem;
		font-weight: 600;
		line-height: 1.4;
		color: #fff;
		letter-spacing: 2px;
	}

	.album-inner{
		  color: #fff;
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  display: flex;
		  margin: 0;
		  padding: 1.5714285714rem 1.8571428571rem;
		  flex-direction: column;
		  justify-content: flex-end;
		  align-items: flex-start;
		  transition: opacity .2s linear;
		  opacity: 1;
		  word-break: break-word;
		  hyphens: auto;
		  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(9, 7, 11, 0.4));
	}

	.album-image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.album-link{
		padding-bottom: 100%;
		overflow: hidden;
		display: block;
		position: relative;
	}

	.album-item{
		position: relative;
		flex-basis: 100%;
		max-width: 100%;
	}

	@media (max-width: 768px){
		.album-item{
			padding-left: 0.7142857143rem;
			padding-right: 0.7142857143rem;}
	}

	@media (min-width: 1180px) {
		.album-grid{
			margin: 0 -0.6rem 0 -0.6rem;
		}

		.album-item {
			flex-basis: calc(100% / 4);
			max-width: calc(100% / 4);
			padding: 0.7rem}

		.volk{
			flex-basis: calc(100% / 3) !important;
			max-width: calc(100% / 3) !important;
			}
	}

	@media (max-width: 1179px){

		.album-item{
			margin-bottom: 1rem;
		}
	}

	@media (min-width:769px) and (max-width: 1179px){
		.album-item {
			flex-basis: calc(100% / 2);
			max-width: calc(100% / 2);
			padding: 0.7rem;
		}
	}

/* FUNDUS ARTIKEL = UNTERSEITE CSS
============================================ */

	.artikel-grid, .button-grid{
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin-bottom: 2rem;
	}

	.artikel-item{
		display:flex;
		position: relative;
		flex-basis: 100%;
		width: 100%;
	}

	.artikel-item-vierer {
		display:flex;
		position: relative;
		flex-basis: 100%;
		width: 100%;
	}

	.textbox{
		text-align: justify;
		width: 100%;
		hyphens: auto;
		text-wrap: balance;
		color: #fff8efa3;
		margin-top: 1rem;
		margin-bottom:0;
	}

	.artikel-head{
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 3px;
	}

	.artikel-text{
		margin-top: 1rem;
		font-size: 12pt;
		line-height: 17pt;
	}

	.fundus-image{
		width: 100%;
		height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}

	@media (min-width: 1180px){
	.artikel-item{
		max-width: calc(100% - 50%);
		padding: 0 0.6rem 0 0.6rem;}

	.ribbon {max-width: calc(100% - 33%);}

	.vollzeilig {
		max-width: 100%;
		padding: 0;
	}

	/*.grid-fit{padding: 2rem 0 0 0.6rem;}*/
	}

/* VÖLKER CSS
============================================ */

.voelker-site-main{
	max-width:80vh;
}

.vergleich-site-main{max-width: 115vh;}

/* VOLK CSS
============================================ */

	.masonry {
	  display: grid;
	  grid-template-columns: repeat(
		auto-fit,
		minmax(min(var(--item-width, 200px), 100%), 1fr)
	  );
	  grid-template-rows: masonry;
	  gap: 1rem;
	  grid-auto-flow: dense;

	  > *,
	  > astro-slot > * {
		align-self: start;
		grid-column-end: span var(--span, 1);
	  }
	}

	.box {
	  display: flex; 
	  flex-flow: column;
	  gap: 1rem;
	}

	.box img {
	  display: block; 
	  width: 100%;
	}

	.card-font{
		color: #ccc4ac;
	}

	.card-leer{display:none;}

	@media (min-width: 769px){}

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

	}


/* LEKTÜRE CSS
============================================ */

	.img-rp {max-height:25vh; margin: 0 1rem 1rem 0;}


/* Q&A CSS
============================================ */

	.img-qa {max-height:25vh; margin: 1rem 0 0.5rem 0;}

/* STUFF 
	============================================ 
	h2 {color: #95723F;}
	h3 {color: #5e685e;}
	/*@media screen and (max-width: 1319px) and (min-width: 751px) {}*/


/* POPUPS 
============================================ */

  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
  }

  /* Popup-Design */
  .popup {
    position: relative;
    background: rgba(0, 0, 0, 0.8);
    width: 80%;
    max-width: 400px;
    margin: 40px auto;
    padding: 10px 30px 10px 30px;
    border-radius: 8px;
    color: #9f8c4b;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .popup.show {
    opacity: 1;
    transform: scale(1);
  }

  .popup.hide {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    color: #b79f50;
    cursor: pointer;
    transition: color 0.2s;
  }

  .close-btn:hover {
    color: white;
  }