@font-face {
  font-family: Libre Baskerville;
  src: url(/user/themes/chemnitz-rund-und-bunt/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf) format("truetype");
}
@font-face {
  font-family: Libre Baskerville;
  src: url(/user/themes/chemnitz-rund-und-bunt/fonts/Libre_Baskerville/LibreBaskerville-Italic.ttf) format("truetype");
  font-style: italic;
}
@font-face {
  font-family: Libre Baskerville;
  src: url(/user/themes/chemnitz-rund-und-bunt/fonts/Libre_Baskerville/LibreBaskerville-Bold.ttf) format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: Wikipedia W;
  src: url(/user/themes/chemnitz-rund-und-bunt/fonts/Wikipedia_W.ttf) format("truetype");
}

:root {
    --lightlight: white;
    --light: #fbfafa;
	--lightmain: #f6cfd2;
    --maincolor: #E74163;
    --darkmain: #99274f;
	--greenaccent: #739e5e;
	--blueaccent: #507ba2;
    --dark: #2a2d47;
    --darkdark: black;

    --font-family: Libre Baskerville, Inter, serif;
}

body{
	background-color: var(--greenaccent);
	background-image: url(/user/themes/chemnitz-rund-und-bunt/images/HG1.JPG);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
	color: var(--dark);
	margin: 0;
}

/* clearfix helps with float problems */
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.hidden{
	display: none;
}

a{
	color: var(--blueaccent);
}
a:hover, a:focus{
	color: var(--darkmain);
}

/* the lists containing buttonlinks and navlinks helps screenreaders - but it shouldn't change the layout. So removing some styling */
ul.unstyled,
ol.unstyled{
	list-style: none;
	padding: 0;
	margin: 0;
}

/* links to skip to content (for screenreaders)*/
a.skip{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow: hidden;
}

@keyframes skipbutton{
	from{
		position: absolute;
		top: -30px;
		left: 10px;
	}
	to{
		left: 10px;
		top: 10px;
	}
}
a.skip:focus{
	display: block;
	position: absolute;
	left: 10px;
	top: 10px;
	width:auto; 
	height: auto;
	padding: 5px 10px;
	background-color: var(--greenaccent);
	color: var(--lightlight);
	text-decoration: underline;
	border-radius: 5px;
	animation-name: skipbutton;
	animation-duration: 0.5s;
}

/*skip button inbetween content to skip imagemaps*/
a.skip-section{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow: hidden;
}
a.skip-section:focus{
	display: block;
	position: static;
	width:auto; 
	height: auto;
	padding: 5px 10px;
	background-color: var(--greenaccent);
	color: var(--lightlight);
	text-decoration: underline;
}

/*logo and title above content and navbar */
.title{
	background-color: var(--maincolor);
}
.title a{
	width: 100%;
	display: table-row;
	text-decoration: none;
	color: var(--dark);
}
.title .imgcontainer{
	display: table-cell;
	max-width: 20%;
} 
.title .logo{
	padding-left: 25%;
	max-width: 100%;
}
.title .padding{
	display: table-cell;
	width: 4%;
}

.titletext{
	display: table-cell;
	vertical-align: middle;
	padding: 0.5em;
	font-size: 2em;
	font-weight: bold;
}

img.titletext{
	display: table-cell;
	vertical-align: middle;
	padding: 1em;
	max-width:  100%;
}

/* navigation links in header and footer */
nav{
	background-color: var(--dark);
	padding: 0 3%;
}

a.navbarlink{
	float: left;
	padding: 10px calc(7px + 1vw);
	color: var(--lightlight);
	text-decoration: none;
}
a.navbarlink:hover, a.navbarlink:focus{
	background-color: var(--darkmain);
	color: var(--lightlight);
	text-decoration: underline;
}
a.navbarlink.active{
	background-color: var(--maincolor);
}
/* last modification date in footer*/
footer li.js-date{
	float: right;
	padding: 10px 20px;
	color: var(--blueaccent);
}


/*background that expands to full screen on smaller displays*/
main{
	position: relative;
	box-sizing: border-box;
	background-color: var(--light);
	padding: 1px 4%; /* top and bottom padding isn't 0 because that makes weird things are happen :| */
	max-width: 1300px;
	margin: auto;
	min-height: 80vh;
}

/* all the content elements - they get a gutter */
main > *{
	margin: 5%;
}
main > p{
	margin: 2% 5%;
}

button{
	border: 0;
	border-radius: 2px;
	text-decoration: none;
	background-color: var(--blueaccent);
	padding: 10px calc(7px + 1vw);
	color: var(--lightlight);
	cursor: pointer;
}
button#js-contact-button{
	margin: 0 5%;
}

/* chunky button links for main navigation inbetween text */
a.buttonlink{
	display: table;
	width: 90%;
	padding: 2%;
	border: 1px solid var(--blueaccent);
	border-radius: 2px;
	margin: 5%;
	text-decoration: none;
	color: var(--dark);
	background-color: var(--light);
}
a.buttonlink:hover, a.buttonlink:focus{
	background-color: var(--lightlight);
	text-decoration: underline;
}
a.buttonlink div.label{
	display: table-cell;
	vertical-align: middle;
}
a.buttonlink div.imgcontainer{
	display: table-cell;
	width: 20%;
	height: auto;
	border-radius: 2px;
	padding-right: 5%;
}
a.buttonlink img{
	display: block;
	width: 100%;
}
a.buttonlink i{
	display: table-cell;
	vertical-align: middle;
	width: 1em;
	padding: 0 0.5em;
}

/* disabled/preview version of chunky button links */
a.buttonlink.inactive{
	pointer-events: none;
	opacity: 0.5;
}

/*entfernen wenn alle Karten eine map haben*/
main>img.karte{
	display: block;
	max-width:90%;
	margin: auto;
	border-radius: 2px;
}
/* interactive maps / maps with links */
main>imagemap{
	display: block;
	max-width: 90%;
	margin: auto;
	border-radius: 2px;
}
.imagemap .karte{
	width: 100%;
}
.img-link{
	display: block;
	width: 100%;
	height: 100%;
	/* background-color: rgba(255,255,255,0.6); */
}
.img-link:focus, .img-link:hover{
	background-color: rgba(255,255,255,0.3);
}
/*---*/

/*
a.inline.W::after{
	content: "W";
	vertical-align: super;
	font-size: 0.7em;
	font-family: Wikipedia W;
	text-decoration: none;
}
*/

/* list of general information for each walk (time, distance, accessibility)*/
ul.meta-labels{
	list-style: none;
	margin: 5%;
	padding: 0;
}
ul.meta-labels li{
	float: left;
	padding: 0 10px;
	color: var(--greenaccent);
}

abbr{
	border: none;
	text-decoration: none;
	font-variant: normal;
}

/* "Zurueck" + "Nach oben" buttons*/
a.back, a.up{
	margin: 0 5%;
	padding:  10px;
	border-radius: 2px;
	text-decoration: none;
	background-color: var(--dark);
	color: var(--lightlight);
}
a.back:hover, a.back:focus{
	background-color: var(--darkmain);
	text-decoration: underline;
}
a.up:hover, a.up:focus{
	background-color: var(--darkmain);
	text-decoration: underline;
}
/* clearfix gives margin already, so .a doesn't need it*/
.clearfix a.back{
	margin: 0;
} 
a.back{
	float: left;
}
a.up{
	float: right;
}
@media screen and (min-width: 800px) {
	a.up{
		position: -webkit-sticky;
		position: sticky;
		margin: 0 5%;
		bottom: 10px;
		transform: translateX(25%);
		opacity: 0.8;
	}
	a.back{
		opacity: 0.8;
	}
}