/*
Theme Name: HDWR
Author: Netzformat Internetagentur
Author URI: http://www.netzformat.de/
Description: Individuelles Theme, responsive
Version: 1.0 (05-2023) 
*/ 

/* ##### Fonts ##### */
/*@font-face { 
	font-family: 'Inter-Regular';
	src: url('fonts/Inter-Regular.ttf') format('truetype');
}

@font-face { 
	font-family: 'Inter-Medium';
	src: url('fonts/Inter-Medium.ttf') format('truetype'); 
}

@font-face { 
	font-family: 'Inter-SemiBold';
	src: url('fonts/Inter-SemiBold.ttf') format('truetype'); 
}

@font-face { 
	font-family: 'Inter-Bold';
	src: url('fonts/Inter-Bold.ttf') format('truetype'); 
}*/

/* inter-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: normal;
  src: url('./fonts/inter-v12-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('./fonts/inter-v12-latin_latin-ext-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: bold;
  src: url('./fonts/inter-v12-latin_latin-ext-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('./fonts/inter-v12-latin_latin-ext-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* ##### Allgemein ##### */
:root {
	--rot: #ff0000;
}

html, body, div, span, h1, h2, p, blockquote, a, strong, ul, li, fieldset, form, label, table, tbody, thead, tr, th, td {
	border:0;
	margin:0;
	padding:0;
	outline:0;
}

html {
	scroll-behavior:smooth;
}

body {
	background-color:#FFF;
	font-family:Inter, sans-serif;
	font-size:16px;
	color:#000;
	position:relative;
}

.post-edit-link  {
	position:fixed;
	top:150px;
	left:20px;
	z-index:9999;
	padding:10px 30px 10px 30px;
	color:#FFF;
	font-weight:bold;
	background-color:#000;
	text-transform:uppercase;
}

a {
	text-decoration:none;
}

b, strong {
	font-family:'Inter';
	font-weight:bold;
}

img {
	max-width:100%;
	height:auto;
	display:block;
}

img .alignleft, div .alignleft {
	float:left;
	margin-right:20px;
}

img .alignright, div .alignright {
	float:right;
	margin-left:20px;
}

.clear {
	clear:both;
	width:0;
	height:0;
}


/* ##### Seite ##### */
#seitenrahmen {
	border:0px solid #CCC;
	max-width:1920px;
	margin:0 auto;
}


/* ##### Header ##### */
#kopf {
	position:fixed;
	top:0;
	width:100%;
	max-width:1920px;
	background-color:#FFF;
	z-index:999;
	border:0px solid #0F0;
	height:90px;
}

#logo {
	position:absolute;
	top:0px;
	left:0px;
	padding:19px 0px 0px 20px;
}

#logo img {
	display:block;
	height:60px;
	width: auto;
}


/* ##### Hauptnavi ##### */
#menu-auf {
	position:absolute;
	top:20px;
	right:20px;
	cursor:pointer;
	display:none;
}

#hauptnavi {
	position:absolute;
	top:20px;
	right:10px;
	left:140px;
	border:0px solid #0F0;
}

#hauptnavi ul {
	display:flex;
	justify-content:space-between;
}

#hauptnavi ul li {
	box-sizing:border-box;
	list-style:none;
	display:inline-block;
	border-left:2px solid #000;
	border-bottom:2px solid #000;
	width:101%;
	text-align:center;
	position:relative;
	margin-right:1%;
}

#hauptnavi a {
	font-family:'Inter', sans-serif;
	font-weight:bold; 
	font-size:1.4rem;
	display:block;
	border:0px solid #03C;
	color:#000;
	padding:15px 0px 15px 0px;
	text-transform:uppercase;
}



/* Subnavi */
#hauptnavi ul li ul {
	display:block;
	position:absolute;
	top:103%;
	left:-2px;
	height:1px;
	width:1px;
	overflow:hidden;
	clip:rect(1px, 1px, 1px, 1px);
	background-color:#FFF;
}

#hauptnavi ul li:hover > ul {
	height:inherit;
	width:inherit;
	overflow:inherit;
	clip:inherit;
}

#hauptnavi ul li li {
	display:inline-block;
	width:100%;
}


/* aktive Menüpunkte */
#hauptnavi a:hover,
#hauptnavi .current-menu-ancestor a:not(.sub-menu a),
#hauptnavi .current-menu-item a {
	color:var(--rot);
}



/* ##### Content ##### */
#inhalt {
	margin-top:90px;
	padding:30px 20px 50px 20px;
	line-height:1.3em;
	border:0px solid #C00;
	min-height:500px;
}

#inhalt p {
	margin-bottom:20px;
}

#inhalt a {
	text-decoration:underline;
	color:#000;
}

#inhalt h2 {
	font-weight:normal;
	line-height:1.1em;
	text-transform:uppercase;
	margin:50px 0px 20px 0px;
}

#inhalt h2:first-of-type {
	margin-top:0;
}


/* #### Footer #### */
#fuss {
	border-top:2px solid #000;
}

#fuss-info {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	column-gap:40px; 
	row-gap: 20px;
	padding:20px;
}

#medien-box {
	grid-column: 1/2;
	border:0px solid #09F;
}

#medien {
	margin-top:10px;
	border:0px solid #C0F;
}

#medien a {
	border:2px solid #000;
	width:40px;
	height:40px;
	border-radius:40px;
	padding:5px;
	float:left;
	margin-right:3%;
}

#logo-box1 {
	grid-column: 2/3;
}

#logo-box1 img {
	max-height:150px;
	width:auto;
}


#logo-box2 {
	grid-column: 3/4;
}




#fuss a {
	color:#FFF;
}

#fuss a:hover {
	text-decoration: underline;
}



#metanavi {
	margin-top:30px;
	background-color:#000;
	padding:50px 0px 50px 0px;
	border-right:1px solid #FFF;
	text-align:center;
}

#metanavi ul li {
	display:inline-block;
	list-style:none;
	border-top:2px solid #FFF;
	border-right:2px solid #FFF;
	padding:0px 10px 0px 10px;
	margin:5px 5px 5px 5px;
}

#metanavi ul li a {
	line-height:2.0em;
	font-size:1.0rem;
	text-transform:uppercase;

}

#suche-form {
	margin-bottom:30px;
}

#suche-feld {
	border:none;
	border-left:2px solid #FFF;
	border-bottom:2px solid #FFF;
	background-color:#000;
	color:#FFF;
	font-size:1.1rem;
	text-transform:uppercase;
	padding:5px 5px 5px 40px;
	width:300px;
	background-image:url(grafik/suche.svg);
	background-repeat:no-repeat;
	background-position:10px center;
	background-size:20px 20px;
}





/* ####### Templates ######## */
/* Allgemein */
#raster {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	column-gap:40px; 
	row-gap: 20px;
}

.bildbox {
	grid-column: 1/4;
	margin-bottom:30px;
}

.bildbox img {
	width:100%;
	max-height:480px;
	object-fit: cover;
}

.bild {
	margin:0 auto;
	max-width:800px;
	border:0px solid #0F0;
}

.bild img {
	width:100%;
	height:auto;
	display:block;
	margin-bottom:-1px;
}

.bildunterschrift {
	font-size:13px;
	color:#FFF;
	background-color:#000;
	padding:3px;
	max-width:100%;

}


.titel {
	font-family:'Inter', sans-serif;
	font-weight: bold; 
	border-left:2px solid #000;
	border-bottom:2px solid #000;
	padding:10px;
	text-align:center;
	margin-bottom:5px;
	text-transform:uppercase;
	font-size:1.4rem;
}

.titel.dreispaltig {
	grid-column: 1/4;
}

/* Kacheln */
.kachel {
	border:0px solid #0F0;
}

.kachel-bild {
	aspect-ratio: 3/2;
}

.zweispaltig .kachel-bild {
	aspect-ratio:6/2;
}

.kachel-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.object-fit {
	width:100%;
	max-height:300px;
}

.object-fit img {
	object-fit: cover;
}


#kachel-1 {
	grid-column: 1/2;
}

#kachel-1.einspaltig {
	grid-column: 1/4;
}

#kachel-2 {
	grid-column: 2/3;
}

#kachel-2.zweispaltig {
	grid-column: 2/4;
}

#kachel-3 {
	grid-column: 3/4;
}

.kachel-text {
	margin-top:10px;
}

.kachel-text h3 {
	font-family:'Inter', sans-serif;
	text-transform:uppercase;
	margin:10px 0px 10px 0px;
	font-weight:bold;
}


/* ##### Template Startseite ##### */
.sonderausstellung {
}

#sonderausstellung-1 {
	grid-column: 1/2;	
}

#sonderausstellung-2 {
	grid-column: 2/3;	
}

#sonderausstellung-3 {
	grid-column: 3/4;	
}

.sa-titel {
	font-size:1.1rem;
	line-height: 1.3em;
	text-transform:uppercase;
	margin-bottom:30px; 
}

#sonderausstellung-1 a {
/*
	color:#000;
	padding-right:15px;
	background-image:url(grafik/download-link.png);
	background-position:right center;
	background-repeat:no-repeat;
*/
}



#veranstaltungen {
	grid-column: 1/2;	
}

#veranstaltungen a {
/*	
	color:#000;
	padding-right:15px;
	background-image:url(grafik/download-link.png);
	background-position:right center;
	background-repeat:no-repeat;
*/
}


#slider {
	grid-column: 2/4;	
}

/* Überschreibung Slider-eigene Styles */
.n2-ss-align {
	max-width:100% !important;
}


#textfeld {
	grid-column: 2/4;	
}

#call-to-action {
	grid-column: 1/4;
	text-align:center;
	text-transform:uppercase;
	padding:5% 30% 5% 30%;
	font-size:1.4rem;
	line-height:1.3em;
}


/* ##### Template A #####*/
#header-textfeld {
	grid-column: 1/4;
	padding:20px 20px 20px 20px;
	text-align:center;
	text-transform:uppercase;
	font-size:1.3rem;
	line-height:1.3em;
	font-weight:bold;
}

#header-textfeld.ausblenden {
	display:none;
}

#textfeld-a {
	grid-column: 1/2;
}

#text-a {
	padding:0px 0px 0px 0px;
}

#illustrationsfeld {
	grid-column: 2/4;
	border:0px solid #0F0;
	
/*	padding-left:10%; */
}


#illustrationsfeld .wp-caption {
	margin:0 auto;
	max-width:70%;
	height:auto;
}


.wp-caption  {
	border:0px solid #000;
	max-width:100%;
}

.wp-caption-text {
	background-color:#000;
	color:#FFF;
	display:inline-block;
	padding:3px;
	font-size:13px;
}

#illustrationsfeld blockquote {
	width:50%;
	margin:50px auto 60px auto;
	font-size:1.2rem;
	line-height:1.3em;
}

/* Nächste Veranstaltung */
#veranstaltung-bild {
	border:0px solid #666;
	grid-column: 1/2;	
}

#veranstaltung-text {
	grid-column: 2/4;	
	border:0px solid #666;
}


/* ##### Template B ##### */
#contentnavi-box {
	grid-column: 1/2;
}

#contentnavi {
	padding:5px 0px 0px 0px;
	position:sticky;
	top: 100px;
}

#contentnavi p {
	border-right:2px solid #000;
	border-bottom:2px solid #000;
	width:100% !important;
	padding:5px 5px 5px 5px;
	box-sizing:border-box;
}

#contentnavi a {
	text-decoration:none;
	display:block;
	color:#000;
	text-transform:uppercase;
}




#textfeld-b {
	grid-column: 2/4;
}

#akkordeonfeld_1 {
	grid-column:1/2;
}

#akkordeonfeld_2 {
	grid-column: 2/3;
}

#downloads {
	grid-column: 2/3;
}

#links {
	grid-column: 3/4;
}

.anker {
	display: block;
	position: relative;
	top: -100px;
	visibility: hidden;
}

/* ##### Template Metaseiten ##### */
#meta-box {
	display:grid;
	grid-template-columns:1fr 1fr;
	column-gap:30px; 
	row-gap: 20px;
}

#meta-box img {
	width:100%;
	height:auto;
}

#meta-box h2 {
	font-family:'Inter', sans-serif;
	font-weight: bold; 
	border-left:2px solid #000;
	border-bottom:2px solid #000;
	padding:10px;
	text-align:center;
	margin-bottom:15px;
	text-transform:uppercase;
	font-size:1.4rem;

}

#meta-box h3 {
	font-family:'Inter';
	font-weight:bold;
	margin-bottom:15px;
	text-transform:uppercase;
	font-size:1.2rem;
}

#meta-box hr {
	border: 0;
	border-top:2px solid #000;
}

#meta-box a {
	text-decoration:underline;
	padding-right:15px;
	background-image:url(grafik/download-link.png);
	background-position:right center;
	background-repeat:no-repeat;
}



#meta-links {
	grid-column: 1/2;
}

#meta-rechts {
	grid-column: 2/3;
}


/* ##### Template Single Veranstaltungen ##### */

#download-sv {
	grid-column: 2/4;
}



/*##### Blöcke ##### */

/* Accordion - PLUGIN */
.ea-header a {

}

.ea-card {
	background-color: transparent !important;
}

h3.ea-header a {
	font-size:0.9em !important;
	color:#000 !important;
	border-bottom:2px solid #000;
	text-transform:uppercase;
	font-weight:normal !important;
	padding:0px 0px 5px 10px !important;
	text-decoration:none !important;
}


/* Akkordeon - DYNAMISCH */
#accordion {
	grid-column:2/4;
}

.acc-title {
  cursor: pointer;
  border-bottom:2px solid #000;
  padding:0px 0px 12px 0px;
  text-transform:uppercase;
  font-size:18px;
}

.acc-title:after {
  content:"+";
  font-size:28px;
  font-weight:bold;
  float:right;
  margin-left: 5px;
}

.acc-title.active:after {
  content: "-"; 
}

.acc-content {
  padding: 10px 0px 0px 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.acc-content .abstand {
	height:30px;
}

.acc-content p {
	margin-bottom:5px !important;
}

.acc-content img {
	width:100%;
	height:auto;
}






/* Downloads */
#downloads {
	text-transform:uppercase;
}

#downloads a {
	text-decoration:underline;
	text-transform:uppercase;
	color:#000;
	padding-right:15px;
	background-image:url(grafik/download-link.png);
	background-position:right center;
	background-repeat:no-repeat;
}

/* Links */
#links a {
	text-transform:uppercase;
	color:#000;
	padding-left:15px;
	background-image:url(grafik/download-link.png);
	background-position:left center;
	background-repeat:no-repeat;
}



/* ###### Sonderseiten ####### */
/*Startseite */
#intro {
	width:100%;
	height:auto;
	margin-top:95px;
	border:0px solid #06F;
}

/* Suchergebnisse */
#index-links {
	grid-column: 1/2;
}

#index-rechts {
	grid-column: 2/4;
}



/* Anmeldung / Formular */
/* Progress bar MÜLL !*/
.steps-step a {
	text-decoration:none  !important;
	font-weight:bold !important;
}

.progressbar-style-1 a {
	background-image: none !important; 
	padding: 5px 0 !important;
}

.progressbar-style-1.steps-form .steps-row .steps-step {
	border: none!important; 
}

.steps-step a { 
	border-left: none !important
}

.wpcf7-list-item {
	margin: 0;
}


/* Formulardaten */
.wpcf7 {
}

.wpcf7 label {
	border-left:2px solid #000;
	border-bottom:2px solid #000;
	margin-bottom:20px;

}

.wpcf7 label div {
	margin-left:5px;
}

.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
	width:100%;
	box-sizing:border-box;
	padding:8px 8px 8px 8px;
	font-size:1.0rem;
	border:0px solid #0C0;
}

.wpcf7 select {
	background-color:transparent;
}

.wpcf7 button {
	padding:8px 20px 8px 20px;
	color:#FFF;
	background-color:#000;
	border:none;
	font-size:1.0rem;
	border:2px solid #FFF;
}

.wpcf7 button:hover {
	color:#000;
	cursor:pointer;
	background-color:#FFF;
	border:2px solid #000;

}




/* Gruppenbesuch (Links) */
.external-linklist p {
	margin: 0 0 10px 0 !important; 
}

.external-linklist a {
	display: block; 
	line-height: 28px; 
	font-size: 1.07em !important;
	color: #000 !important;
	border-bottom: 2px solid #000;	padding: 0 0 5px 10px!important; 
	background-image: none!important; 
}




/* ##### Mobilversion ##### */
@media screen and (max-width: 900px) {

	.post-edit-link  {
		display:none;
	}

	#kopf {
		background-color:#000;
	}

	#fuss-info {
		flex-wrap: wrap;
	}

	#medien-box, #logos-box  {
		width:100%;
	}
	
	#logos-box  {
		margin-top:20px;
	}
	
	.logo {
		width:40%;
		margin-bottom:4%;
	}


	#menu-auf {
		display: block;
	}

	#hauptnavi {
		position:absolute;
		top:90px;
		right:0px;
		left:0px;
		background-color:#000;
		display:none; 
		height:90vh;
		overflow:scroll;
	}

	#hauptnavi.aktiv {
		display:block;
	}
	
	#hauptnavi ul {
		display:flex;
		flex-direction: column;
		margin:0;
	}
	
	#hauptnavi ul li {
		width:100%;
		text-align:center;
	}
	
	#hauptnavi ul li a {
		font-size:1.2rem;
		color:#FFF;
		padding:8px 0px 8px 0px;
	}
	
	#hauptnavi ul li li a {
		color:#FFF !important;
	}
	
	/* Subnavi */
	#hauptnavi ul li ul {
		display:inline-block;
		position:relative;
		height: auto;
		width: 100%;
		clip: rect(auto, auto, auto, auto);
		background-color:#000;
		border-top:2px solid #FFF;
	}
	
	#hauptnavi ul li:hover > ul {
		height: inherit;
		width: inherit;
		overflow: hidden;
		clip: inherit;
	}
	
	#raster {
		display: block;
	}

	blockquote {
		width:100%;
		margin:0px 0 30px 0;
	}
	
	.bildbox img {
		max-width:none;
		width:100%;
	}
	
	#meta-box {
		display:block;
	}
	
	#medien-box {
		grid-column: 1/4;
	}
	#logo-box1 {
		grid-column: 1/4;
	}
	#logo-box2 {
		grid-column: 1/4;
	}




}