/* ==========================================================================
   Responsive Breakpoints (Mobile First oder Desktop First)
   ========================================================================== */
/*
// Hinweis: Wenn du Standard-CSS nutzt, verwende @media.
// Wenn du Bootstrap/SASS nutzt, verwende @include.

	// Beispiel für Medium Devices (Tablets)
	@media (max-width: 991.99px) {
		.modal-content {
			width: 95%; // Beispiel-Anpassung für Tablets
		}
	}

// SASS Mixins (nur funktionsfähig in .scss Dateien mit Bootstrap)
	@include media-breakpoint-down(md) {
		.footer {
			font-size: 14px;
		}
	}
*/
	/* ==========================================================================
       Allgemeine Styles
       ========================================================================== */

	.body-community {
		width: 100%;
	}

	.navbar {
		background-color: transparent !important;
		color: #FFF !important;
	}

	/* -------------- Modal -------------- */

	.modal {
		display: none;
		position: fixed;
		padding-top: 60px;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0, 153, 153, 0.5);
		/* z-index: 1050; */ /* Tipp: Bootstrap Modals nutzen meist 1050 */
	}

	.modal-content {
		position: relative;
		background-color: #fefefe;
		margin: auto;
		padding: 0;
		width: 90%;
		max-width: 1200px;
	}

	.close {
		color: white;
		position: absolute;
		top: 10px;
		right: 25px;
		font-size: 35px;
		font-weight: bold;
	}

	.close:hover,
	.close:focus {
		color: #999;
		text-decoration: none;
		cursor: pointer;
	}

	.short_info {
		z-index: 10; /* Erhöht, damit es über anderen Elementen liegt */
		bottom: 40px;
		position: fixed;
		border-radius: 0 7px 0 0 !important;
	}

	/* -------------- Footer -------------- */

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #f5f5f5;
		border-top: #CECECE thin solid;
	}

	.footer-container {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}