@charset "utf-8";
/* CSS Document */
/* Größerer vertikaler Abstand (oben und unten) */
.py-6 {  padding-top: 5rem !important;   padding-bottom: 5rem !important;}

/* Größerer Abstand oben */
.mt-6 {  margin-top: 5rem !important;}


/* Größerer horizontaler Abstand (links und rechts) */
.mx-6 {  margin-left: 5rem !important;  margin-right: 5rem !important;}
.ms-6 {  margin-left: 5rem !important;}

/* Feste Höhe als Basis für sehr kleine Bildschirme */
.my-logo-base { height: 70px; width: auto; object-fit: contain;}		  
.main-container {height: 100px; /* Beispielhöhe für den Container */}
.logo-column img {object-fit: contain; /* Verhindert Verzerrung und passt das Logo in den Container */}
header .bi{vertical-align:-.125em; fill:#ffffff;}
.foo{position: relative; height: 330px; text-align: center; padding-top: 2.5%; overflow-x: hidden;}
/* Das Overlay, das die Bilder abdunkelt */
.foo::after { content: ''; position: absolute; top: 0;left: 0; width: 100%;height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 50% Transparenz */ z-index: 1; /* Legt das Overlay eine Ebene über die Slideshow */ }

.navbar {position: relative; z-index: 1000;}
.header-bg { background-color: #1570a6;}
nav[aria-label="Social media navigation"] ul {
  display: none;
}

/* 3. Optional: Anpassung der Social-Media-Links */
.social-links {list-style: none; /* Entfernt die Listenpunkte */}
/* .social-links li:not(:first-child) {margin-left: 0.5rem;  /*Fügt Abstand zwischen den Icons hinzu  }*/
/* 4. Korrigiert die Hintergrundfarbe des mobilen Menüs */
.navbar-collapse.collapsing,.navbar-collapse.show {background-color: #1570a6 !important; padding: 1.0em;}

/* Basisgröße für h1 auf kleinen Bildschirmen */
h1 {font-size: 2.5rem !important; font-weight: 700; line-height: 1.8em; color: #1570a6;}
/* slider */

/* Basisgröße für h1 auf kleinen Bildschirmen */
.foo h1 {font-size: 2.2rem  !important; font-weight: 500; line-height: 1.0em; color: #ffffff;}
.foo h5 {font-size: 0.65rem  !important; font-weight: 500; line-height: 1.0em; color: #ffffff;}

h2 { font-size: 2.3em; font-weight: 600; line-height: 1.5em; color: #1570a6;}
h3 { font-size: 1.4em; color: #1570a6; font-weight: 600; letter-spacing: -.03em; line-height: 1.4em; margin: 0 0 .5em; overflow-wrap: normal;}
p { margin-top: 0; margin-bottom: 0.8rem;}
p br { margin-top: 0; margin-bottom: 0.025rem;}


.news-meta { font-size: 0.9em; color: #666; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5em;}.news-meta time { font-weight: 600; color: #333;}.news-meta .badge { background: #2FAAE1; /* Print & Stitch Markenfarbe */ color: #fff; padding: 0.2em 0.6em; border-radius: 4px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px;}

.eventblock{border-bottom: 1px dotted #1570a6; margin-bottom: 1.5rem; }
.navbar-nav .nav-item .nav-link:hover, .navbar-nav .nav-item .nav-link:focus { background-color: #136393; /* Bootstrap's Standard-Rot (Danger) */ color: #fff !important; /* Textfarbe auf Weiß setzen, wichtig! */}
/* Optional: Übergangseffekt für sanftes Einblenden */a.nav-link {transition: background-color 0.3s ease, color 0.3s ease;}

.logo-width { max-width: 150px; }
/* Der neue Inhalts-Container */
.content-wrapper { position: relative; z-index: 2; /* Legt den Inhalt eine Ebene über das Overlay */ }
.w-45 {width: 75% !important;}
.w-99 {width: 90% !important;}


.btn-secondary{ background-color: #01add3; }
.btn-secondary:hover {background-color: #00c1c4; color: #fff;}
.btn-primary{ background: #357cbd;}
.btn-primary:hover {background-color:#4594e1; color: #fff;}

.module-fancy-heading .sub-head { font-size: 70%; padding-top: .3em; }
.tf_rel { position: relative;  }
.tf_block { display: block; }
.module-fancy-heading .fancy-heading { line-height: 1.25; }
.tf_textc { text-align: center;}

h1 { color: #1570a6;}
.module-fancy-heading .tf_textc .sub-head:before {margin: auto; }
.module-fancy-heading .main-head+.sub-head:before { border-top: 1px solid; content: ""; display: block; padding-top: .3em; width: 5em;}

.module-gallery.drop-shadow img { box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .1);}

.module-gallery.bordered img { border: 1px solid rgba(0, 0, 0, .2); padding: 3px; }
.module-gallery.rounded img { border-radius: 10px; }
.card{border: none;}

h2.card-title a, h1.card-title a{text-decoration: none; color: #1570a6;}
h4.venue a{text-decoration: none; color: #1570a6; font-size: 0.9em; }

.icon-calendar {
  fill: #6c757d !important; /* Ändert die Farbe zu einem Bootstrap-Blau */}

@media (min-width: 768px){
.foo { height: 370px !important; }
.container-fluid { background-size: 150% auto !important; background-position: left top !important; }
.w-lg-99 { width: 70% !important; }
h1 { font-size: 3.5rem !important; font-weight: 700; line-height: 1.8em; color: #1570a6;}
.foo h1 { font-size: 3.5rem !important; font-weight: 500; line-height: 1.0em; color: #ffffff;}
	.w-lg-99 { width: 70% !important; }
}

@media (min-width: 992px) {
	.foo { height: 400px !important;}
	.ms-lg-6 { margin-left: 5rem !important; }
	h1 { font-size: 3.1rem !important; font-weight: 700; line-height: 1.8em; color: #1570a6; }
	.foo h1 { font-size: 3.8rem !important; font-weight: 500; line-height: 1.0em; color:#ffffff; }
	.foo h5 {font-size: 1.0rem  !important; font-weight: 500; line-height: 1.0em; color: #ffffff;}
	.w-lg-45 { width: 35% !important;}
	.w-lg-99 { width: 50% !important; }
}

@media (min-width: 1200px) {
	.foo { height: 500px !important; }
	h1 { font-size: 4rem !important; font-weight: 500; line-height: 1.8em; color: #1570a6; }
	.foo h1 { font-size: 5rem !important; font-weight: 500; line-height: 1.0em; color: #ffffff; }
	.foo h5 {font-size: 1.15rem  !important; font-weight: 500; line-height: 1.0em; color: /* #1570a6 */#ffffff;}
	.w-lg-45 { width: 35% !important; }
	.w-lg-99 { width: 45% !important; }
}

@media (min-width: 1500px){
	.foo h5 {font-size: 1.25rem  !important; font-weight: 500; line-height: 1.0em; color: #ffffff;}
}

@media (min-width: 1700px) {
	.foo{ height: 500px !important; } 
	.foo h1 { font-size: 5rem !important; font-weight: 500; line-height: 1.0em; color: #ffffff; }
	.foo h5 {font-size: 1.45rem  !important; font-weight: 500; line-height: 1.0em; color: #ffffff;}
	.w-lg-45 { width: 30% !important; }
	.w-lg-99 { width: 32% !important; }
}

/* Styling für Bildschirme ab 992px */
/* Hier wird die absolute Positionierung angewendet */
/* Erstellt den Positionierungskontext für das Kindelement */
/* Dies verhindert, dass sich das Kindelement relativ zum 'body' positioniert */
.map-parent {
    position: relative;
}

/* Positionierung nur auf größeren Bildschirmen */
@media (min-width: 992px) {
    .map-shifted { /* Setzt das Element in den absoluten Modus */ position: absolute !important; left: -50px; top: -50px; z-index: 10;}}

@media (max-width: 991px) {
    .map-shifted { position: static !important; left: auto !important; top: auto !important; z-index: auto !important; }}

.hover-grow { transition: transform 0.3s ease-in-out; }

.hover-grow:hover { transform: scale(1.05); /* Vergrößert das Bild um 5% */}