/* styles Desktop 1220 px
======================== */
html {
	width:100%;
	background-color:#f2f2f2;
	scroll-behavior: smooth;
}
body {
	display:grid;
	max-width:1200px;
	min-height: 100.1vh;
	margin:auto;
	grid: "headpic headpic topbox" 440px
	      "nav main main2" auto
	      "lfoot footer rfoot" min-content
	      / 282px 588px 282px;
	grid-gap:24px;
	background-color:#fff;
	font-family: 'Fira Sans', sans-serif;
	font-size:16px;
	font-weight:300;
	color:#000;
	line-height:24px;
}
#headpic {
	grid-area:headpic;
}
nav {
	grid-area:nav;
}
#suche {
	grid-area:topbox;
}
#topbox_elements {
	grid-area:topbox;
	margin-top:58px;
}
#content {
	grid-area:main;
	position:relative;
}
#content2 {
	grid-area:main2;
}
#logo {
	grid-area:topbox;
	position:relative;
}
#kontaktbox,
#content2 {
	grid-area:main2;
	position:relative;
	background-color:#d5efe0;
	font-family: 'Fira Sans Condensed', sans-serif;
	font-weight:300;
	margin-top:12px;
}
#content2 {
	padding:0 24px 24px 24px;
}
#mobilemenue {
	display:none;
}
footer {
	grid-area:footer;
	border-top:2px dotted #9d9d95;
	line-height:36px;
}

#headpic #gallery {
	position:relative;
	left:0;
	top:0;
	margin:0;
	width:100%;
	height:100%;
	border-radius: 0 0 96px 0;
	background:url('/images/jj_website_header_01.jpg') center center no-repeat;
	background-size:cover;
}
#headpic #gallery::before {
	position:absolute;
	display:block;
	right:52px;
	width:72px;
	height:72px;
	background-color:#2dad63;
	content: " ";
	z-index:10;
}
#headpic #gallery::after {
	position:absolute;
	display:block;
	right:-24px;
	width:72px;
	height:72px;
	border-radius:0 0 24px 0;
	background-color:#9d9d95;
	content: " ";
	z-index:10;
}
#headpic #gallery figure {
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	background-position:center center;
	background-size:cover;
	margin:0;
	z-index:1;
	border-radius: 0 0 96px 0;
}
#logo a.logo {
	display:block;
	position:absolute;
	bottom:0;
	width:258px;
	height:72px;
	/*
	Orignal-Logo:
	margin:44px 0 0 0;
	background:url('/images/jj_logo2019_quer.png') left bottom / 100% auto no-repeat;
*/
	margin:32px 0 0 0;
	background:url('/images/jj_logo_50jahre.png') left bottom / 100% auto no-repeat;
}
#suche {
	display:block;
	position:relative;
	margin:24px 0 0 24px;
	height:min-content;
}
#suche input {
	width:224px;
	border:1px solid #d1d1cd;
	padding:6px;
}
#socialbox {
	display:block;
	position:relative;
	margin:12px 0 0 16px;
	height:min-content;
}
#socialbox a.facebook {
	background:url('/images/icons/facebook.png') left top no-repeat;
}
#socialbox a.instagram {
	background:url('/images/icons/instagram.png') left top no-repeat;
}
#socialbox a.tiktok {
	background:url('/images/icons/tiktok.png') left top no-repeat;
}
#socialbox a.twitter {
	background:url('/images/icons/x.png') left top no-repeat;
}
#socialbox a.youtube {
	background:url('/images/icons/youtube.png') left top no-repeat;
}
#socialbox a.whatsapp {
	background:url('/images/icons/whatsapp.png') left top no-repeat;
}
#socialbox a.linkedin {
	background:url('/images/icons/linkedin.png') left top no-repeat;
}
#socialbox a {
	display:inline-block;
	width:32px;
	height:32px;
	margin:0 8px;
	background-size:cover;
}	
#logolink {
	display:block;
	position:relative;
	margin:12px 0 0 24px;
	border:1px solid #d1d1cd;
	width:220px;
	height:min-content;
	padding:8px;
}
#logolink img {
	width:100%;
	height:auto;
}
#kontaktbox article {
	display:block;
	padding:12px 24px 24px 24px;
}

#kontaktbox img {
	max-width:100%!important;
	height:100px;
	width:auto;
}
	
/* Menü
=======*/
#showmenu {
	display:none;
}
nav {
	margin:4px 20px 0 20px;
	line-height:16px;
}

/*Ebene 0 Hauptmenü*/
nav ul {
  display: block;
  margin:0;
  padding:0;
  font-weight:bold;
}

nav li {
  display:block;
  position:relative;
  padding:0;
}

nav li.ebene0.selected.has-child,
nav li.ebene0.open {
	margin-top:12px;
	border-top:2px dotted #9d9d95;
	border-bottom:2px dotted #9d9d95;
}
nav ul li a.ebene0 {
  	display:block;
  	padding:12px 6px 0 6px;
  	font-family:'Roboto Slab', serif;
	font-weight:700;
	line-height:120%;
	text-transform:uppercase;
	text-decoration: none;
	color: #9d9d95;
	-webkit-transition: color .1s ease-in;
	transition: color .1s ease-in;
}
nav ul li a:hover {
	color:#000;
}
nav li.ebene1:before {
	font-variant:JIS78;
	content:"·";
	display:inline-block;
	position:absolute;
	margin:4px 0 0 -12px;
	font-weight:bold;
}
nav li.selected a.ebene0,
nav li.open a.ebene0 {
  color:#2dad63;
}
nav li input.ebene0 {
	margin:12px 0 12px 0;
	width:188px;
	color:#9d9d95;
	border:1px solid #d9d9d5;
	font-family:'Roboto Slab', serif;
	font-weight:700;
	line-height:120%;
	padding:2px 6px 2px 6px;
	text-transform:uppercase;
}
nav li input::placeholder {
	color:#bdbdb5;
}
nav li input[type="button"] {
	font-family:'Fira Sans Condensed', sans-serif;
	font-weight:500;
	border:1px solid #9d9d95;
	color:#9d9d95;
	margin:12px 0 12px 0;
	padding:2px 6px 2px 6px;
	float:right;
}
/*Ebene 1 Untermenü */
nav ul ul {
  visibility:hidden;
  display:none;
  position:relative;
  top:0;
  left:0;
  padding:4px 0 4px 12px;
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
}
nav ul li.selected ul,
nav ul li.open ul,
nav ul li.hover ul {
	visibility:visible;
	display:block;
}

nav ul ul li {
  display:block; 
  height:auto;
  line-height:100%;
  padding:2px 0 2px 16px;
  
}

nav ul ul li:last-child {
  border-bottom:0;
}

nav ul ul li a {
	font-family:'Fira Sans Condensed', sans-serif;
	font-weight:500;
	font-size:15px;
	text-transform:none;
	color:#000;
}
nav ul ul li:hover a,
nav ul ul li.selected a,
nav ul ul li.open a {
	color:#2dad63;
}
nav a.hidden {
	font-style:italic;
}
nav li input.ebene1 {
	margin:0 0 8px 0;
	color:#000;
	width:165px;
	border:1px solid #d9d9d5;
	font-family:'Fira Sans Condensed', sans-serif;
	font-weight:500;
	font-size:14px;
	padding:2px 6px 2px 6px;
	text-transform:none;
}
nav li.ebene1 input[type="button"] {
	font-family:'Fira Sans Condensed', sans-serif;
	font-weight:500;
	font-size:14px;
	margin:0;
	padding:2px 7px 2px 7px;
}

/* Content-Styles
================*/
h1 {
	font-family:'Roboto Slab',serif;
	font-size:32px;
	font-weight:800;
	line-height:120%;
	margin:0 0 16px 0;
}

h2 {
	font-family:'Roboto Slab',serif;
	font-size:24px;
	font-weight:800;
	line-height:120%;
	margin:1em 0 12px 0;
}

h3 {
	font-family:'Roboto Slab',serif;
	font-size:18px;
	font-weight:800;
	line-height:120%;
	margin:1em 0 10px 0;
}

h4 {
	font-family:'Fira Sans',sans-serif;
	font-size:16px;
	font-weight:500;
	line-height:120%;
	margin:1em 0 10px 0;
}

#content {
	outline:0;
	margin-top:8px;
}
#content div.teaser,
#content div.teaser p,
#content p.teaser {
	font-family:'Fira Sans Condensed',sans-serif;
	font-size:20px;
	line-height:140%;
	font-weight:400;
	margin:0 0 24px 0;
}
#content div.teaser + p {
	margin-bottom:0;
}	
#content p {
  margin:0 0 32px 0;
}

#content p.small {
  font-size:12px;
}
#content p + ul {
  margin-top: -2em;
}

#content ul {
  list-style:disc outside none;
  padding:0 0 0 20px;
  margin:0;
}

#content ul.mit-head li {
	padding-top:16px;
	color:#2dad63;
	font-weight:bold;
}
#content ul ul {
  list-style:none;
  padding:0 0 0 20px;
  margin:0;
}
#content ul.mit-head ul li {
	padding-top:0;
	color:#000;
	font-weight:300;
}
#content ul.mit-head ul li::before {
  content: "\2022";
  color: #9d9d95;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}


#content article {
	position:relative;
	margin-bottom:24px;
	padding-bottom:12px;
	border-bottom:2px dotted #9d9d95;
}
#content article:last-child {
	border-bottom:0;
}
#content img {
	width:100%;
}
#content figure {
	width:100%;
	margin:0 0 12px 0;
	padding:0;
}
#content figure img {
	width:100%;
	height:auto;
}
#content article table {
	width:100%;
	max-width:100%;
}
#content article table td {
	border:2px solid #fff;
	background-color:#f5f5f3;
	padding:8px;
	vertical-align:top;
}
#content article table th {
	border:2px solid #fff;
	background-color:#9d9d95;
	padding:8px;
	vertical-align:top;
	color:#fff;
	font-weight:400;
	text-align:left;
}
#content article table th[scope=row] {
	text-align:left;
}
* a {
	text-decoration:none;
	color:#2dad63;
	line-height:24px;
	cursor:pointer;
	text-decoration:none;
}
	
* a.morelink {
	position:absolute;
	display:block;
	bottom:0;
	width:100%;
	padding-bottom:8px;
	background-color:#fff;
	z-index:10;
}
* a.morelink::after {
	position:absolute;
	display:block;
	top:-24px;
	width:100%;
	height:24px;
	content:" ";
	background-color:transparent;
	background-image:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

* a.pdf {
  display:inline-block;
  padding:4px 0px 0px 44px;
  background:url("/images/icons/icon_dl_pdf.png") left center no-repeat;
}

* a.video {
  display:inline-block;
  height:30px;
  padding:4px 0px 0px 44px;
  background:url("/images/icons/video.png") left 2px no-repeat;
}
* a:hover {
	color:#000;
}

/* Allgemein
============*/
*.rechts {
  float:right;
  margin-left:10px;
}

*.links {
  float:left;
  margin-right:10px;
}

*.zentriert {
  display:block;
  width:100%;
  text-align:center;
}

*.small {
  font-size:60%;
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

p {
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

a {
  -moz-hyphens: none;
  -o-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

*.fehler {
  color:#C20000;
}

/* Footer
=========*/
footer a {
  display:inline-block;
  text-decoration: none;
  color: #000;
  -webkit-transition: color .1s ease-in;
  transition: color .1s ease-in;
  line-height:100%;
}
footer a.selected {
	font-weight:bold;
}
footer.editor {
	padding-bottom:48px;
}

plugin {
	background:url('/images/plugin_placeholder.png') left top / 282px 65px #fff no-repeat;
	height:90px;
	color:#000;
	display:block;
	overflow:hidden;
	font-family:'Fira Sans Condensed', sans-serif;
	font-size:20px;
	font-weight:400;
	padding:6px 0 0 90px;
	white-space:nowrap;
	box-sizing:border-box;
}

#toolbar {
	position:fixed;
	bottom:0;
	height:44px;
	width:1200px;
	margin:0 auto;
}

#message {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background-color:#f3f3f3;
	text-align:center;
	color:#000;
	display:inline-block;
	padding:20px;
	line-height:200%;
	border-bottom:1px solid #c2c2c2;
	z-index:10000;
}
#message.ok {
	background-color:#f2fff2;
}
#message.fehler {
	background-color:#fff2f2;
}

/* styles Mobile<1220 px
======================== */
@media only screen and (max-width:1220px) {
body, html {
	background-color:#fff;
}
body {
	grid:	"logo" 90px
			"suche" auto
			"nav" auto
			"headpic" 400px
			"main" min-content
			"main2" min-content
			"bottom" auto
			"mobilemenu" min-content
			"footer" min-content
			/ 100%;
	grid-gap:0;
}
#logo {
	grid-area:logo;
	margin-left:24px;
}
#logo a.logo {
	width:258px;
	max-width:70%;
}
#suche {
	grid-area:suche;
	margin:16px 0 0 0;
	display:none;
	width:calc(100% - 64px);
	left:0;
	padding:8px 32px;
	background-color:#9d9d95;
}
#searchform {
	width:calc(100% - 22px);
	text-align:center;
}
#searchform input {
	width:100%;
}
#menu {
	display:none;
}
#topbox_elements {
	grid-area:bottom;
	margin:16px 0 16px 0;
}
#headpic {
	margin-top:16px;
	max-width:100%;
}
#headpic #gallery {
	width:calc(100% - 32px);
	background-size:cover;
	background-position:50% 50%;
}
#kontaktbox {
	grid-area:main2;
	margin-top:16px;
}
#showmenu {
	display:block;
	position:absolute;
	right:24px;
	top:55px;
}
#showmenu a {
	display:block;
	width:50px;
	height:35px;
	background:url('/images/icons/menu_search.png') left top / cover no-repeat;
}
nav {
	margin:0;
	font-size:20px;
	line-height:125%;
}

/*Ebene 1 Hauptmenü*/
nav ul {
	display: block;
	margin:0;
	padding:0;
	font-weight:bold;
}

nav li {
	display:block;
	position:relative;
	padding:12px 32px;
	background-color:#e8f3e9;
	border-bottom:1px solid #fff;
	overflow:visible;
}

nav ul li a {
  	display:block;
}
nav ul li a:hover {
	color:#2dad63;
}
nav ul li a.ebene0 {
	padding:4px 0;
}
nav li.ebene0:after {
	display:none;
	content:"";
}
nav ul li.has-child a.ebene0:before {
	float:right;
	display:inline-block;
	content:"▼";
}	
nav ul li.has-child:hover a.ebene0,
nav ul li.has-child:focus a.ebene0,
nav ul li.has-child:active a.ebene0 {
	color:#2dad63;
	background-color:transparent;
}
nav ul ul {
	z-index:10;
	position:absolute;
	left:20%;
	width:calc(75% - 32px);
	min-width:calc(75% - 32px);
	background-color:#fff;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.4);
	border-radius:0;
	padding-left:0;
}
nav ul li:hover ul {
	visibility:visible;
	display:block;
}	
nav ul ul li {
	padding:8px 12px;
	background-color:#fff;
	border-bottom:1px solid #e8f3e9;
}
nav ul ul li a {
	background-color:#fff;
  	font-size:20px;
}
nav li.ebene1:before {
	content:"";
	display:none;
}
#content {
	min-height:calc(100vh - 500px);
	padding:20px 24px 12px 24px;
	border-bottom:0;
}
#content img {
	max-width:100%!important;
	height:auto!important;
}
#mobilemenue {
	grid-area:mobilemenu;
	display:block;
	padding:0 24px 0 24px;
	border-top:2px dotted #9d9d95;
	border-bottom:2px dotted #9d9d95;
}
#mobilemenue a.ebene0 {
	font-weight:400;
}
#mobilemenue li.selected a {
	color:#000;
}
footer {
	padding:24px 24px 12px 24px;
	border:0;
}