/* 
Theme Name: SuSBertlich
Theme URI: 
Description: SuS Bertlich Tempalte
Version: 1.0.4
Author: Simon Völkert
Author URI: http://svoelkert.de
*/

/* Styling für die Navbar */
.navbar {
	padding: 0.5rem 1rem;
	background-color: white; /* Oder verwende die gewünschte Farbe */
   }
   
   /* Dropdown-Menü-Stil */
   .navbar-nav .dropdown-menu {
	position: absolute;
	border-radius: 0;
	z-index: 1000;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   }
   
   /* Dropdown-Element-Stil */
   .navbar-nav .dropdown-menu .dropdown-item {
	border-radius: 0;
   }
   
   /* Hover-Effekt für Dropdown-Elemente */
   .navbar-nav .dropdown-menu .dropdown-item:hover {
	background-color: #f8f9fa;
   }
   
   /* Styling für das Suchfeld */
   .navbar .form-control {
	border-radius: 0;
   }
   
   .navbar .btn-outline-success {
	border-radius: 0;
   }
   
   /* Basis-Stilregel für die Navigationselemente */
   .navbar-nav .nav-item {
	position: relative;
	white-space: nowrap; /* Einzeilig */
   }
   
   /* Gleichmäßige Verteilung der Navigationselemente */
   .navbar-nav {
	flex: 1;
   }
   
   /* Navbar-Links im Desktop-Modus */
   @media (min-width: 768px) {
	.navbar-nav .nav-item {
	flex: 1;
	text-align: center;
	}
   }
   
   /* Styling für die mobile Ansicht des Suchfeldes */
   @media (max-width: 767px) {
	.navbar .form-control {
	width: 100%;
	}
   }
   
   /* Admin-Bar Styling */
   #wpadminbar {
	background-color: #23282d; /* Beispielhintergrundfarbe */
	color: #fff; /* Beispieltextfarbe */
   }
   
   #wpadminbar .ab-item,
   #wpadminbar .ab-item:focus,
   #wpadminbar .ab-item:hover {
	color: #fff; /* Textfarbe der Admin-Bar-Elemente */
   }
   
   #wpadminbar .ab-sub-wrapper {
	background-color: #333; /* Hintergrundfarbe der Dropdowns */
   }
   
   .menu-container h5 {
	font-size: 1.25rem;
	color: #fff; /* Weißer Text */
	margin-bottom: 0.5rem;
   }
   
   /* Entferne Standard-Listenpunkte für Footer Bottom Menü */
   .footer-bottom-menu {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 0; /* Entferne Padding */
	margin: 0; /* Entferne Margin */
   }
   
   .footer-bottom-menu a {
	margin-right: 2rem; /* Abstand zwischen den Links */
	color: #fff; /* Textfarbe der Links */
	text-decoration: none; /* Entferne Unterstreichung */
	white-space: nowrap; /* Einzeilig */
   }
   
   .footer-bottom-menu a:not(:last-child)::after {
	content: "|"; /* Trennzeichen zwischen den Links */
	margin-left: 1rem; /* Abstand des Trennzeichens vom Link */
	color: #fff; /* Farbe des Trennzeichens */
   }
   
   .footer-bottom-menu ul {
	padding: 0; /* Entferne Padding */
	margin: 0; /* Entferne Margin */
	list-style: none; /* Entferne Listenpunkte */
   }
   
   .footer-bottom-menu li {
	display: inline; /* Setzt Listenpunkte in eine Reihe */
   }
   
   /* Banner Elemente */
   #bannerCarousel .carousel-item img,
   #bannerCarousel .carousel-item video {
	height: 250px;
	object-fit: cover;
   }
   
   #bannerCarousel .carousel-caption {
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: left;
   }
   
   .banner-title,
   .banner-subtitle {
	background-color: white;
	color: black;
	padding: 5px 10px;
	margin: 0;
	width: fit-content;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
   }
   
   .banner-title {
	font-size: 2rem; /* H2-Schriftgröße */
	max-width: 45%;
	white-space: nowrap; /* Einzeilig */
	animation: slideInLeft 1s ease-in-out forwards;
	opacity: 0;
	transform: translateX(-100%);
   }
   
   .banner-subtitle {
	font-size: 1rem; /* H6-Schriftgröße */
	max-width: 35%;
	margin-top: 10px;
	white-space: nowrap; /* Einzeilig */
	animation: fadeInUp 1s ease-in-out forwards;
	opacity: 0;
	transform: translateY(20px);
	animation-delay: 1s;
   }
   
   @keyframes slideInLeft {
	0% {
	opacity: 0;
	transform: translateX(-100%);
	}
	100% {
	opacity: 1;
	transform: translateX(0);
	}
   }
   
   @keyframes fadeInUp {
	0% {
	opacity: 0;
	transform: translateY(20px);
	}
	100% {
	opacity: 1;
	transform: translateY(0);
	}
   }
   
   .carousel-control-prev,
   .carousel-control-next {
	opacity: 0;
	transition: opacity 0.1s;
   }
   
   #bannerCarousel:hover .carousel-control-prev,
   #bannerCarousel:hover .carousel-control-next {
	opacity: 1;
   }
   
   /* Verstecke den Banner in der mobilen Ansicht */
   @media (max-width: 767.98px) {
	#bannerCarousel {
	display: none;
	}
   }
   
   /* Seiten oder Beitragsbild */
   .page-featured-image {
	height: 250px;
	object-fit: cover;
	width: 100%;
   }
   
   /* Social Menu List */
   .social-menu {
	display: flex; /* Zeigt die Menü-Elemente nebeneinander */
	gap: 10px; /* Abstand zwischen den Icons */
   }
   
   /* Menü-Elemente */
   .social-menu li {
	list-style: none; /* Entferne Standard-List-Stile */
   }
   
   /* Menü-Links */
   .social-menu li a {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem; /* Größe der Icons anpassen */
	color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)); /* Farbe der Icons anpassen */
	text-decoration: none; /* Entferne Unterstreichung */
	transition: color 0.3s ease; /* Sanfte Übergänge für Hover-Effekte */
   }
   
   /* Hover-Effekt für Icons */
   .social-menu li a:hover {
	color: #007bff; /* Farbe beim Hover-Effekt */
   }
   
   /* Verstecke den Titel der Menü-Links */
   .social-menu li span {
	display: none; /* Blende den Text aus */
   }
   
   /* Container für das Archiv */
   .archive-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
   }
   
   /* Header-Bereich */
   .archive-header {
	text-align: center;
	margin-bottom: 40px;
   }
   
   .archive-title {
	font-size: 3em;
	color: #333;
	margin-bottom: 20px;
   }
   
   /* Filter-Bereich */
   .archive-filters {
	display: flex;
	text-align: left;
	flex-direction: column; /* Filter untereinander anordnen */
	gap: 15px; /* Abstand zwischen den Filter-Elementen */
   }
   
   /* Filter-Dropdowns immer anzeigen */
   .archive-filters ul {
	padding: 0; /* Entferne Padding */
	margin: 0; /* Entferne Margin */
	list-style: none; /* Entferne Listenpunkte */
   }
   
   .archive-filters ul li {
	display: block; /* Listenpunkte immer untereinander anzeigen */
	margin-bottom: 15px; /* Abstand zwischen den Listenpunkten */
   }
   
   .archive-filters ul li:last-child {
	margin-bottom: 0; /* Kein Abstand nach dem letzten Listenpunkt */
   }
   
   .archive-filters h2 {
	   font-size: 1.5rem;
   }
   
   @media (max-width: 991.98px) {
	   .archive-filters h2 {
		   font-size: 1.2rem;
	   }
   }
   
   /* Beitrags-Gitter */
   .card-container {
	display: flex;
	flex-wrap: wrap; /* Zeigt die Karten in mehreren Zeilen an */
	gap: 20px; /* Abstand zwischen den Karten */
	justify-content: center; /* Zentriert die Karten horizontal */
	padding: 0 15px; /* Seitlicher Abstand innerhalb des Containers */
	box-sizing: border-box; /* Bezieht Padding in die Breite des Containers ein */
   }
   
   /* Einzelne Karte */
   .card {
	border: none; /* Entfernt die Standard-Grenze */
	border-radius: 10px; /* Abgerundete Ecken für die Karte */
	overflow: hidden; /* Versteckt überstehende Inhalte */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sanfte Schatten für Tiefe */
	transition: transform 0.3s, box-shadow 0.3s; /* Sanfte Übergänge für Hover-Effekte */
	margin: 10px; /* Entfernt Standard-Margin */
   }
   
   /* Hover-Effekte für die Karten */
   .card:hover {
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
	transform: translateY(-5px);
   }
   
   /* Beitragsbild auf der linken Seite */
   .card-img-top {
	width: 100%; /* Vollständige Breite der Karte */
	height: 200px; /* Feste Höhe für das Bild */
	object-fit: cover; /* Bild skalieren und zuschneiden */
	border-bottom: 1px solid #ddd; /* Trennlinie zwischen Bild und Text */
   }
   
   /* Rest des Beitrags auf der rechten Seite */
   .card-body {
	padding: 1.25rem; /* Polsterung im Inneren der Karte */
	display: flex; /* Flexbox Layout für den Body */
	flex-direction: column; /* Vertikale Ausrichtung */
   }
   
   /* Stil für den Titel */
   .card-title {
	font-size: 1.25rem; /* Größe des Titels */
	margin-bottom: 0.5rem; /* Abstand nach unten */
	overflow: hidden; /* Überlaufende Inhalte verstecken */
	text-overflow: ellipsis; /* Text abschneiden und "..." hinzufügen */
	display: -webkit-box; /* Für Webkit-Browser */
	-webkit-box-orient: vertical; /* Vertikale Ausrichtung */
	flex-shrink: 0; /* Verhindert Schrumpfen */
   }
   
   .card-title a {
	text-decoration: none; /* Keine Unterstreichung */
	color: inherit; /* Erbt die Textfarbe des Elternelements */
   }
   
   /* Stil für die Links im Titel */
   .card-link {
	text-decoration: none; /* Entfernt die Unterstreichung des Links */
	color: #333; /* Dunkle Farbe für den Titel */
	font-weight: bold; /* Fettgedruckter Titel */
	transition: color 0.2s; /* Übergangseffekt für Farbänderung */
	margin-bottom: 0.5rem; /* Abstand nach unten */
   }
   
   /* Hover-Effekt für Links im Titel */
   .card-link:hover {
	color: #007bff; /* Farbe beim Hover-Effekt */
   }
   
   /* Stil für den Text */
   .card-text {
	color: #666; /* Hellere Farbe für den Text */
	margin-bottom: 1rem; /* Abstand nach unten */
	overflow: hidden; /* Überlaufende Inhalte verstecken */
	text-overflow: ellipsis; /* Text abschneiden und "..." hinzufügen */
	display: -webkit-box; /* Für Webkit-Browser */
	-webkit-box-orient: vertical; /* Vertikale Ausrichtung */
	line-height: 1.2em; /* Zeilenhöhe einstellen */
	max-height: calc(1.2em * 4); /* Maximale Höhe auf 4 Zeilen begrenzen */
   }
   
   /* Pagination */
   .pagination {
	text-align: center;
	margin: 30px 0;
   }
   
   .pagination a,
   .pagination span {
	display: inline-block;
	margin: 0 5px;
	padding: 10px 15px;
	color: #0073aa;
	text-decoration: none;
	border: 1px solid #ddd;
	border-radius: 5px;
   }
   
   .pagination a:hover {
	background-color: #0073aa;
	color: #fff;
   }
   
   .pagination .current {
	background-color: #0073aa;
	color: #fff;
	border: 1px solid #0073aa;
   }
   
   /* Styling für den Primär-Button */
   .btn-primary {
	background-color: #007bff; /* Primärfarbe */
	border: none; /* Kein Rand für den Button */
	border-radius: 5px; /* Abgerundete Ecken für den Button */
	color: #fff; /* Weiße Schriftfarbe */
	padding: 0.5rem 1rem; /* Polsterung im Button */
	text-decoration: none; /* Keine Unterstreichung des Texts */
	transition: background-color 0.3s, transform 0.2s; /* Übergänge für Hover-Effekte */
	align-self: flex-start; /* Knopf nach oben links ausrichten */
   }
   
   /* Hover-Effekt für den Primär-Button */
   .btn-primary:hover {
	background-color: #0056b3; /* Dunklere Farbe beim Hover-Effekt */
	transform: scale(1.05); /* Leichtes Vergrößern beim Hover-Effekt */
   }
   
   /* Footer-Stil */
   .footer {
	padding: 20px;
	background-color: #f8f9fa; /* Helle Hintergrundfarbe */
   }
   
   ul.list-unstyled.mb-0.mx-0 li a {
	   margin-right: 2rem;
	   color: #fff;
	   text-decoration: none;
	   white-space: nowrap;
	   padding-left: .5rem !important;
   }