/* Variables */
:root {
--text-color:#333;
--blue: #05a5c8;

/* Calendar */
--vcal-bg-color: #fff;
--vcal-border-radius: 1em;
--vcal-border-color: #ccc;
--vcal-today-bg-color: #9ed3e8;
--vcal-today-color: white;
--vcal-selected-bg-color: #E7E9ED;
--vcal-selected-color: #333;
}

body {background-image: url('/styles/img/background.jpg'); background-size:100%; background-position: top center; background-color: #e8f3fd; background-repeat: no-repeat;}
body {font-size:18px; margin:5% auto; max-width:90%;}
@media only screen and (min-width: 1500px) {body {margin:3% auto; max-width:1400px;} }

/* small Stuff */
a:link {color: var(--blue)}
a:active {color: #59acdd}
a:visited {color: var(--blue)}
a.noline {color:inherit}

h1.home {font-size: 1.3em}

details > summary {cursor:pointer;}
.page-header {margin-bottom:2em;}
#footer {margin-top: 2em; text-align:center}

.page-header {text-align:center;}
@media only screen and (min-width: 960px) {.page-header {text-align:left;}}
.main-logo {width:300px; margin-bottom:1em;}
.change-date {position:absolute; right:0; z-index:999; text-align:right}
.border-black {border:1px solid #ccc;}
@media only screen and (max-width: 960px) {.hide-mobile{display:none;} }

.flavour {margin-bottom:2em; font-size:0.8em; line-height:120%;}
.flavour a:link, .flavour a:visited, .flavour a {color:black;}


.magazin, .tipp {background-color:#c51315; color:white; padding:0.6em 0.8em; color:white; text-decoration:none; border-radius:1em; text-align:center}
.magazin {background-color:var(--blue)}

.teaser-highlight, .search-highlight {position: absolute; top: 172px; right: 23px; background: var(--blue); color: white; padding: 0.15em 0.3em;}
.search-highlight {top: 10px; right:10px}
.error-alien {max-width:200px; float:right; margin-left:2em; }


/* Navigation */
nav ul {margin:0; padding:0;}
nav ul li {list-style-type: none; display:inline-block;}
nav a {text-decoration: none; display:block; padding:5px 10px; color:black;}
nav a:hover {background-color:white;}
nav a:link {color:black;}
nav a:visited {color:black;}

.sub-nav ul li a:hover {background-color: #c51315; color: white; border-radius: 1em;}
.main-nav {font-size:1.3em; font-weight:bold; font-family: var(--font-highlight)}

.main-nav ul li:last-child {margin-top:.5em; z-index:999;}
@media only screen and (min-width: 960px) {
	.sub-nav ul {position: relative; left:-0.60em;}
	.main-nav ul {position: relative; left:-0.45em;}
	.main-nav ul li:last-child {position: absolute; right:-0.45em; top:-10px;}
}

.search-field {border-color: #ccc; border-radius: 1em; padding-left:0.65em;}
.search-field:focus {border-color:var(--blue);}


/* Page Layouts */
.list-events, .important-events {display:grid; grid-gap:1em; grid-template-rows: auto; margin-bottom: 2em;
grid-template-columns: 1fr; }

@media only screen and (min-width: 576px) {.important-events, .list-events {grid-template-columns: 1fr 1fr;}}
@media only screen and (min-width: 960px) {
.important-events {grid-template-columns: 1fr 1fr 1fr;}
.list-events {grid-template-columns: 1fr 1fr 1fr;} }
@media only screen and (min-width: 1400px) {.list-events {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.important-events article:nth-child(n+4) {display:none;}
.list-events article:nth-child(n+6) {display:none;}
}
 }

.teaser-box {justify-self: stretch;}
.teaser-box {background:white;}
.teaser-box img {line-height:0;}

.teaser-image-container {width:100%; height:150px; display:block; 
background-size:cover; background-position:center center; background-repeat: no-repeat;}


/* Slider */
.slider-grid{display:block;}
@media only screen and (min-width: 960px) { .slider-grid{ display:grid; grid-gap:2em; grid-template-columns: min-content 1fr; } }

.top-events { max-width:100%; margin:0 auto; margin-bottom:2em;
position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;}

@media only screen and (min-width: 960px) { .top-events { max-width:600px;} }
@media only screen and (min-width: 1300px) { .top-events { max-width:960px;} }

.slider-box .teaser-image-container {width:100%; height:250px; display:block; box-sizing: border-box;
background-size:cover; background-position:center center; background-repeat: no-repeat;}
@media only screen and (min-width: 960px) { .slider-box .teaser-image-container {height:400px;  } }

/* Search Teaser */
.search-teaser {
display:grid; grid-gap:1em;
grid-template-columns: min-content 1fr;
grid-template-rows: auto;
margin-bottom: 2em; background-color:white;
}

.search-info {padding:1em 1em 1em 1em;}

.search-image-container {width:250px; height:100%; display:block; 
background-size:cover; background-position:center center; background-repeat: no-repeat;}

@media only screen and (max-width: 800px) {.search-image-container {width:150px;} }

.ad-space {position:relative; margin-top:3em;}
.latest-kultikk-magazin {position:absolute; right:33px; top:-21px; width:112px; transform: rotate(12deg);}


/* Detail Layout */
.detail-grid {display:grid; grid-gap:2em;}
.detail-grid-element, .box {padding:1.5em; background-color:#fff; box-sizing: border-box;}
.event-image-element {margin-bottom:2em;}

/* Reodering for Grid boxes in mobile */
.index-1 {order:1;}
.index-2 {order:2;}
.index-3 {order:3;}
.index-4 {order:4;}
.index-5 {order:5;}
.index-6 {order:6;}
.index-7 {order:7;}

@media only screen and (min-width: 1200px) {
	.detail-grid {display:block; column-count: 2; column-gap: 2em; page-break-inside: avoid;}
	.detail-grid-element {padding:1.5em; background-color:#fff; box-sizing: border-box; margin-bottom:2em; break-inside: avoid;}
}


/* Short Info Part */
.event-shortinfo { display:grid; grid-template-columns: 0.3fr 0.8fr min-content min-content; grid-gap:.5em; align-items: center; }
.shortinfo-location {font-weight:bold; padding-left:1.5em; border-left: 1px solid;}
.date-styled { line-height:0.9; text-transform: uppercase;}
.date-styled span {display:block; text-align:center;}
.date-styled .day {color:var(--blue); font-weight:bold; font-size:2.8em; }
.date-styled .month {font-weight:bold;}
.date-styled .time {font-size:0.9em; margin-top:0.1em; line-height:1.1}


/* Event Categories */
.event-categories {margin:0; padding:0; position:absolute; top: -0.8em; right:2em;}
.event-categories li {display:inline-block; list-style-type: none; font-size: 0.8em;}
.event-categories li a {padding:0.3em 0.5em; text-decoration:none; color:#666; border:1px solid #ccc; background-color:white; border-radius:0.3em}
/* .event-categories li:first-child:after {content:'▸ '} */


/* Detail Thumbnails */
.detail-image {width:100%; text-align:center; line-height:0;}
.detail-image img {width:100%; max-width:100%;}
.detail-image .default-thumb {height:200px; background-color:#cfd1d2}

a.ticket-link {background-color:var(--blue); color:white; padding:0.6em 0.8em; color:white; text-decoration:none; border-radius:1em;}

/* Weitere Termine */
.more-events {font-size:0.8em; width:100%;}
.more-events td {border:0;}
.more-events tr {border-bottom:1px solid #eee}
.more-events tr:nth-child(odd) {background-color:#f6f6f6;}
.more-events tr:nth-child(n+6) {display:none;}
.more-events:active tr:nth-child(n+6) {display:table-row;}



/* Vanilla Calendar CSS */
#v-cal *, #v-cal *:before, #v-cal *:after {box-sizing: border-box;}

#v-cal {
background-color: var(--vcal-bg-color); border-radius: var(--vcal-border-radius); border: solid 1px var(--vcal-border-color);
margin: 0 auto; overflow: hidden; width: 100%;
/* box-shadow: 0 4px 22px 0 rgba(0, 0, 0, 0.05); */
}

#v-cal .vcal-btn {
-moz-user-select: none; -ms-user-select: none; -webkit-appearance: button; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; line-height: normal; min-width: 27px;
outline: none; overflow: visible; padding: 0; text-align: center;
&:active { border-radius: var(--vcal-border-radius); box-shadow: 0 0 0 2px rgba(var(--vcal-today-bg-color), 0.1) }}

#v-cal .vcal-header {align-items: center; display: flex; padding: .6rem .7rem;}
#v-cal .vcal-header svg {fill: var(--vcal-today-bg-color);}
#v-cal .vcal-header__label {font-weight: bold; text-align: center; width: 100%;}

#v-cal .vcal-week {background-color: var(--vcal-selected-bg-color); display: flex; flex-wrap: wrap;}
#v-cal .vcal-week span {
flex-direction: column; flex: 0 0 14.28%; font-size: 1.2rem; font-weight: bold;
max-width: 14.28%; padding: .6rem .3rem; text-align: center; text-transform: uppercase;}

#v-cal .vcal-body {
background-color: rgba(var(--vcal-selected-bg-color), 0.3);
display: flex; flex-wrap: wrap;}

#v-cal .vcal-date {
background-color: #fff; border-radius: var(--vcal-border-radius);
display: flex; flex-direction: column; flex: 0 0 14.28%; align-items: center; 
max-width: 14.28%; padding: .6rem 0;}

#v-cal .vcal-date:hover {background-color: #05a5c8; color:white;}
#v-cal .vcal-date--active {cursor: pointer;}
#v-cal .vcal-date--today {background-color: var(--vcal-today-bg-color); color: var(--vcal-today-color);}
#v-cal .vcal-date--selected {background-color: var(--vcal-selected-bg-color); color: var(--vcal-selected-color);}
#v-cal .vcal-date--disabled {border-radius: 0; cursor: not-allowed; opacity: 0.5;}