/*
Theme Name: Bürgerverein Ovelgönne e.V.
Theme URI: https://bv-ovelgoenne.de/
Author: André Hansen
Author URI: https://bv-ovelgoenne.de/
Description: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: Bürgerverein Ovelgönne
*/

/* Allgemeine Stile */
/*
@keyframes fadeInOpacity {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
*/

html,body { height: 100%; margin: 0px; padding: 0px; }

body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: #F8F9FA;
      color: #343A40;
	  display:flex;
	  flex:1;
	  flex-direction:column;
    }

#primary {	
    
}

#primary, #content, #subcontent {
	display:flex;
	flex:1;
	flex-direction:column;
}

#subcontent {
	width:1200px;
	margin:0 auto;
	padding-top:80px;
}

#subcontent > div {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#subcontent > div.visible {
  opacity: 1;
  transform: translateY(0);
}

#menu-galerie
{
	flex-direction:column;
}

    /* Navigation */
    nav {
      background: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      position: fixed;
      top: 0;
	  left:0;
	  right:0;
      z-index: 1000;
	  display:flex;
	  flex:1;
	  flex-direction:column;
	  height:140px;
    }
    .nav-container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      flex-wrap: wrap;
	  position:relative;
	  align-item:end;
	  justify-content:end;
	  padding-top:28px;
	  flex:1;
    }
    .nav-logo {
      font-size: 24px;
      font-weight: bold;
      color: #007BFF;
      text-decoration: none;
    }
    .nav-container .menu {
      list-style: none;
      display: flex;
      position: relative;
    }
    .nav-container .menu li {
      position: relative;
    }
    .nav-container .menu a {
      text-decoration: none;
      color: #343A40;
      font-weight: 500;
      padding: 8px 10px;
      display: inline-block;
    }
    .nav-container .menu a:hover,
    .nav-container .menu .active > a {
      color: #fff;
	  background-color:#8c9ea3;
	  border-radius:5px;
    }
    .submenu {
      background: #2a4158;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      padding: 2px;
	  display:flex;
	  color:#fff;
	  align-items:end;
	  justify-content:end;
	  height:30px;
    }
	.submenu1 {
		background: #2a4158;
	}
	.submenu2 {
		background: #4b2e1e;
	}
	.submenu3 {
		background: #2f5d3a;
	}
	.submenu ul {
	  flex:1;
	  width: 1200px;
      margin: 0 auto;
	  display:flex;
	  color:#fff;
	  align-items:end;
	  justify-content:end;
	  list-style:none;
	}
    .submenu a {
      display: block;
      padding: 6px 12px;
      white-space: nowrap;
      color:#fff;
	  text-decoration:none;
    }
    .submenu a:hover {
      color:#000;
      background: #f2f2f2;
	  border-radius:5px;
    }

    /* Inhalt */
    .container {
	  padding-top:108px;
	  position:relative;
	  display:flex;
	  flex:1;
	  box-sizing: border-box;
	  width:100%;
    }
    h1 {
      text-align: center;
      color: #007BFF;
      margin-bottom: 50px;
    }
    .timeline {
      position: relative;
      padding-left: 40px;
    }
    .timeline::before {
      content: '';
      position: absolute;
      top: 0;
      left: 20px;
      width: 4px;
      height: 100%;
      background: #007BFF;
    }
    .event, .card {
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      position: relative;
    }
    .event::before {
      content: '';
      position: absolute;
      left: -32px;
      top: 20px;
      width: 20px;
      height: 20px;
      background: #007BFF;
      border-radius: 50%;
      border: 3px solid #F8F9FA;
    }
    .event h2 {
      margin-top: 0;
      color: #17A2B8;
    }

	.categories {
		flex-direction:row;
		display:flex;
		flex:1;
	}
	.postpreview {
		flex-direction:column;
		display:flex;
		flex:1;
		padding-left:30px;
		padding-right:30px;
	}
	.postpreview h2 a {
		text-decoration:none;
		color:#2a4158;
	}
	
	._bv_image {
		display:flex;
		flex:1;
		max-width:300px;
		background-size:cover;
		background-position:center center;
	}

	.single-buttons {
		display: flex;
		justify-content: space-between;
		gap: 10px;
		flex-wrap: wrap;
	}

    /* Zitatkarte */
    .card {
		/*
      display: flex;
      align-items: center;
      gap: 20px;
	  */
    }
    .card img {
      /*width: 100px;*/
      /*height: 100px;*/
      /*border-radius: 50%;*/
      /*background: #e0e0e0;*/
      object-fit: cover;
    }
    .content {
      flex: 1;
    }
    .content blockquote {
      margin: 0;
      font-style: italic;
    }
    .content p {
      margin: 5px 0 0;
      font-weight: 500;
      color: #007BFF;
    }

    /* CTA */
    .cta {
      text-align: center;
      margin-top: 60px;
    }
    .cta button {
      background: #FF5722;
      color: #fff;
      border: none;
      padding: 15px 30px;
      font-size: 18px;
      border-radius: 50px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .cta button:hover {
      background: #e64a19;
    }

    /* Footer */
    footer {
      background: #343A40;
      color: #f8f9fa;
      padding: 40px 20px;
      font-size: 16px;
    }
    .footer-container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
    }
    .footer-info p {
      margin: 5px 0;
    }
    #menu-footer {
      list-style: none;
      display: flex;
      gap: 20px;
      padding: 0;
      margin-top: 10px;
    }
    #menu-footer a {
      color: #f8f9fa;
      text-decoration: none;
    }
    #menu-footer a:hover {
      color: #007BFF;
    }
	.footer-container .has-medium-font-size {
		font-size:16px !important;
	}
	.logo {
		position:absolute;
		top:10px;
		z-index:10;
		width:70px;
		height:70px;
		display:flex;
		flex:1;
		align-items:stretch;
		justify-content:center;
		border-radius:5px;
		background-size:auto 90%;
		background-repeat:no-repeat;
		background-position:center center;
		filter: grayscale(1);
		opacity: 0.3;
	}
	.logo a {
		text-decoration:none !important;
		display:flex;
		flex:1;
	}
	.logo:hover {
		opacity:1;
		filter: grayscale(0);
	}
	.logo img {
		height:100%;
		width:100%;
	}
	.logo1.bvo {
		left:0px;
		top:10px;
		width:160px;
		height:160px;
		padding:10px;
		box-sizing:border-box;
		background: #FFFFFF;
		background: linear-gradient(180deg,rgba(255, 255, 255, 1) 30%, rgba(248, 249, 250, 1) 100%);
		opacity:1;
		filter: grayscale(0);
		border:2px solid #2a4158;
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
	}
	.logo1.pferdemarkt {
		left:180px;
	}
	.logo1.osterfeuer {
		left:280px;
	}
	.logo2.bvo {
		left:0px;
	}
	.logo2.pferdemarkt {
		left:100px;
		top:10px;
		width:160px;
		height:160px;
		padding:20px;
		box-sizing:border-box;
		background: linear-gradient(180deg,rgba(255, 255, 255, 1) 30%, rgba(248, 249, 250, 1) 100%);
		opacity:1;
		filter: grayscale(0);
		border:2px solid #4b2e1e;
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
	}
	.logo2.osterfeuer {
		left:270px;
	}
	.logo3.bvo {
		left:0px;
	}
	.logo3.pferdemarkt {
		left:100px;
	}
	.logo3.osterfeuer {
		left:200px;
		top:10px;
		width:160px;
		height:160px;
		padding:20px;
		box-sizing:border-box;
		background: #FFFFFF;
		background: linear-gradient(180deg,rgba(255, 255, 255, 1) 30%, rgba(248, 249, 250, 1) 100%);
		opacity:1;
		filter: grayscale(0);
		border:2px solid #2f5d3a;
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
	}
	#blog-container {
		width:1200px;
		margin:0 auto;
		position:relative;
	}
	#blogname1 {
		position:absolute;
		left:180px;
		bottom:0px;
		font-size:20px;
		line-height:30px;
	}
	#blogname2 {
		position:absolute;
		left:280px;
		bottom:0px;
		font-size:20px;
		line-height:30px;
	}
	#blogname3 {
		position:absolute;
		left:380px;
		bottom:0px;
		font-size:20px;
		line-height:30px;
	}
	.wp-block-quote {
		margin-left:0px;
	}
	.crosslink {
		display:inline;
	}
	.crosslink a {
		background: #2a4158;
		border-radius:5px;
		color:#fff;
		padding:8px;
		padding-right:30px;
		color:#fff;
		text-decoration:none;
		background-image:url('img/arrow-right-solid.svg');
		background-position:98% center;
		background-repeat:no-repeat;
		background-size:auto 50%;
		box-sizing:border-box;
		display:inline;
	}	 
	.crosslin a:hover {
		background-color:#8c9ea3;
	}
	h1 {
		color:#2a4158;
	}
	.vorstand figure {
		width:120px;
	}
	.history figure.wp-block-media-text__media {
		width:60px;
	}
	.vorstand .wp-block-media-text__content {
		padding-left:100px;
	}
	.history .wp-block-media-text__content {
		padding-left:0px;
	}
	.sidebarbottom {
		display:flex;
		flex:1;
	}
	#sidebarbottom {
		display:flex;
		flex:1;
	}
	#sidebarbottom section, #sidebarbottom section div {
		display:flex;
		flex:1;
	}
	#sidebarbottom section div div {
		display:flex;
		flex:1;
		flex-direction:column;
	}
	#footer, #menu-footer {
		display:flex;
		flex:1;
		flex-direction:column;
		max-width:180px;
	}
	/* Hamburger-Button */
	.hamburger-menu {
	  cursor: pointer;
	}

	/* Verstecke Checkbox */
	#menu-toggle {
	  display: none;
	}
	#menu-footer li {
		display:flex;
		flex:1;
	}
	#menu-footer li a {
		background-color:rgba(255,255,255,0.4);
		border-radius:5px;
		flex:1;
		padding:10px;
		color:#000;
	}
	#menu-footer li a:hover {
		color:#000;
		background-color:rgba(255,255,255,0.6);
	}

	#zitat {
		display:flex;
		flex:1;
		min-height:200px;
		flex-direction:row;
		align-items:stretch;
		transition: all 0.4s ease-in-out;
		overflow: hidden;
	}

	.slide-out {
	  transform: translateX(-100%);
	  opacity: 0;
	}

	.slide-in {
	  transform: translateX(0);
	  opacity: 1;
	}
	
	#dynamic-content-container {
		display:block;
		flex:1;
		min-height:200px;
		flex-direction:row;
		align-items:stretch;
		transition: all 0.4s ease-in-out !important;
		overflow: hidden;
	}
	
	#dynamic-content-container .zitat .picture {
		background-repeat:no-repeat;
		background-position:top center;
		background-size:auto 80%;
		align-items:end;
		justify-content:center;
		max-width:200px;
		flex:1;
		display:flex;
	}
	
	#dynamic-content-container .zitat h2 {
		font-size:16px;
	}
	
	#dynamic-content-container .zitat .content p {
		color:#000;
		font-weight:normal;
	}
	
	#dynamic-content-container .zitat {
		display:flex;
		flex:1;
		align-items:stretch;
	}
	
	.sl-overlay {
		z-index:100;
	}
	
	.sl-wrapper {
		z-index:101;
	}
	
	.sl-wrapper, .sl-overlay {
		position:fixed;
		top:140px;
		left:0px;
		right:0px;
		bottom:0px;
		background-color:rgba(75,46,30,0.8);
	}
	.sl-wrapper button {
		color:#fff !important;
	}
	.sl-image {
		position:relative !important;
		top:0px !important;
	}
	.sl-close {
		position:absolute !important;
	}
	
	#full-screen-with-sidebar {
		display:flex;
		flex:1;
	}
	.seitenmenue {
		min-width:250px;
		max-width:250px;
		border-right:1px solid rgba(75,46,30,1);
	}
	.seitenmenue h2 {
		padding-left:10px;
	}
	.seitenmenue ul { 
		list-style:none;
		display:flex;
		flex:1;
		margin:0px;
		padding:0px;
		background-color:rgba(75,46,30,0.4)
	}
	.seitenmenue ul li {
		display:flex;
		flex:1;
		height:30px;
		align-items:center;
	}
	.seitenmenue ul li a {
		text-decoration:none;
		color: #fff;
		flex:1;
		display:flex;
		height:30px;
		align-items:center;
		transition: padding-left 0.3s ease;
		padding-left:10px;
	}
	.seitenmenue ul li a:hover {
		padding-left:20px;
		background-color:rgba(75,46,30,0.7)
	}
	.seitenmenue1 {
		
	}
	.seitenmenue2 {
		background-color:rgba(75,46,30,0.1);
	}
	.seitenmenue3 {
		
	}
	
	.current-menu-item a {
		background-color:rgba(75,46,30,1);
	}
	
	#menu-hauptmenue .current-menu-item a
	{
		background-color:rgba(75,46,30,0.7);
		border-radius:5px;
		color:#fff;
	}
	
	/* Responsive */
    @media (max-width: 768px) {
		#menu-hauptmenue {
			flex-direction:column;
		}
		.menu-hauptmenue-container {
			box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75) inset !important;
		}
		.menu-hauptmenue-container, #menu-hauptmenue {
			padding:0px;
			padding-top:10px;
		}
		#menu-hauptmenue li a {
			display:flex;
			flex:1;
			border-radius:0px;
			padding-top:15px;
			padding-bottom:15px;
			padding-right:30px;
			text-align:right;
			align-items:end;
			justify-content:end;
			border-bottom:1px solid #8c9ea3;
		}
		nav {
			height:112px;
		}
		.nav-container {
			width:100%;
			position:static;
		}
		.submenu ul, .container, .footer-container {
			width:100%;
		}
		.hamburger-menu {
			display:block;
			position:absolute;
			top:10px;
			right:10px;
			height:60px;
			width:60px;
			border-radius:5px;
			background-image:url('img/bars-solid.svg');
			background-repeat:no-repeat;
			background-position:center center;
			background-size:80% 80%;
		}
		.logo {
			width:60px;
			height:60px;
			top:10px;
			left:10px;
		}
		.logo1.bvo {
			left:0px;
			top:0px;
			width:120px;
			height:120px;
		}
		.logo1.pferdemarkt {
			left:130px;
		}
		.logo1.osterfeuer {
			left:200px;
		}
		.logo2.bvo {
			left:10px;
		}
		.logo2.pferdemarkt {
			left:80px;
			top:0px;
			width:120px;
			height:120px;
		}
		.logo2.osterfeuer {
			left:210px;
		}
		.logo3.bvo {
			left:10px;
		}
		.logo3.pferdemarkt {
			left:80px;
		}
		.logo3.osterfeuer {
			left:150px;
			top:0px;
			width:120px;
			height:120px;
		}

		/* Menü-Grundlayout */
		#main {
		  position: fixed;
		  top: 112px;
		  right: -100%; /* Start außerhalb */
		  width: 100%;
		  height: 100vh;
		  background-color: #fff;
		  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
		  overflow-y: auto;
		  transition: right 0.3s ease;
		  z-index: 9;
		  box-sizing:border-box;
		}

		/* Wenn Menü geöffnet ist */
		#menu-toggle:checked ~ #main {
		  right: 0;
		}
		#menu-toggle {
		  display: none;
		}
		
		.footer-container {
			flex-direction:column;
		}
		#footer, #menu-footer {
			width:100%;
			max-width:none;
		}
		
		#dynamic-content-container .zitat .picture {
			background-size:100% auto;
		}

    }