:root {
  --navbar-haupt-bg: #ECAE30;
  --navbar-rahmenfarbe: #A37113;
  --navbar-textfarbe: #ffffff;
  --navbar-textfarbe2: #333333; /* dunkler Text für Dropdowns */
  --navbar-textfarbe3: #000000; /* noch dunklerer Text für Hover */
  --navbar-helle-farbe: #F6D383;
  --navbar-helle-farbe2: #F6D383;
  --navbar-dunkle-farbe: #A37113;
  --navbar-handy-bg: #ffffff;
  --navbar-submenu-bg: #ffffff;
}

.kurz-marke {
  white-space: nowrap;         /* Verhindert Zeilenumbruch */
  overflow: hidden;            /* Versteckt überlaufenden Text */
  text-overflow: ellipsis;     /* Fügt (...) hinzu */
  display: block;              /* Stellt sicher, dass es sich wie ein Block verhält */
  max-width: 80%;            /* Passe die Breite an, z.B. 200px oder einen Prozentwert */
  /* Optional: Wenn der Platz knapp wird, soll es kleiner werden */
  /* @media (max-width: 768px) {
      max-width: 150px;
    } */
}

.panel-default > .panel-heading {

  color: #fff;
  background-color: var(--navbar-haupt-bg);
  background-image: linear-gradient(to bottom,var(--navbar-haupt-bg) 0, var(--navbar-haupt-bg) 100%);
}

/* Galerie */
#motnie_galerie ul,
#motnie_galerie li {
	margin: 0.5em;
	padding: 0.1em;
}

#motnie_galerie li {
	display: inline-block;
	list-style-type: none;
  width: 45%; /* prüfen */
  width: 10em;
}

#motnie_galerie img {
  padding: 0;
	margin: 0;
  /* width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
  height: auto;
  max-width: 90%;
}
/* Galerie ende*/

/*Termine */
.termine1
{
  background-color: #eeeeee;

  margin-right: 0px;
  margin-left: 0px;

  padding-top: 5px;
  padding-bottom: 5px;

  border-bottom:  solid 0px black;
}

.termine2
{
  background-color: #ffffff;
  margin-right: 0px;
  margin-left: 0px;

  padding-top: 5px;
  padding-bottom: 5px;

  border-bottom:  solid 0px black;
}

.monatsbalken
{
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 5px;
  padding-bottom: 5px;

  background-color: blue;
  color: white;
}
/*Termine ende*/


.theme-showcase img
{
  height: auto;
  max-width: 90%;
}

.bild img
{
  height: auto !important;
  width: 50px !important;
  max-width: 50px !important;
  min-width: 50px !important;
}


#JUMBO {
  position: relative;
  background-image: url("../oben2.jpg?v=2");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background-position:bottom ;
  padding-bottom: 7.8125%;
}

body {
	background: #000000;
  color: #F3C064;
}


.bg_mp2_foto {
  position: relative;
  background-image: url("../hint_haupt2.jpg?v=3");
  background-size: contain ;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  
   padding-bottom: 101%;
   
   

  
 /*min-height: 100%;*/


}

.gold {
  color: #F3C064;	
}

.weis {
  color: white;
}

.responsiver-text_gross {
  /* Fließende Schriftgröße: minimal 16px, ideal 2.5vw, maximal 32px */
  font-size: clamp(2rem, 6vw, 10rem);
  
  background-color: rgba(0, 0, 0, 0.1); /* Optional: Halbtransparenter Hintergrund für bessere Lesbarkeit */
  max-width: 100%; /* Verhindert ein Herausragen auf kleinen Bildschirmen */
  
  /* Der breite Rahmen direkt über dem Text */
  /* border-top: 8px solid #ffcc00; /* 8px breit, Farbe nach Wunsch anpassen */
}

.responsiver-text {
  /* Fließende Schriftgröße: minimal 16px, ideal 2.5vw, maximal 32px */
  font-size: clamp(2rem, 5vw, 4rem);

  background-color: rgba(0, 0, 0, 0.1); /* Optional: Halbtransparenter Hintergrund für bessere Lesbarkeit */
  
  max-width: 100%; /* Verhindert ein Herausragen auf kleinen Bildschirmen */
  
  /* Der breite Rahmen direkt über dem Text */
  /* border-top: 8px solid #ffcc00; /* 8px breit, Farbe nach Wunsch anpassen */
}


.responsiver-text2 {
  /* Fließende Schriftgröße: minimal 16px, ideal 2.5vw, maximal 32px */
  font-size: clamp(1rem, 2.5vw, 2rem);
  background-color: rgba(0, 0, 0, 0.5); /* Optional: Halbtransparenter Hintergrund für bessere Lesbarkeit */
}


.img_mittig {
   display: block;
   margin-left: auto;
   margin-right: auto;
}


.rahmen_gold{
	/* Der umlaufende Rahmen mit abgerundeten Ecken */
  border: 4px solid #F3C064; /* Rahmenstärke und Farbe */
  border-radius: 12px;       /* Je höher der Wert, desto runder die Ecken */
}

.rahmen_rechts_gold{

  border-left: 4px solid #F3C064; /* Rahmenstärke und Farbe */
  padding-left: 30px;
  
}

hr.balken_gold {
  border: none;
  border-top: 4px solid #F3C064; /* Die horizontale Linie */
  
  text-align: center;
  height: 0;
  margin: 10px auto;
  width: 100%;	
}

hr.balken_gold_kurz {
  border: none;
  border-top: 4px solid #F3C064; /* Die horizontale Linie */
  
  text-align: left;
  height: 0;
  margin: 0px;
  width: 40%;	
}

hr.balken_gold_kurz2 {
  border: none;
  border-top: 4px solid #F3C064; /* Die horizontale Linie */
  
  text-align: left;
  height: 0;
  margin: 0px;
  width: 20%;	
}

hr.linie_gold_kurz {
  border: none;
  border-top: 1px solid #F3C064; /* Die horizontale Linie */
  
  text-align: left;
  height: 0;
  margin: 0px;
  width: 40%;	
}

hr.linie_gold_kurz2 {
  border: none;
  border-top: 1px solid #F3C064; /* Die horizontale Linie */
  
  text-align: left;
  height: 0;
  margin: 0px;
  width: 20%;	
}

hr.linie {
  border: none;
  border-top: 1px solid #3F4E5F; /* Die horizontale Linie */
  
  text-align: left;
  height: 0;
  margin: 0px;
  width: 100%;	
}

hr.quadrat-linie {
  border: none;
  border-top: 2px solid #F3C064; /* Die horizontale Linie */
  overflow: visible;         /* Wichtig, damit das Quadrat sichtbar ist */
  text-align: center;
  height: 0;
  margin: 30px auto;
  width: 60%;
}

hr.quadrat-linie::after {
  content: '';
  display: inline-block;
  position: relative;
  top: -11px;                 /* Verschiebt das Quadrat exakt auf die Linie (Hälfte der Höhe) */
  width: 10px;               /* Breite des Quadrats */
  height: 10px;              /* Höhe des Quadrats */
  background-color: #F3C064;    /* Gleiche Farbe wie die Linie */
  transform: rotate(45deg);  /* Drehung um 45 Grad */
}

hr.doppel-linie {
  border: none;
  border-top: 2px solid #F3C064;       /* 1. Hauptlinie (oben) */
  overflow: visible;               /* Wichtig für das Quadrat */
  text-align: center;
  height: 0;
  margin: 40px auto;
  width: 80%;
  position: relative;              /* Basis für die Positionierung */
}

/* Das um 45 Grad gedrehte Quadrat auf der oberen Linie */
hr.doppel-linie::after {
  content: '';
  display: inline-block;
  position: relative;
  top: -9px;                       /* Zentriert das Quadrat auf der oberen Linie */
  width: 16px;
  height: 16px;
  background-color: #F3C064;
  transform: rotate(45deg);
  z-index: 2;                      /* Sorgt dafür, dass das Quadrat oben liegt */
}

/* Die 2. feine Linie darunter */
hr.doppel-linie::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  top: 8px;                        /* Abstand zur oberen Linie */
  border-top: 1px solid #F3C064; /* Dünner und etwas heller */
}

/* Erstellt das zweispaltige Layout */
.listen-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Zwei exakt gleich breite Spalten */
  gap: 50px;                      /* Abstand in der Mitte (verhindert das Treffen der Linien) */
  /*
  max-width: 800px;               /* Begrenzt die Gesamtbreite nach Wunsch */
  /* margin: 0 auto; */
}

/* Formatiert die Listen */
.listen-container ul {
  list-style-type: square;        /* Quadratische Aufzählungszeichen */
  list-style-position: inside;    /* Holt das Quadrat nach drinnen, damit die Linie darunter verläuft */
  padding-left: 0;                /* Einrückung für die Quadrate */
  margin: 0;
}

/* Färbt das Quadrat */
.listen-container li::marker {
  color: #F3C064;                 /* Ihre Wunschfarbe für das Quadrat */
}

/* Erstellt die feine Linie unter jedem Punkt */
.listen-container li {
  font-size: clamp(1rem, 2.5vw, 2rem); /* Dynamische Textgröße */
  color: white;
  padding-bottom: 8px;            /* Abstand vom Text zur Linie */
  margin-bottom: 8px;             /* Abstand von der Linie zum nächsten Punkt */
  position: relative;             /* Erlaubt die Positionierung der neuen Linie */

  /* border-bottom: 1px solid #ddd;  /* Die feine Linie (hellgrau) */
}

/* Erstellt die neue, gekürzte Linie unter dem Punkt */
.listen-container li::after {
  content: "";                            /* Benötigt, damit das Element sichtbar wird */
  position: absolute;
  bottom: 0;                              /* Setzt die Linie ganz nach unten */
  left: 0;                                /* Startet die Linie ganz links (unter dem Quadrat) */
  width: 75%;                            /* DIE BREITE DER LINIE (z. B. 50px oder 30%) */
  border-bottom: 1px solid #3F4E5F;          /* Die feine Linie */
}

.mehr_abstand {
  margin-top: 30px;
  margin-bottom: 30px;
}

p.weniger_abstand {
  margin-bottom: -10px;
}

/* Die zweite Hintergrund-Box zentriert den Inhalt komplett */
.hintergrund-box.zentriert {
  display: flex;
  justify-content: center; /* Horizontal zentrieren */
  align-items: center;     /* Vertikal zentrieren */
}

/* Das Text-Element mit komplettem Rahmen und runden Ecken */
.rahmen-text {
  /* Fließende Schriftgröße (wie bei der ersten Box) */
  font-size: clamp(2rem, 5vw, 4rem);
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 15px 25px; /* Mehr Padding an den Seiten für bessere Optik */
  margin: 0;
  text-align: center; /* Text innerhalb des Rahmens zentrieren */

  box-sizing: border-box; /* Verhindert, dass das Padding die 90% vergrößert 
  
  /* Der umlaufende Rahmen mit abgerundeten Ecken */
  border: 4px solid #ffcc00; /* Rahmenstärke und Farbe */
  border-radius: 12px;       
  
}

.theme-showcase{
	
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 1px;
	padding-left: 30px;
	padding-right: 30px;
	/*background: #ffffff; */

	/* background: #eeeeee; */
}


#fusszeile2 {
	padding: 25px;
}

#fusszeile a {
  color: #FFFFFF;
}

.logo-fusszeile {
	padding: 25px;

}

/* Fußzeile */
#fusszeile {
  /* background-color: blue; */
  background-image: linear-gradient(to bottom,var(--navbar-haupt-bg) 0,var(--navbar-rahmenfarbe) 100%);
  background-image: linear-gradient(to bottom,var(--navbar-rahmenfarbe) 0,var(--navbar-haupt-bg) 100%);
  color: #FFFFFF;
  padding: 25px;
}

.dataTables_wrapper .dataTables_length, 
.dataTables_wrapper .dataTables_filter, 
.dataTables_wrapper .dataTables_info, 
.dataTables_wrapper .dataTables_processing, 
.dataTables_wrapper .dataTables_paginate {
  /* color: #333; */
  color: #F3C064 !important;
}


/* navbar*/

.navbar {
  margin-bottom: 0px;
}

/* Motnie Navbar Balken*/
.navbar-motnie {
    background-color: var(--navbar-haupt-bg);   /* Haupt-Farbe */
    background-image: linear-gradient(to bottom,var(--navbar-haupt-bg) 0,var(--navbar-rahmenfarbe) 100%);
    border-color: var(--navbar-rahmenfarbe);
}

/* Menü-Links */
.navbar-motnie .navbar-nav > li > a {
    color: var(--navbar-textfarbe);
}

/* Hover im Menübalken */
.navbar-motnie .navbar-nav > li > a:hover,
.navbar-motnie .navbar-nav > li > a:focus {
    background-color: var(--navbar-rahmenfarbe);
    color: var(--navbar-textfarbe);
}

/* Brand (Titel links) */
.navbar-motnie .navbar-brand {
    color: var(--navbar-textfarbe);
}

.navbar-motnie .navbar-brand:hover,
.navbar-motnie .navbar-brand:focus {
    color: var(--navbar-helle-farbe);
}


/* Toggle Button (Mobile) */
.navbar-motnie .navbar-toggle {
    border-color: var(--navbar-textfarbe);
}

.navbar-motnie .navbar-toggle .icon-bar {
    background-color: var(--navbar-textfarbe);
}

/* =====================================
   SUBMENÜ – HARTES OVERRIDE
   ===================================== */

/* 1. Untermenü */
.navbar-motnie .dropdown-menu {
    background-color: var(--navbar-submenu-bg);
    border: 1px solid var(--navbar-rahmenfarbe);
}

/* Submenü-Container */
.navbar-motnie .dropdown-submenu > .dropdown-menu {
    background-color: var(--navbar-submenu-bg);
    border: 1px solid var(--navbar-rahmenfarbe);
    margin-top: -1px;
}

/* Alle Submenülinks */
.navbar-motnie .dropdown-menu > li > a {
    color: var(--navbar-textfarbe2);
    background-color: transparent;
}


/* ===============================
   SUBMENU-PFEIL (SEHR WICHTIG)
   =============================== */
/* Pfeilfarbe Standard Submenü*/
.navbar-motnie .dropdown-submenu > a:after {
    /* border-left-color: var(--navbar-haupt-bg) !important; */
    border-left-color: black !important;
}

/* Pfeilfarbe Hover Submenüs */
.navbar-motnie .dropdown-submenu:hover > a:after {
    border-left-color: var(--navbar-textfarbe3) !important;
}

/* Trennlinie im Submenü */
.navbar-motnie .dropdown-menu .divider {
    background-color: var(--navbar-rahmenfarbe);
}

/* geöffneter Menüpunkt im Balken */
.navbar-motnie .nav .open > a,
.navbar-motnie .nav .open > a:hover,
.navbar-motnie .nav .open > a:focus {
    background-color: var(--navbar-dunkle-farbe);
    color: var(--navbar-textfarbe);
}

/* 2. Submenü-Ebene in Navbar Hover */
.navbar-motnie .dropdown-submenu .dropdown-menu > li > a:hover,
.navbar-motnie .dropdown-submenu .dropdown-menu > li > a:focus {
    background-color: var(--navbar-helle-farbe);
    background-image: linear-gradient(to bottom,var(--navbar-helle-farbe) 0,var(--navbar-helle-farbe) 100%);
    color: var(--navbar-textfarbe3);
}

/* 1. Submenü-Ebene in Navbar Hover */
.navbar-motnie .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-motnie .navbar-nav > li > .dropdown-menu > li > a:focus {
    background-color: var(--navbar-helle-farbe);
    background-image: linear-gradient(to bottom, var(--navbar-helle-farbe) 0%, var(--navbar-helle-farbe) 100%);
    color: var(--navbar-textfarbe3);
}

/* Aktiver Menüpunkt in den Submenüs */
.navbar-motnie .dropdown-menu > .active > a,
.navbar-motnie .dropdown-menu > .active > a:hover,
.navbar-motnie .dropdown-menu > .active > a:focus {
    background-color: var(--navbar-dunkle-farbe) !important;
    background-image: linear-gradient(to bottom, var(--navbar-dunkle-farbe) 0%, var(--navbar-dunkle-farbe) 100%)!important;
    color: var(--navbar-textfarbe) !important;
}

/* Aktiver Menüpunkt im Balken*/
.navbar-motnie .navbar-nav > .active > a,
.navbar-motnie .navbar-nav > .active > a:hover,
.navbar-motnie .navbar-nav > .active > a:focus {
    background-color: var(--navbar-dunkle-farbe) !important;
    color: var(--navbar-textfarbe) !important;
}

@media (max-width:767px) {

    /* Navbar-Balken bleibt kräftig */
    .navbar-motnie {
       background-color: var(--navbar-haupt-bg);
    }

    /* =====================================
    MOBILE: WEISSER COLLAPSE + LESBARE MENÜS
    ===================================== */

    /* Weißer Hintergrund mit Schatten beim Aufklappen */
    .navbar-motnie .navbar-collapse {
        background-color: var(--navbar-handy-bg);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    /* 1. Menüebene – Text wieder dunkel */
    .navbar-motnie .navbar-nav > li > a {
        color: var(--navbar-textfarbe2);
    }


    /* Ebene 2 Schatten hinzufügen zur Abgrenzung*/
    .navbar-motnie .navbar-nav > li > .dropdown-menu {

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    /* Submenü-Struktur statt Farbe */
    .navbar-motnie .dropdown-submenu > .dropdown-menu {
        border-left: 5px solid var(--navbar-rahmenfarbe);
        margin-left: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
    }

    /* =====================================
    MOBILE: EINRÜCKUNG  DER SUBMENÜS
    ===================================== */

    /* Ebene 2 einrücken */
    .navbar-motnie .navbar-nav > li > .dropdown-menu > li > a {
        padding-left: 30px;
    }

    /* Ebene 3 */
    .navbar-motnie .dropdown-submenu > .dropdown-menu > li > a {
        padding-left: 45px;
    }

    /* Ebene 4 (falls vorhanden) */
    .navbar-motnie .dropdown-submenu .dropdown-submenu > .dropdown-menu > li > a {
        padding-left: 60px;
    }

    /* Ebene 5 (falls vorhanden) */
    .navbar-motnie .dropdown-submenu .dropdown-submenu .dropdown-submenu> .dropdown-menu > li > a {
        padding-left: 75px;
    }

        /* Sehr dezenter Hover / Fokus */
    .navbar-motnie .navbar-nav > li > a:hover,     /* Hover / Fokus 1. Ebene */
    .navbar-motnie .navbar-nav > li > a:focus,
    .navbar-motnie .dropdown-menu > li > a:hover,
    .navbar-motnie .dropdown-menu > li > a:focus {
        background-color: var(--navbar-helle-farbe);
        color: var(--navbar-textfarbe3);
    }

    /* Aktiver Menüpunkt (mobil zurückhaltend) */
    .navbar-motnie .navbar-nav > li > a:hover
    .navbar-motnie .navbar-nav > li > a:focus,
    .navbar-motnie .nav .open > a,
    .navbar-motnie .nav .open > a:hover,
    .navbar-motnie .nav .open > a:focus,
    .navbar-motnie .navbar-nav .open .dropdown-menu>.active>a,
    .navbar-motnie .navbar-nav .open .dropdown-menu>.active>a:focus,
    .navbar-motnie .navbar-nav .open .dropdown-menu>.active>a:hover,
    .navbar-motnie .navbar-nav > .active > a, /* Aktiver Punkt 1. Ebene */
    .navbar-motnie .navbar-nav > .active > a:hover,
    .navbar-motnie .navbar-nav > .active > a:focus,
    .navbar-motnie .dropdown-menu > .active > a,
    .navbar-motnie .dropdown-menu > .active > a:hover,
    .navbar-motnie .dropdown-menu > .active > a:focus {
        background-color: var(--navbar-helle-farbe2) !important;   /* leicht stärker, aber dezent */
        background-image: linear-gradient(to bottom, var(--navbar-helle-farbe2) 0%, var(--navbar-helle-farbe2) 100%) !important;
        color: var(--navbar-textfarbe3)!important;
        font-weight: 600;
    }

/* =====================================
   MOBILE: BOOTSTRAP-CARETS DREHEN
   ===================================== */

    /* Caret Grundzustand */
    .navbar-motnie .caret {
        transition: transform 0.2s ease;
        transform: rotate(-90deg);
        margin-left: 6px;
        opacity: 0.6;
        border-width: 5px 5px 0;
    }

    /* Geöffnet → Caret nach unten drehen */
    .navbar-motnie .dropdown.open > a .caret,
    .navbar-motnie .dropdown-submenu.open > a .caret {
        transform: rotate(0deg);
        opacity: 0.9;
    }

    /* Pfeil für Submenü nach unten drehen wenn offen */
    .dropdown-submenu.open > a:after {
        transform: rotate(90deg);
    }
}