/* FRONTEND CSS
*********************************************/
* {
	box-sizing: border-box;
}
html {
	/* scrollbar fix (prevent ugly left pull for lower content sites) */
	overflow-y: scroll;
	margin: 0;
}

body {
	background-color: #FFFFFF;
	color: #201355;
	padding: 20px 0 0 0;
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	min-height: 100vh;
	margin: 0;
}
header {
	max-width: 1200px;
	border: none;
	margin: 0 auto;
}
nav.desktop {
	display: none;
}

a, a:link, a:visited {
	text-decoration: none;
	color: #201355;
}

ul {
	list-style: none;
	margin: 0;
}
h1, h2, h3 {
	font-family: 'Montserrat', sans-serif;
}
h1 {
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase;
}
h2 {
	font-size: 1.25em;
	text-transform: uppercase;
  	margin: 1.5em 0 0.25em 0;
    border-bottom: 1px solid currentColor;
	padding-bottom: 0.25em;
}
h3 {
	font-size: 1em;
	font-weight: 600;
}
p {
  line-height: 130%;
}
#main {
	max-width: 1200px;
	display: block;
	padding: 0.5em;
	margin: 0 auto;
	height: 100%;
}
header {
		padding: 10px;
		background-image:url(../images/Notenlinien_small.png);
		background-position: center;
		background-repeat: no-repeat;
}
footer {
	font-size: 0.9rem;
	text-align: right;
	padding: 10px;
	background:hwb(0 80% 20% / 0.78);
	display: flex;
	flex-direction: column-reverse;
	gap: 1rem;
	.moduletable {
		text-align: start;
		& h3 {
			color: #4D7CB3;
			text-transform: uppercase;
		}
	}
}
img.startfoto {
	width: 100%;
}
#wrapper {
	margin: 0 auto;
}
#linien {
	background-image: url(../images/Notenlinien_small.png);
	background-repeat: repeat-x;
	background-position:center;
	clear: both;
  	width: 100%;
}

#notenschluessel {
	margin-left: 30px;
	height: auto;
}
#logobox {
	width: 100%;
	display: block;
}
#logo {
	margin: 0 auto;
	width: 75%;
	max-width: 680px;
}
#logo img {
	width: 100%;
	height: auto;
}
#platzhalterlogo {
	width: 55px;
	float: left;
	height: 100px;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.clr {
	clear: both;
	height: 0;
}
#subnav {
	display: none;
}
footer ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}
footer ul.menu li {
	display: inline;
	margin-left: 5px;
	color: #201355;
	}
footer ul.menu li a {
	color: #201355;
	text-decoration: none
	}
#mobilebutton {
	position: fixed;
	top: 10px;
	left: 10px;
}
label.menubutton { 
   	display: flex;
   	flex-direction: column;
   	justify-content: space-around;
	align-items: center;
	padding: 5px 0;	
   	background: #201355; 
   	width: 40px; 
   	aspect-ratio: 1; 
   	position: relative; 
   	margin-left: auto; margin-right: auto;
   	border-radius: 4px; 
}
.line { 
   height: 3px; width: 30px; 
   background: #fff; border-radius: 2px;
   transition: 0.5s; 
   transform-origin: center; 
}


input#hamburger {
	display: none;
}
#mobilemenu {
	position: fixed;
	width: 280px;
	background-color: #FFF;
	padding: 1.5rem;
	height: 100%;
	margin-left: -290px;
	top: 0;
	color: #201355;
	box-shadow: 3px 0 5px grey;
}
#mobilemenu ul {
	color: #201355;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.5rem;
	list-style: none;
	padding-left: 5px;
  margin-top: 1.5rem;
	margin-bottom: 10px;
}
#mobilemenu ul li {
	margin-bottom: 1rem;
	/*text-transform: uppercase;*/
}
#mobilemenu ul li ul{
	padding-left: 1rem;
	margin-top: 1rem;
}
#mobilemenu ul li li{
	margin-left: 0px;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}
#mobilemenu ul li a {
	text-decoration: none;
	color: #201355;
}
#close {
	margin: 10px 3px 0 0;
	float: right;
	clear: both;
	display: block;
}
.trenner {
	width: 100%;
}
.mod-articlesnews.newsflash {
    display: grid;    
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1em;
}
figure.newsflash-image {
    margin: 0;
}
#proben{
	display: grid;
	border: 1px solid #201355;
	border-radius: 0.25rem;
	padding: 0;
	margin-top: 1rem;
	& div {
		margin: 0;
	}
}
img {
	max-width: 100%;
	height: auto;
}
.aufruf {
	text-align: start;
	margin-top: 1.5em;
	width:100%;
	padding: 0.75rem;
	& p {
		margin: 0;
	}
}
.moduletable.events {
    border: 1px solid lightgray;
    border-radius: 0.25rem 0 0 0.25rem;
	border: 1px solid #201355;
	text-align: center;
	width:100%;
	padding: 0.75rem 0.5rem;
	background: #201355;
	color: #FFF;
}
.moduletable.events h2 {
	margin: 0;
}
.moduletable.events h3 {
	margin: 0 0 0.05rem;
}
.events td.mod_events_latest_first, .events td.mod_events_latest {
	padding-top: 10px;
}
.item {
  clear: both;
  margin-bottom: 1.5rem;
}
.readmore {
    font-weight: 600;
}
/* Login im Frontend */
.com-users-login.login {
    width: fit-content;
    margin: 0 auto;
}
/* Bearbeitung im Frontend */
li.edit-icon, .nav-tabs li, .modal-button, li.btn-group {
    padding: 6px 10px;
    background: hwb(0 80% 20% / 0.78);
    width: max-content;
    border-radius: 5px;
}
.dropdown-toggle {
	display: none;
}
.nav-tabs {
    display: flex;
    gap: 0.5em;
	padding: 0;
}
.icons ul {
	padding: 0;
}
.btn-toolbar {
    display: flex;
    gap: 0.5em;
    margin-top: 0.5em;
}
.icons {
    margin: 1em 0.5em;
}
span.label.label-warning {
    background: red;
    color: white;
    padding: 0.25em;
    margin: 0 0.5em 0.5em 0.5em;
    border-radius: 5px;
}
.editor-xtd-buttons {
    display: flex;
    gap: 0.75em;
}
.fade, .modal-button {
	display: none;
}
.icons div[role="tooltip"] {
	position: absolute;
	top: -99999px;
	background: white;
	padding: 3px 6px;
	border-radius: 3px;
	box-shadow: 0 3px 3px 3px;
}
.icons div:has(a) {
    width: fit-content;
    padding: 0.3em;
    background: lightgrey;
    border-radius: 0.3em;
	position: relative;
}
.icons div:has(a):hover  div[role="tooltip"] {
	/* top: -30px; */
	left: 98%;
}
.modal-body.jviewport-height60 {
    height: 500px;
}
joomla-tab-element#images .control-label {
    font-size: 1.25em;
    margin: 0.75em 0 0.15em 0;
}
.controls .input-group {
    margin-top: 0.5em;
}
input#jform_title {
    width: 100%;
    font-size: 1.25em;
    margin-bottom: 1em;
}
.wf-editor-header {
    background: hwb(0 80% 20% / 0.78);
    border-radius: 5px 5px 0 0;
}
label#jform_articletext-lbl {
    font-size: 1.2em;
}
span.badge.bg-warning {
    background: hsl(0deg 57% 67%);
    padding: 3px 6px;
    border-radius: 3px;
    color: white;
}
/* Inhalt */
.blog-items {
    display: flex;
	gap: 1em;
	flex-wrap: wrap;
}
.blog-items .blog-item {
    padding: 0.5em 1em;
    clear: both;
    border: 1px solid hwb(0 80% 20% / 0.78);
    height: fit-content;
    margin-top: 1em;
    border-radius: 0.4em;
	width: 100%;
	container-type: inline-size;
}

.blog-items .blog-item img {
    width: 50%;
    height: auto;
    margin-right: 0.3em;
	border-radius: 5px;
}
.items-leading .blog-item {
	border:none;
}
.blog-items .blog-item h2.item-title {
    font-size: clamp(1em, 4cqi, 1.75em);
}
figure.item-image {
    padding: 0 0;
    margin: 0;
	/*aspect-ratio: 16 / 10;*/
	overflow: hidden;
}
figure.item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0em -3em;
}
.startseitetest {
	& figure.item-image {
		padding: 0 0;
		margin: 0;
		aspect-ratio: 4 / 3;
		overflow: visible;
		& img {
			width: 40%;
		}
	}
	
}
.blog-items:not(.items-leading) .blog-item img {
    width: 100%;
    height: auto;
    /* margin-right: 0.3em; */
    border-radius: 5px;
}
.com-content-article__body img.pull-left {
    margin-right: 0.3em;
}
.pg-item-box-info {
    display: none;
}
.pg-svg-box svg {
    padding: 0em;
    margin: 0;
}
.pg-item-box, .pg-category-box {
    overflow: hidden;
	border-radius: 0.4em;
	height: 100%
}
.pg-item-box-info, .pg-category-box-info {
    margin: 0;
    width: 100%;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.25em;
    background: hwb(0 80% 20%);
    opacity: 0.75;
    box-shadow: 0 4px 11px 7px;
}
.pg-item-box-title, .pg-category-box-title {
    top: 100%;
    font-weight: normal;
    background: transparent;
    font-size: 1rem;
	margin: 0;
}
span.pg-category-box-count {
    display: none;
}
.ph-si-category {
    display: none;
}
.ph-cb {
    height: 2em;
}
.pg-categories-items-box, .pg-category-items-box {
    gap: 1em;
	align-items: start;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.pg-item-box-image {
	height: 100%;
}
.pg-item-box-image img {
	transition: 400ms;
	box-shadow: none;
}
.pg-item-box-image:hover img {
    scale: 1.05;
    transition: 400ms;
}
.pg-backbutton {
    padding: 0.5em;
    background-color: #ccc;
    place-self: end;
    display: inline-block;
    margin-block: 0.5em;
}
footer ul.mod-menu.mod-list.nav {
    display: flex;
    gap: 0.4em;
    align-items: flex-end;
    justify-content: end;
}
/* Test Slidedarstellung */ 

@media (max-width: 768px) { 
    .pg-category-items-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
        flex-wrap: nowrap; 
        overflow-x: auto;   
        -webkit-overflow-scrolling: touch; /* Verbessert das Scrolling-Erlebnis auf iOS */
        gap: 0.8em; 
        padding-bottom: 1em; 
    }

    .pg-item-box {
        flex: 0 0 auto; 
        width: 77%;
        grid-template-rows: auto; 
    }
	/* .pg-item-box:first-of-type {
		display: none;
		height: 50px;
		& a {
			height: 100%;
			& .pg-item-box-image {
				height: 100%!important;
			}
		}
	} */

}

/*Phoca Gallery Modul */

ul.pgbx-bxslider.bxslider {
    display: flex;
  flex-direction: column;
    gap: 0.5rem;
    padding: 0;
  	margin-top:1rem;
  & img {
    width:100%;
    height:100%;
    object-fit: cover;
  }
}

/* Wenn das Bannermodul benutzt wird. */
.topgrid {
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: repeat(3, auto); 
  grid-template-areas: 
    "component"
    "proben"
    "banner";
  row-gap: 1em;
}

@media (min-width: 768px) {
  .topgrid {
    grid-template-columns: 1fr 30%; 
    grid-template-rows: auto auto; 
    grid-template-areas: 
      "component banner"
      "proben proben";
    column-gap: 1em;
  }
  #banner {
    padding-top: 2.5em;
  }
}
@media (min-width: 1080px) {
  .topgrid {
    grid-template-areas: 
      "component banner"
      "proben banner";
    column-gap: 1em;
  }
}

#component.topgrid__item {
  grid-area: component;
}
#proben.topgrid__item {
  grid-area: proben;
}
#banner.topgrid__item {
  grid-area: banner;
}

/* MEDIA QUERIES
*********************************************/

/* Extra small devices (phones, less than 768px) */
/* No media query -> mobile first strategy */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	header {
		
	}
	#mobilebutton {
		display: none;
	}
	nav.desktop {
		display: block;
		width: auto;
		font-family: 'Lato', sans-serif;
		font-size: 1.45em;
		font-weight: normal;
		color: #201355;
		margin: 0 auto 10px auto;
		text-transform: uppercase;
		font-family: 'Montserrat', sans-serif;
	}
	nav.desktop ul {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
		background: hwb(0 80% 20% / 0.78);
	}
	nav.desktop ul li {
		position: relative;
		display: inline-block;
		padding: 0 10px;
		margin: 0;
		/* border-radius: 3px; */
		line-height: 1.75em;
		color: #201355;
		transition: background-color 0.2s;
	}
	nav.desktop ul li:hover {
		cursor: pointer;
	}
	nav.desktop ul li a {
		color: #201355;
		display: block;
	}
	/*nav.desktop ul li a:visited {
		color: #201355;
	}*/
	nav.desktop ul:not(.nav-child) li:hover a {
		color: #fff;
	}
	nav.desktop ul li:hover, nav.desktop ul li:not(.default).current {
		background-color: #201355;
		color: #FFF;
	}
	nav.desktop ul li:not(.default).current a{
		color: #FFF;
	}
	nav.desktop ul li:hover ul {
		background-color: #201355;
		color: #FFF;
	}
	nav.desktop ul.nav-child li a {
		color: #201355;
	}
	nav.desktop ul.nav-child li:hover a {
		color: #fff;
	}
	nav.desktop ul li ul {
		background: hwb(0 80% 20% / 1);
	}
	nav.desktop ul.nav li.parent ul {
		background-color: #201355;
		color: #FFF;
	}
	nav.desktop ul.nav li.parent ul a{
		color: #FFF;
	}
	nav.desktop ul.nav li.parent ul li:hover{
		background-color: #FFF;
		color: #AB5B1A;
		font-weight: bold;
	}
	nav.desktop ul.nav li.parent ul li:hover a{
		color: #AB5B1A;
	}
	nav.desktop ul li ul a{
		color: #201355;
	}
	
	#logobox {
		background-image: url(../images/Notenschluessel_03.png);
		background-repeat: no-repeat;
		background-position: center left;
		width: 100%;
		display: block;
	}
	
	nav.desktop ul ul {
		position: absolute;
		top: -9999px;
		left: -9999px;
		background-color: #FFF;
		color: #201355;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
		font-size:1rem;
		z-index: 10;
		padding: 0;
      	border-radius: 3px;
	}
	nav.desktop ul ul li{
		white-space: nowrap;
		/*min-width: 100px;*/
		margin: 0;
      	display: block;
      	border-radius: 0;
      	padding: 0.8em 1.6em;
	}
	nav.desktop ul ul li:hover {
		background-color: #AB5B1A;
		color: #FFF;
	}
	nav.desktop ul ul li a:hover {
		color: #FFF;
	}
	nav.desktop ul li:hover > ul {
		top: 90%;
		left: 5%;
	}
	#subnav {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
	nav.childnav {
		margin: 0 0 10px 0;
	}
	nav.childnav ul{
		display: block;
		text-align: center;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 1em;
	}
	nav.childnav ul li {
		position: relative;
		display: inline-block;
		margin: 0 15px;
		border-radius: 3px;
		color: #201355;
	}
	nav.childnav ul li a{
		color: #201355;
	}
	mobilemenu {
		display: none;
	}
	.moduletable {
		clear: both;
		margin-top: 15px;
	}
	.blog-featured .items-row {
		padding: 5px;
	}
	.blog-items.columns-2 .blog-item, .blog-items.masonry-2 .blog-item {
		width: calc((100% / 2) - 0.5em);
	}
	.blog-items.columns-3 .blog-item, .blog-items.masonry-3 .blog-item {
		width: calc((100% / 3) - 0.5em);
	}
	.blog-items.columns-4 .blog-item, .blog-items.masonry-4 .blog-item {
		width: calc((100% / 4) - 0.5em);
	}
	#proben{
		grid-template-columns: auto 1fr;
	}
	.moduletable.events {
		/*width:fit-content;*/
		text-align: start;	
      	display: grid;
        align-content: space-evenly;
  
  }
	
    ul.pgbx-bxslider.bxslider {
      flex-direction: row;
  }
  footer {
      flex-direction: row;
      justify-content: space-between;
  }
  
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* for higher resolutions (android and retina) */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {
  
}