@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600&family=Roboto:wght@400;500&display=swap');
 @font-face {
    font-family: 'Gabrielle';
    font-style: normal;
    font-weight: normal;
	font-display: swap;
    src: local('../fonts/Gabrielle'), url('../fonts/Gabrielle.woff') format('woff');
    }
	
body {
    font-family: 'Roboto', sans-serif;
	font-weight: 400;
	 color: #6c757d;
}

.pa {
	position: absolute;
}
.font-normal {
	 font-family: 'Roboto', sans-serif !important;
	
}
.font-h1 {
	font-family: Gabrielle !important;
	font-size:2.8em;
}

h3.h3-xs {
	font-size:1.0em;
	color: #adb5bd;
	font-weight: 400;
	margin-bottom: 1rem;
	line-height:1.5;
}

@media only screen and (max-width: 768px)
{
	.h3-xs {
    font-size: 1.2em!important;
}
}

nav.navbar {
align-items: unset;
}

.d-inherit {
	display: inherit;
}

.d-inline {
	display: inline;
}
.navbar-dark .navbar-nav .nav-link {
    color: #fff;
}

.bg-gradient-dark {
    color: #fff;
    background: #000 !important;
    /*background-image: url('../../assets/images/top_back.jpg') !important;*/
}

nav.navbar:not(.h-auto) {
    min-height: 90px;
}

.navbar-brand > img {
    max-width: unset !important;
    max-height: 80px;
}

.navbar-nav {
    font-family: 'Bebas Neue', sans-serif;
}

.text-header {
    font-family: 'Bebas Neue', sans-serif !important;
} 

#footer.footer-dark .bg-distinct {
    background-color: rgba(0,0,0,.5);
}


.bg-black {
	 background-color: rgba(0,0,0,.9) !important;
	
}

/* Anpassung der globalen H-Tags für bessere Sichtbarkeit */
h1,h2,h3,h4,h5,p.h4,p.h5,h6
{
	font-family: 'Bebas Neue', sans-serif !important; /* Bleibt wie von dir gewünscht */
}

h1.h1-xs {
	font-size:2em;
}
.text-middle {
	vertical-align: middle;
}

.text-black {
	color: #000 !important;
}

a.text-black:hover {
	text-decoration:none;
}

.dropdown-menu-clean:not(.prefix-link-icon) a:not(.btn):hover {
    color: #b0922f;
}

@media (max-width:991px) {
.navbar-brand > img {
    max-width: 259px !important;
    max-height: 52px;
}
.navbar-xs>.navbar-brand>img {
	max-width: 259px !important;
    max-height: 52px!important;
}

.navbar-nav .nav-item.dropdown>.dropdown-menu {
    margin-bottom: 8px !important;
}

nav.navbar:not(.h-auto) {
    min-height: 60px;
}


}

.navbar-nav .nav-item a.nav-link {
font-size:22px !important;
}
.table {
	
	margin-bottom:0px;
}
@media (max-width:991px) {
.icon-main {
	width:32px;
	height:32px;
}

.navbar-xs {
    display: block!important;
    background-color: #000;
    box-shadow: 0 0 25px rgba(0,0,0,.1);
}

}

@media (max-width:991px) {
.icon-main-title {
	font-size: 32px !important;
}
}

@media (min-width:992px) {
.icon-main {
	width:64px;
	height:64px;

}
}

header.main-nav-second {
    position: relative;
    background-color: #0000008f !important;
}

.gold {
	color:#ecc75f !important;
	
}

.gold-dark {
	color:#b0922f !important;
	
}
.bg-gold {
	background-color:#ecc75f !important;
}

.fill-gold {
	fill:#b0922f !important;
}
.btn-soundcloud, .btn-soundcloud:hover {
    color: #fff;
    background-color: #f50;
    border-color: #f50;
}

@media only screen and (max-width: 992px)
{
#footer .breadcrumb-item a {
  
    background-color: hsla(0,0%,0%,.4);
 
}
}

.table div {
    
    vertical-align: top;
    border-bottom: 1px solid #eaf0f5;
	padding-top:5px;
}

audio {
margin-top:5px;	
	
}
.nav-tabs .nav-link.active {
    color: #495057 !important;
}
@media only screen and (min-width: 992px)
{
body.header-over:not(.user-scrolled-down) .navbar .navbar-nav .nav-link:hover {
    color: #ecc75f !important;
}
}


@media only screen and (min-width: 992px)
{
.nav-link:hover {
    color: #ecc75f !important;
}

}

@media only screen and (min-width: 1500px)
{
.navbar-nav .nav-item a.nav-link {
font-size:25px !important;
}
}

@media only screen and (max-width: 1499px)
{
.navbar-nav .nav-item a.nav-link {
font-size:20px !important;
}
}

@media only screen and (max-width: 1300px)
{
.navbar-nav .nav-item a.nav-link {
font-size:18px !important;
}
}


@media only screen and (max-width: 1200px)
{
.navbar-nav .nav-item a.nav-link {
font-size:16px !important;
}
}

@media only screen and (max-width: 1130px)
{
.navbar-nav .nav-item a.nav-link {
font-size:15px !important;
}
}

@media only screen and (max-width: 992px)
{
.navbar-nav .nav-item a.nav-link,.nav-item .dropdown-menu {
font-size: 22px !important;
font-weight: 700;
}


}

.navbar-nav .nav-link.dropdown-toggle:not(.nav-link-caret-hide):before {
    font-family: Flaticon;
    content: "\f1bf";
	margin-top: 0;
}
nav .dropdown-menu {
    font-size: 24px;
}

@media only screen and (max-width: 991px)
{
nav.sticky-kit {
display:none;	
	
}
.navbar-nav .nav-item.dropdown>.nav-link {
    font-weight: 700;
    font-size: 22px !important;
	color: #495057 !important;
	padding-bottom:0 !important;
}
}
/* Anpassung für den Initialen-Effekt im Intro-Text */
/* Hier korrigieren wir das Verhalten, wenn text-align: center auf den Eltern-Container angewendet wird */
.main-intro-text p:first-letter {
    font-size: 300%;
    color: #b0922f;
    font-weight: normal;
    line-height: 0.8;
    float: left; /* Behält float bei */
    margin-right: 0.1em;
    /* Zusätzliche Anpassung, um die Positionierung bei zentriertem Block zu fixieren */
    /* Dies wird den Initialen an den linken Rand des p-Elements ziehen.
       Wenn der p-Tag selbst inline-block ist und zentriert wird, funktioniert es besser. */
}

/* WICHTIGE KORREKTUR FÜR DEN MAIN-INTRO-TEXT UND FIRST-LETTER */
.main-intro-text {
    /* Übergeordneter Container für den Intro-Text, um ihn zu zentrieren */
    text-align: left; 
}
.main-intro-text p {
    /* Der p-Tag selbst soll linksbündig sein und eine maximale Breite haben,
       damit der float:left für den first-letter darin sauber funktioniert.
       Der gesamte p-Block wird dann durch text-align: center des Eltern-divs zentriert. */
    text-align: left; /* Wichtig: Text im Absatz bleibt linksbündig */
    display: inline-block; /* Macht den p-Tag zu einem Block, der sich zentrieren lässt */
    padding-right: 15px;
    padding-left: 15px;
    margin-left: auto; /* Zentriert den inline-block p-Tag */
    margin-right: auto; /* Zentriert den inline-block p-Tag */
    /* Deine vorhandenen Stylings für .main-intro-text p beibehalten: */
    font-size: 1.15em;
    line-height: 1.6;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* Dein bestehendes CSS für den First-Letter-Effekt anpassen - dies ist nun die globale Regel */
/* Diese Regel wird jetzt nur auf p-Tags angewendet, die NICHT im .main-intro-text sind */
.container > p:first-letter:not(.main-intro-text p:first-letter) {
    font-size: 300%;
    color: #b0922f;
    font-weight: normal;
    line-height: 0.8;
    float: left;
    margin-right: 0.1em;
}

.container>p b,b.text-muted {
 /* border-bottom: 2px dotted currentColor;*/
  display: inline-block;
  line-height: 0.85;
}
b.text-muted {
	border-bottom: 2px dotted currentColor;
  display: inline-block;
  line-height: 0.85;
}

element.style {
}
#footer.footer-dark a {
    color: #fff;
}
#footer a {
    color: #121212;
}
.link-muted, .text-primary-hover {
    transition: all .2s ease-in-out;
}
.link-muted {
    color: #6c757d;
    border-bottom: 1px dashed #b0922f; 
    text-decoration: none!important;
}

.full-width {
	width: 100% !important;
	max-width: 100% !important;
}
@media only screen and (min-width: 768px)
{
section.jarallax {
	padding: unset !important;
}
}

@media only screen and (max-width: 768px)
{
section.jarallax {
padding: unset !important;
}
	
	
}
@media only screen and (max-width: 991px)
{
.mt--50-resp
{
	margin-top:10px !important
	
	
}
.my-5-resp {
	margin-top:10px !important
	
}
}
@media only screen and (min-width: 992px)
{
.mt--50-resp
{
	margin-top:30px;
		
}
.my-5-resp {
	margin-top:5rem !important
	
}
}

.d-middle {
	align-items: unset !important;
		
	
}

.bg-amazon {
	background-color: #FF9900;
	
}
.bg-thalia {
	background-color: #00a04b;
	
}

.btn-pill {
    border-radius: 50rem !important;
}

.timeline-container i.badge {
    left: 143.5px;
}

.timeline-container:before {
    left: 150px;
}

.flex-grow-1 {
    flex-grow: 1!important;
    padding-left: 50px;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0 !important;
	width:300px !important;
}

/* HIER BEGINNEN DIE ANPASSUNGEN FÜR BESSERE SEKTIONS-TRENNUNG */

/* Allgemeine Sektions-Abstände */
.main-content-sections section,
.main-content-sections .row.section-spacing-md { 
    padding-top: 4rem;   /* Mehr Innenabstand oben */
    padding-bottom: 4rem; /* Mehr Innenabstand unten */
    margin-top: 0;    /* Deutlicher äußerer Abstand ZWISCHEN den Sektionen */
    margin-bottom: 0;    /* Unteren Standard-Margin zurücksetzen */
}

/* Spezielle Abstände für das erste Element im Main-Content */
.main-content-sections > .container > .main-intro-text {
    margin-top: 3rem !important; /* Kein extra Margin oben direkt nach dem Hero-Bereich */
    padding-bottom: 3rem; /* Etwas Pading nach dem Intro-Text */
}

/* Hintergrundfarben und Schatten für wechselnde Sektionen */
.main-content-sections section.bg-light,
.main-content-sections section.bg-white { /* Füge .bg-white hinzu, falls du es explizit nutzt */
    border-radius: 0.5rem; /* Leichte Abrundung */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); /* Deutlicherer, aber eleganter Schatten */
    /* background-color wird direkt in der HTML-Klasse gesetzt (bg-light oder bg-white) */
}

/* Anpassung der Hauptüberschriften der Sektionen (H2) */
.section-main-heading {
    font-size: 2.8em; /* Noch größer für Prominenz */
    font-weight: 700; /* Extra Fett */
    color: #333; /* Dunkler Text für klaren Kontrast */
    margin-bottom: 3.5rem !important; /* Deutlicher Abstand nach der Überschrift */
    padding-bottom: 1rem; /* Mehr Platz für die Unterlinie */
    border-bottom: 4px solid #b0922f; /* Dickere goldene Linie */
    /*display: inline-block; */
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.08); /* Dezenter Schatten für Tiefe */
    text-transform: uppercase; /* Optional: Großbuchstaben für mehr Gewicht */
}

/* Anpassung der Unterüberschriften in Sektionen (H3) */
.section-heading {
    font-size: 2.6em; /* Deutlich größer als normaler Text, kleiner als H2 */
    font-weight: 600; /* Etwas weniger fett als H2 */
    color: #555; /* Etwas hellerer Ton als H2 */
    /*margin-bottom: 1.8rem !important; */
    padding-bottom: 0.5rem; /* Leichter Akzent für die Unterlinie */
	padding-top: 0.5rem;
    border-bottom: 3px solid #ecc75f; /* Goldene Linie, etwas leichter als H2 */
	 border-top: 3px solid #ecc75f; /* Goldene Linie, etwas leichter als H2 */
    /* display: inline-block; */
    line-height: 1.3;
}

 
/* Spezielles Styling für die Überschrift im goldenen Kästchen (Hallelujah, Mobile Equipment etc.) */
.bg-gold .h5.mb-4.font-weight-normal.text-black {
    color: #333 !important; /* Sicherstellen, dass der Text gut lesbar ist */
    font-weight: bold !important;
    text-align: center; /* Zentrierung */
    width: 100%;
    font-size: 1.4em; /* Etwas größer für das Kästchen */
}
.bg-gold .d-block-xs {
    display: block !important;
}

/* Das Profilbild in der Hero-Sektion (rechts unten) */
.profile-image-overlay {
    position: absolute; /* Absolut positionieren im übergeordneten Element */
    bottom: 30px;       /* Abstand vom unteren Rand des Elternelements */
    right: 30px;        /* Abstand vom rechten Rand des Elternelements */
    width: 250px;       /* Feste Breite des Bildes für größere Bildschirme */
    height: 250px;      /* Feste Höhe des Bildes, wichtig für einen perfekten Kreis */
    overflow: hidden;   /* Wichtig, um sicherzustellen, dass nur der kreisförmige Teil sichtbar ist */
    z-index: 10;        /* Sorgt dafür, dass das Bild über dem Hintergrund liegt */
    border-radius: 50%; /* Macht das Bild rund */
    border: 4px solid var(--gold-color, #ffc107)  !important;; /* Optional: Ein goldener Rahmen um das Bild */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Leichter Schatten für Tiefe */
}

.profile-image-overlay img {
    width: 100%;        /* Bild füllt den runden Container aus */
    height: 100%;       /* Bild füllt den runden Container aus */
    object-fit: cover;  /* Bildausschnitt so anpassen, dass der Container gefüllt wird ohne Verzerrung */
    border-radius: 50%; /* Macht das Bild rund */
}


/* Styling für das Stift Klosterneuburg Bild im Hero-Bereich (links unten) */
.stift-image-overlay, .church-image-overlay, .region-icon-overlay { /* Alle Icons/Bilder im Hero links unten */
    position: absolute;
    bottom: 30px;       /* Gleicher Abstand wie dein Profilbild unten */
    left: 30px;         /* Abstand vom linken Rand */
    width: 200px;       /* Breite */
    height: auto;       /* Höhe automatisch anpassen */
    overflow: hidden;
    z-index: 10;
    border-radius: 8px; /* Leicht abgerundete Ecken für rechteckige Bilder */
    border: 4px solid var(--gold-color, #ffc107) !important; /* Rahmen passend zum Profilbild */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.stift-image-overlay img, .church-image-overlay img, .region-icon-overlay img {
    width: 100%;
    height: 100%; /* Stelle sicher, dass Bilder den Container füllen */
    object-fit: cover;
    border-radius: 8px; /* Konsistent mit dem Container */
}


/* Styling für das FIXIERTE Profilbild unten links (immer sichtbar) */
.fixed-profile-image {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 120px;
    height: 120px;
    overflow: hidden;
    z-index: 1000;
    border-radius: 50%;
    border: 3px solid var(--gold-color, #ffc107) !important;;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
}
.fixed-profile-image:hover {
    transform: scale(1.05);
}
.fixed-profile-image img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

.image-credit-overlay {
position: absolute; 
bottom: 10px; 
left: 10px;   
z-index: 20;       
padding: 5px 10px; 
background-color: rgba(0, 0, 0, 0.4);
border-radius: 5px; 
}
.image-credit-overlay h4 {
font-size: 1em;  
margin: 0;        
color: #fff;       
font-weight: normal; 
}
/* Responsive Anpassungen (falls nötig) */
@media (max-width: 767.98px) {
.image-credit-overlay {
bottom: 5px;
left: 5px;
padding: 3px 8px;
}
.image-credit-overlay h4 {
font-size: 0.7em;
}
}

/* Audio Player Styling */
.audio-player {
    width: 100%;
    max-width: 350px;
    display: block;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
}
.song-list-with-audio li {
    margin-bottom: 15px;
}
/* Für das gelbe Kästchen um die Eigenkomposition */
.bg-gold .audio-player {
    margin-top: 15px;
}
.section-subheading { /* Neue Klasse, falls du die h4/h5 unterhalb der section-heading stylen willst */
    color: #555;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* Responsive Anpassungen für Mobilgeräte */
@media (max-width: 767.98px) {
    .min-h-75vh {
        min-height: 50vh !important;
    }
	h4 {
		font-size:1.5rem;
	}
	.btn-faq {
	border-top: 0 !important;	
	border-bottom: 10px !important;	
	border-left: 0 !important;
	border-right: 0 !important;
	
		
	}
    .col-md-6.d-middle {
        min-height: 50vh !important;;
    }
    .jarallax-img {
        height: 100%;
        object-fit: cover;
    }
    .mt--50-resp {
        margin-top: 10px !important;
    }
    .my-5-resp {
        margin-top: 10px !important;
    }

    /* Anpassungen für Sektionen auf Mobil */
    .main-content-sections section,
    .main-content-sections .row.section-spacing-md {
        padding-top: 2.5rem; /* Etwas weniger Padding auf Mobil */
        padding-bottom: 2.5rem;
        margin-top: 0; /* Etwas weniger Margin auf Mobil */
    }

    /* Überschriften auf Mobil */
    .section-main-heading {
        font-size: 1.8em;
        margin-bottom: 1.5rem !important;
        padding-bottom: 0.5rem;
        border-bottom-width: 2px; /* Dünnere Linie auf Mobile */
        text-transform: none; /* Optional: Auf Mobile normal lassen */
    }
    .section-heading {
        font-size: 1.6em;
        margin-bottom: 1rem !important;
        padding-bottom: 0.3rem;
		padding-top: 0.5rem;
        border-bottom-width: 2px;
		border-top-width: 2px;
    }
    
    /* Bilder Overlays auf Mobil */
    .profile-image-overlay {
        width: 100px; height: 100px; /* Kleiner */
        bottom: 15px; right: 15px;
    }
    .stift-image-overlay, .church-image-overlay, .region-icon-overlay {
        width: 120px; height: 80px; /* Kleiner und ggf. angepasstes Verhältnis */
        bottom: 15px; left: 15px;
        display: block; /* Sicherstellen, dass sie sichtbar sind, falls nicht spezifisch ausgeblendet */
    }
    .stift-image-overlay img, .church-image-overlay img, .region-icon-overlay img {
        height: 100%;
    }
    .fixed-profile-image {
        width: 70px; height: 70px; /* Kleiner */
        bottom: 10px; left: 10px;
    }

    /* Kästchen auf Mobile */
    .bg-gold .mt--n40 { /* Anpassung für das Icon im Kästchen auf Mobile */
        margin-top: -20px !important; 
        width: 60px;
        height: 60px;
    }
    .bg-gold .h5.mb-4.font-weight-normal.text-black {
        font-size: 1.3em; /* Überschrift im Kästchen kleiner */
        margin-bottom: 1rem !important;
		font-weight: unset !important;
    }
    .bg-gold p.text-black {
        font-size: 0.9em; /* Text im Kästchen kleiner */
    }
    .bg-gold .px-4.pb-5.pt-4 {
        padding: 2rem 1rem 3rem 1rem !important; /* Innenabstände anpassen */
    }
}

.group-icon
{
	
	    top: 0;
    position: absolute;
    right: 0;
   padding: 20px;
    font-size: 2em;
	
}