/* Hauptmenü */
.container-topbar .mod-menu {
    max-width: 1200px;
    
  background: linear-gradient(90deg, rgba(230, 245, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
/* Der Unschärfe-Effekt lässt den Hintergrund "frostig" wirken */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); 
  /*  Eine feine weiße Linie am Rand für mehr Kontur */
  border-left: 1px solid rgba(255, 255, 255, 0.8) !important; 
  border-right: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    display: flex !important;
    justify-content: center;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 2px; /* Vergrößert die Menüleiste unterhalb der Schrift */
  
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden; /* Sorgt dafür, dass der Inhalt nicht über die Rundung ragt */
  font-family: "Arial", Helvetica, sans-serif;
    font-size: 12pt;    
}

/* Topmenü */
.moduletable.topmenue {
    max-width: 1200px;
  background-color: rgba(230, 245, 255, 0.6) !important; /* 60% Transparenz */
    /* backdrop-filter: blur(5px);  Optional: Macht den Hintergrund hinter dem Menü unscharf (moderner Look) */
    margin-left: auto;
    margin-right: auto;
  margin-top: -16px !important; /* Rückt das untere Menü genau an das Bannerbild */
  padding-top: 2px;   /* Höhe des Menübandes */
  padding-bottom: 0px;  /* Höhe des Menübandes */
    display: flex !important;
    justify-content: center; /* Zentriert die Menüpunkte */
    width: 100%;
  font-family: "Arial", Helvetica, sans-serif;
    font-size: 12pt; 
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  /* Eine feine weiße Linie am unteren Rand für mehr Kontur */
  border-left: 1px solid rgba(255, 255, 255, 0.8) !important; 
  border-right: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
  overflow: hidden;
}

.topmenue {
    position: relative; 
    z-index: 100;      /* Damit liegt das Topmenü über dem Bannerbild */
}

/* Deaktiviert text-decoration und Schatten für die Links */
div.topmenue a  {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    }

/* Rückt das Bannerbild schön in die Mitte und sorgt für die richtige Breite */
.container-below-top {
    max-width: 1200px; 
    margin-top: -9px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 1. Schriftfarbe der Menüpunkte im Normalzustand auf Anthrazit setzen */
.container-topbar .mod-menu a, 
.container-topbar .navbar-nav .nav-link {
    color: #343a40 !important;          /* Klassisches Anthrazit */
    
    transition: all 0.2s ease-in-out;   /* Macht den Übergang beim Hovern weicher */
    padding: 0.15rem 0.3rem !important;    /* Platz um den Text für die Hover-Fläche */
  }

/* 2. Effekt beim Drüberfahren mit der Maus (Hover) */
.container-topbar .mod-menu a:hover, 
.container-topbar .navbar-nav .nav-link:hover {
    color: #ffffff !important;          /* Schrift wird weiß */
    background-color: #940000 !important;
    border-radius: 6px !important;      /* Schicke, abgerundete Ecken */
    }

/* 3. Zustand für den aktiven Menüpunkt (wenn man auf der Seite ist) */
/* Optional: Falls der aktive Punkt auch dauerhaft blau/abgerundet sein soll: */
.container-topbar .mod-menu .active > a, 
.container-topbar .navbar-nav .active > .nav-link {
    color: #ffffff !important;
    background-color: #940000 !important;
    border-radius: 6px !important;
    }

/* 1. Schriftfarbe der Menüpunkte im Normalzustand auf Anthrazit setzen */
.topmenue .mod-menu a, 
.topmenue .navbar-nav .nav-link {
    color: #343a40 !important;          /* Klassisches Anthrazit */
    font-weight: 500;                   /* Angenehme Schriftstärke */
    transition: all 0.2s ease-in-out;   /* Macht den Übergang beim Hovern weicher */
    padding: 0.15rem 0.3rem !important;    /* Platz um den Text für die Hover-Fläche */
}

/* 2. Effekt beim Drüberfahren mit der Maus (Hover) */
.topmenue .mod-menu a:hover, 
.topmenue .navbar-nav .nav-link:hover {
    color: #ffffff !important;          /* Schrift wird weiß */
    background-color: #940000 !important; 
    border-radius: 6px !important;      /* Schicke, abgerundete Ecken */
}

/* 3. Zustand für den aktiven Menüpunkt (wenn man auf der Seite ist) */
/* Optional: Falls der aktive Punkt auch dauerhaft blau/abgerundet sein soll: */
.topmenue .mod-menu .active > a, 
.topmenue .navbar-nav .active > .nav-link {
    color: #ffffff !important;
    background-color: #940000 !important;
    border-radius: 6px !important;
}

/* Legt die Standard Schrift für die Website fest */
body {
    font-family: "Arial", Helvetica, sans-serif;
    font-size: 11.5pt;
    line-height: 1.4; /* Optional: Erhöht die Lesbarkeit durch etwas mehr Zeilenabstand */
}

body {
    background-image: url('/images/background/himmel_st_aufgeh_1920x1080.jpg'); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Löscht die typische Cassiopeia-Farbe aus dem Headerbereich */
.container-header {
    background: transparent !important;
    background-image: none !important;
}



/* Bringt Header und Content, bzw Sidebar + Content auf die richtige Breite */
.site-grid {
    max-width: 1225px;
    margin-left: auto;
    margin-right: auto;
}

/* Verhindert das Hintergrundbild im JCE Editor Fenster */
body.mceContentBody {
    background-image: none !important;
    background-color: #ffffff !important;
}

/* Erhöhte Spezifität für den JCE Editor */
html#tinymce.mce-content-body, 
body#tinymce.mceContentBody {
    background-image: none !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* ==========================================
   SIDEBAR LINKS
   ========================================== */

.grid-child.container-sidebar-left {
    background: linear-gradient(
        90deg,
        rgba(230,245,255,0.60) 0%,
        rgba(255,255,255,0.30) 100%
    );

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 10px;
    margin-top: -20px;
    padding: 6px;
    box-sizing: border-box;
}

/* Modulcontainer transparent */

.container-sidebar-left .moduletable,
.container-sidebar-left .card,
.container-sidebar-left .card-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================
   CONTENT
   ========================================== */

.container-component {
    background: rgba(255,255,255,0.40);
    
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 10px;
    margin-top: -20px;
    padding-top: 2px;
  padding-left: 12px;
  padding-right: 8px;
  padding-bottom: 8px;
    box-sizing: border-box;
}

/* ==========================================
   ABSTAND ZWISCHEN SIDEBAR UND CONTENT
   ========================================== */

.site-grid {
    column-gap: 12px !important;
}

 /* @media (min-width: 991.98px) {

    .container-sidebar-left {
        flex: 0 0 260px;
    }

    .container-component {
        flex: 1;
    }  }  */

.bild-mit-rahmen {
    border: 3px solid #fcf5f5; /* Rahmen, Farbe hellgrau */
    outline: 1px solid darkgray; /* 1px Außenrahmen, Farbe dunkelgrau */
    border-radius: 5px;      
    padding: 0;               /* Kein Abstand zwischen Bild und Rand */
    overflow: hidden;
    display: block; /* Verhindert kleine Lücken unter dem Bild */
} 

.bild-mit-rahmen-menu {
    flex-shrink: 0;   /* Verhindert das Zusammenquetschen */
    border: 2px solid #a16c05; /* Rahmen, Farbe braun */
    outline: 1px solid darkgray; /* 1px Außenrahmen, Farbe dunkelgrau */
    border-radius: 5px;      
    padding: 0;               /* Kein Abstand zwischen Bild und Rand */
    overflow: hidden;
    display: block; /* Verhindert kleine Lücken unter dem Bild */
} 
.ueberschrift {
    background-color: #940000; /* Dunkelrot */
    color: #ffffff !important;  /* Weißer Text */
    text-align: center !important;        
    font-family: "Arial", Helvetica, sans-serif !important; /* Helvetica mit Fallback */
    font-size: 11.5pt !important;           
  font-weight: 600 !important;          
      padding: 0px 12px 0px 12px !important;         /* Abstand Text zu Rand (oben/unten, links/rechts) */
    border: 3px solid #CCCCFF !important;  /* hellvioletter Rahmen */
    border-radius: 7px !important;        /* abgerundete Ecken */
        display: inline-block !important;      /* Sorgt für korrekte Abstände */    
 }

.ueberschrift-sb {
    background-color: #940000; /* Dunkelrot */
    color: #ffffff !important;  /* Weißer Text */
    text-align: center !important;        
    font-family: "Arial", Helvetica, sans-serif !important; /* Helvetica mit Fallback */
    font-size: 11.5pt !important;           
  font-weight: 600 !important;          
      padding: 0px 12px 0px 12px !important;         /* Abstand Text zu Rand (oben/unten, links/rechts) */
    border: 3px solid #CCCCFF !important;  /* hellvioletter Rahmen */
    border-radius: 7px !important;        /* abgerundete Ecken */
        display: inline-block !important;      /* Sorgt für korrekte Abstände */    
 }

.roter-button {
    background-color: #940000 !important;
    color: #ffffff !important;
    padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 12px;
  padding-right: 12px; /* Etwas mehr Padding empfohlen für Klickbarkeit */
    border: 2px solid #CCCCFF;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    font-weight: normal;
    cursor: pointer;
}

.roter-button:hover {
    background-color: #691212 !important;
    color: #ffffff !important;
    text-decoration: none;
}

.blauer-button {
    background-color: #3D618f !important;
    color: #ffffff !important;
    padding-top: 2px;
  padding-bottom: 1px;
  padding-left: 12px;
  padding-right: 12px; /* Etwas mehr Padding empfohlen für Klickbarkeit */
    border: 2px solid #CCCCFF;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    font-weight: normal;
    cursor: pointer;
}

.blauer-button:hover {
    background-color: #2a4566 !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* Den Link-Container (Sidebar-Menü) neutralisieren */
.custom-menu-item {
    display: flex;         /* Bild und Text nebeneinander */
    align-items: center;   /* Mittig ausrichten */
    text-decoration: none !important; /* Unterstreichung weg */
    color: inherit;        /* Nimmt die Farbe der Spans an */
    margin-bottom: 12px;
    gap: 10px;             /* Abstand zwischen Bild und Text */
}

/* Der Link als Block-Element für die volle Fläche */
.side-menu-container a.custom-menu-item {
    display: flex;
    align-items: flex-start;
    padding: 2px 0px 0px 4px;
    text-decoration: none;
    color: inherit;
    background-color: transparent; /* Oder deine Wunschfarbe */
    transition: background-color 0.3s ease; /* Weicher Übergang */
    border-radius: 7px;
}

/* Der Hover-Effekt für die gesamte Fläche */
.side-menu-container a.custom-menu-item:hover {
    background-color: #FFF; /* Hier deine gewünschte Hover-Farbe einsetzen */
    color: #000; /* Textfarbe beim Hover falls nötig */
}

/* Die verschiedenen Schriftstile für die Sidebar definieren */
.text-bold {
  font-family: "Arial", Helvetica, sans-serif; 
  font-weight: 700;
    color: #3d618f;
    font-size: 11pt;
  line-height: 1.2;
}

.text-bold2 {
  font-family: "Arial", Helvetica, sans-serif; 
  font-weight: 700;
    color: #115031;
    font-size: 10.5pt;
  line-height: 1.2;
}

.text-normal {
   font-family: "Arial", Helvetica, sans-serif;
   font-weight: normal;
    color: black;
    font-size: 10.5pt;
  line-height: 1.2;
}

/* Den Standard-Player umfärben und Position */
audio {
    filter: sepia(60%) saturate(500%) hue-rotate(180deg) brightness(100%);
    border-radius: 7px; 
    display: block;
    margin-top: -8px;
    max-width: 100%; 
    border: 2px solid #970000;
    background-color: white;
}

/* Abstände für Trennlinien in Beiträgen minimieren */
hr {
    margin-top: -6px !important;    /* Minimaler Abstand oben */
    margin-bottom: 4px !important; /* Minimaler Abstand unten */
    border: 0;                     /* Standard-Rahmen entfernen */
    border-top: 1px solid #4682B4;    /* Dünne Linie definieren */
    opacity: 1;  
    height: 1px;                   /* Verhindert Eigenhöhe */
  }

/* Spezielle, kräftigere Linie */
hr.hr-strong {
    margin-top: -8px !important;    
    margin-bottom: 8px !important; 
    border: 0;                     /* Standard-Rahmen entfernen */
    border-top: 2px solid #4682B4;    /* Linie definieren */
    opacity: 1;  
    height: 1px;                   /* Verhindert Eigenhöhe */
  }

 /* Footer-Bereich gestalten */
.grid-child.container-bottom-a {
    color: #ffffff;
    padding: 0px 0px; /* Abstand zum Content oben */
    margin-top: 3px; /* Abstand zum Content oben */
    border-radius: 10px;
    overflow: hidden;  /* Entfernt den weißen Rand um den Footer-Container */
}

.footer {
  border-radius: 10px;
  }
  
.footer-counter {
    margin-top: -20px; /* Verkleinert die Höhe des Footers */
    margin-bottom: -20px; /* Verkleinert die Höhe des Footers */
    line-height: 1.5;
    font-weight: bold;
    color: #FFF;
    }

.footer a {
padding: 4px 6px; /* Etwas Platz um den Text für die Klickfläche */
    border-radius: 8px; /* Leicht abgerundete Ecken */
    transition: background-color 0.3s ease, color 0.3s ease; /* Weicher Übergang */
    text-decoration: none !important;
}

.footer-links a:hover {
    background-color: #3d618f; /* dunkelblau */
    color: #FFFFFF !important;   
    text-decoration: none !important;
}

/* Betrifft alle normalen Eingabefelder und Dropdowns in diesem Formular */
.kompaktes-formular input[type="text"], 
.kompaktes-formular input[type="email"], 
.kompaktes-formular input[type="tel"], 
.kompaktes-formular select {
    width: 450px !important;  /* Deine gewünschte Breite */
    height: 28px !important;  /* Deine gewünschte Höhe */
    padding: 2px 6px !important; 
}

/* Erhöht die Priorität massiv, egal wie das Template verschachtelt ist */
div.visforms-form .invalid-feedback,
div.visforms-form div.visforms-message-container,
div.visforms-form .text-danger,
.visforms-form [role="alert"] {
    font-size: 16px !important;    /* Deutlich größer zum Testen */
    font-weight: 700 !important;   /* Richtig fett */
    display: block !important;     /* Sicherstellen, dass die Größe zieht */
}

/* ==========================================
ab hier: Gesamtes responsives CSS für Handy 
========================================== */

@media (max-width: 991.98px) {

    .site-grid > [class^="container-"],
    .site-grid > [class*=" container-"]
  {
        grid-column: 1 / -1 !important; /* Nutzt die volle verfügbare Breite */
               
        /* Hier werden die exakten 4px Seitenrand erzwungen - Wichtig! */
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }  

       /* Hauptmenü 4px Rand erzwingen, die anderen beiden greifen nicht - OK */
  .container-topbar,
  .container-sidebar-left,
  .container-component  {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Korrigiert auf dem Handy die Überlappung von Content zu Sidebar, welche ja unter dem Content angezeigt wird - OK */
@media (max-width: 991.98px) {
    .container-sidebar-left {
        margin-top: 11px !important;
    }
}

@media (max-width: 991.98px) {
  .footer-counter {
    margin-top: -11px; /* Verkleinert die Höhe des Footers */
    margin-bottom: -15px; /* Verkleinert die Höhe des Footers */
    line-height: 1.1;
    font-weight: bold;
    color: #FFF;
    } 
 }
/* Zählerstand einzeilig schreiben */
@media (max-width: 991.98px) {
.footer-counter .jsvisitcounter .table {
    display: flex !important;
    width: auto !important;
    gap: 1.2rem;
    align-items: center;
}
/* Abstand zwischen den beiden Zählerständen */
.footer-counter .jsvisitcounter .table_row {
    display: flex;
    gap: 0.35rem;
}

  .footer-counter .table_row:not(:last-child)::after {
    content: "|";
    margin-left: 1rem;
   }
 }