html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    min-height: 100vh;
}

.highlight {
    background-color: yellow; /* Oder eine andere Farbe */
    font-weight: bold;
}

wortwolke-wort
/* ============== aktive Menüelement ===================== */

/* Header & Menü */
.site-header,  .menu-footer-menu-container {
    background-color: #333;
}






#menu-header-menu{margin-top: 4px; margin-bottom: 6px;}

/* ============== aktive Menüelement ===================== */
/* Hintergrundfarbe für das aktive Menüelement */
.current-menu-item {
/* 	margin-top: 4px; */
    background-color: #515151;  /* Farbe nach Wunsch anpassen */
    color: white;  /* Textfarbe ändern */
    
    
    /*    background-color: #007bff; */
  	/*   color: white; */
    box-shadow: inset 0 -3px 0 0 red, 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    z-index: 1;
}

#menu-mr-secret{
	margin-top: 0px;
	border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    }

/* Optional: Hervorhebung des aktiven Menüpunktes mit Rahmen */
.current-menu-item a {
    /* border-bottom: 2px solid #ff6600; */  /* Farbe und Stil nach Wunsch anpassen */
}
/* ============== end mister secret ===================== */

/* Hamburger Icon (falls benötigt) */
.hamburger-icon {
    display: none;
    font-size: 30px;
    cursor: pointer;
    margin-top: 20px;
}

/* ============== end mister secret ===================== */

/* ============== start wunder-menu ===================== */
/* Generelles Styling für Menüs, damit Listenpunkte und Padding entfernt werden */

/* Styling für das Wunder Menü */
.wunder-menu {
    list-style: none; /* Entfernt die Standard-Listenpunkte */
    margin: 0 12px 0 0;
    padding: 0;
    display: flex; /* Macht die Listenpunkte zu Flex-Items */
    justify-content: space-around; /* **Stretcht die Elemente horizontal über den verfügbaren Platz** */
    width: 100%; /* Stellt sicher, dass das Menü die volle Breite des Eltern-Containers einnimmt */
    box-sizing: border-box; /* Stellt sicher, dass Padding nicht die Breite erhöht */
}

/* Optional: Styling für den Wrapper des Wunder Menüs, falls verwendet */
.wunder-menu-wrapper {
	/* background-color: #f9f9f9; /* Eine leichte Hintergrundfarbe zur Abgrenzung */
	/* padding: 10px 0; Vertikaler Abstand  */    
 	/*  border-top: 1px solid #eee; /* Eine leichte Linie oben */
    text-align: center; /* Zentriert den Inhalt innerhalb des Wrappers */
    color: white;
    padding: 0 6px 0 0;
    
}


/* Styling für die einzelnen Menüpunkte im Wunder Menü */
.wunder-menu li {
	display: flex;
	gap:12px;
	margin-left: 12px;
    flex-grow: 1; /* **Lässt jedes <li> so viel Platz einnehmen, wie es kann** */
    text-align: center; /* Zentriert den Text innerhalb jedes Menüpunktes */
    /* Kein margin-left/right hier, da space-around und flex-grow den Abstand regeln */
}

.wunder-menu li a {
		gap:12px;
    display: block; /* Macht den Link zu einem Block, damit er den gesamten <li>-Bereich ausfüllt */
    padding: 8px 5px; /* Etwas vertikales und minimales horizontales Padding */
    text-decoration: none;
    color: white;
    white-space: nowrap; /* Verhindert Zeilenumbruch innerhalb des Links */
    font-size: 0.9em;
    transition: background-color 0.3s ease; /* Sanfter Übergang beim Hover */
}

.wunder-menu li a:hover,
.wunder-menu li a:focus {
    background-color: #e0e0e0;
    color: #000;
}

/* ============== end .wunder-menu  ===================== */

sub-container
/* Basis: Menü zurücksetzen */

.cl-mr-secret,
.cl-mr-secret ul,
.main-navigation,
.main-navigation ul {
  list-style: none;
 /*  margin: 12px; */
  padding: 0;

}
.cl-mr-secret li,
.main-navigation li {
  position: relative;
  display: inline-block;
  padding: 12px;
} 

.cl-mr-secret li a,
.main-navigation li a {
	/* padding: 0 15px; */
	color: white;
	text-decoration: none;
}

/* Submenü verstecken */
.main-navigation .sub-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background-color: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 0;
	min-width: 180px;
	z-index: 999;
}

/* Submenü zeigen beim Hover auf Elternpunkt */
.main-navigation li.menu-item-has-children:hover > .sub-menu {
  display: block;
}

/* Submenü-Links */
.main-navigation .sub-menu li {
  display: block;
  width: 100%;
}

.main-navigation .sub-menu li a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;

}

.main-navigation .sub-menu li a:hover {
  background-color: #f0f0f0;
}

/* Optional: Pfeil hinter Elternpunkt */
.main-navigation li.menu-item-has-children > a::after {
  content: " ▾";
  font-size: 0.75em;
  padding-left: 5px;
}
.cl-horizontal-menu{
	 background-color: #333;
}
.cl-horizontal-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 46px;
    padding: 2px 6px;
}
.cl-header-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-menu{
	 padding: 6px;
	 background-color: #333;
}
#hidrive-container-komplett ul {
  list-style-type: none;
  padding-left: 1em;
  border-left: 1px dotted #ccc;
  margin-left: 0.5em;
}
#hidrive-container-komplett li {
  margin: 0.2em 0;
}
#hidrive-container-komplett strong {
  user-select: none;
}

.cl-header-menu li {
    margin: 9px 3px;
}

.cl-header-menu li a {
    padding: 9px 18px;
    color: white;
    text-decoration: none;
}

.cl-header-menu li a:hover {
    background-color: #ddd;
    color: black;
}

/* =================== Secondary Menu  =================== */
/* Hauptmenü-Styling */
.secondary-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 6px;
    padding: 5px 0; /*  10px ersetzt we*/
    margin: 0 12px 0 0;
    background-color: #333; /*  #f5f5f5; ersetzt we*/ 
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    position: relative;
}

/* Menüelemente */
.secondary-menu li {
    position: relative;
}

/* Links im Menü */
.secondary-menu li a {
	font-size: 12px;
    text-decoration: none;
    color: #ffffff;
    padding: 2px 3px; /*  8px und 12px ersetzt we*/
    font-weight: 300;
    transition: all 0.3s ease;
    display: block;
}

/* Hover-Effekt */
.secondary-menu li:hover > a,
.secondary-menu li.current-menu-item > a {
    color: #fff;
    background-color:  #7c7c7c; /* #0073aa; ersetzt we*/ 
    border-radius: 4px;
}

/* Untermenü (Dropdown) */
.secondary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 0;
    padding: 0;
    min-width: 160px;
    z-index: 9999;
}

/* Untermenü zeigen bei Hover */
.secondary-menu li:hover > .sub-menu {
    display: block;
}

/* Untermenü-Links */
.secondary-menu .sub-menu li a {
    padding: 3px 6px; /*  5px und 7.5px ersetzt we*/
    color: #333;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.secondary-menu .sub-menu li a:hover {
    background-color: #7c7c7c; /* #0073aa; ersetzt we*/ 
    color: #fff;
}


/* End pdfs Allgemeine Styles */
#sidebar-tree {
	max-width: 25%;
	word-wrap: break-word;
	padding: 6px;
	border-radius: 6px;
}
/* Mobile Anpassung */
@media (max-width: 768px) {
    .secondary-menu {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .secondary-menu li a {
        display: block;
        width: 100%;
        text-align: center;
    }
}
/* =================== Secondary Menu End  =================== */

/* Layout */
.main-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

#content{
    width: 75%;
    padding: 12px 6px;
    border-radius: 6px;
    border: solid 1px #787878;
}

#content > div {
	padding: 12px 12px;
	margin: 6px 6px;
	opacity:1;
	box-sizing: box;
	border-radius: 6px;
}

#id-p-red > div {

	border: dotted 1px #787878;
	border-radius: 6px;
}

#id-p-red  {
	
	 border: dotted 1px #787878;

}

#pdfs-input, #sub-input{ width:99%; }

/* Sidebar Links */
#sidebar a {
    padding: 10px 15px;
    color: white;
    text-decoration: none;
    font-size: 18px;
}

/* Collapsed Sidebar */
.collapsed #sidebar { width: 60px; }
.collapsed #content { margin-left: 60px; }

/* Footer Menü */
#menu-footer-menu {
    display: flex;
    justify-content: flex-end;
    list-style: none;
}

#menu-footer-menu a {
  /*   margin: 0 15px; */
    color: white;
    /* padding: 10px 15px; */
}

#menu-footer-menu a:hover {
    color: #0073aa;
}

/* Bilder */
.img-container-landscape img {
    width: 100%;
    display: block;
}

.img-container-portrait img {
    margin: 0 auto;
    width: 30%;
    display: block;
}
#content > p:nth-child(3) > img{
    margin: 0 auto;
    width: 30%;
    display: block;
}

/* Text Center */
.text-container { text-align: center; }

/* Buttons */
.aktuelle-button-gruppe-verzeichnis-abschnitt {
    width: 100%;
    height: 50px;
    margin: 4em auto;
    text-align: center;
}

.aktuelle-button {
    padding: 1%;
    height: 48px;
    width: 30%;
    background: #f7f7f7;
    border-radius: 18px;
    font-size: 0.7em;
    cursor: pointer;
    color: #787878;
}

/* Timeline */
.timeline {
    margin: auto;
    padding: 20px 0;
    max-width: 100%;
    list-style: none;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ddd;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    width: calc(50% - 20px);
    padding-left: 20px;
    margin-bottom: 20px;
}

.timeline-item:nth-child(odd) {
    float: left;
    text-align: right;
    padding-right: 20px;
}

.timeline-item:nth-child(even) {
    float: right;
    text-align: left;
    padding-left: 20px;
}

.timeline-year {
    font-size: 1.5em;
    font-weight: bold;
}

.timeline-content {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Fullscreen Image */
.fullscreen-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Custom Container */
.custom-container h1 {
    font-size: 24px;
    color: white;
    margin-bottom: 10px;
}

.custom-container ul {
    list-style: none;
    padding: 1%;
    cursor: pointer;
}

.custom-container li {
    margin: 12px 0;
}

.custom-container a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

/* Simple List */
.simple-list ul {
    list-style: none;
    padding: 0;
}

.simple-list li {
    margin: 5px 0;
}

.simple-list a {
    text-decoration: none;
    color: #007BFF;
    font-size: 14px;
}

/* Flex Container */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.column {
    flex: 1 1 30%;
    padding: 10px;
}

/* Main Image */
#main-image {
    max-height: 200px;
    height: 200px;
    overflow: hidden;
}

#main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.column ul {
    list-style: none;
}

.column li {
    margin: 5px 0;
}

.column a {
    text-decoration: none;
    color: #007BFF;
    font-size: 14px;
}


#content > .preg{
/* 	 font-size: 30px;
	 text-align: center; */
	 padding: 12px;
	 border: dotted 1px  red;
	 border-radius: 6px;
}

#content > .willkommen-content {

 	text-align: center;
}
#content > div > img{
	margin-top: 5%;
	width:40%;
	margin-bottom: 3%;
}
#content > .willkommen-content> .pwil{
	margin-top: -6px;
	font-size: 36px;
	text-align: center;
	/* border: dotted 1px  red; */
}

#content > p:nth-child(2){	
	 text-align: center;
}

body > div.main-container > div.widget{
	width: 20%;
}

span.um-field-checkbox-option{
	display:none;
}
span.um-field-checkbox-state > i{
	display:none;
}
/* verz container */

.mpc-block {
    font-family: Arial, sans-serif;
    margin: 1rem;
}

.mpc-block input,
.mpc-block button {
    padding: 0.3rem;
    font-size: 1rem;
    margin-bottom: 12px;
    margin-top: 6px;
}


.mpc-block input {
    width: 98%; 
    display:flex
}



/* Name */


/* Modal Viewer für PDFs */
#pdfs-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.pdfs-modal-content {
    background: #fff;
    padding: 1rem;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    position: relative;
}

#pdfs-viewer iframe {
    width: 100%;
    height: 600px;
    border: none;
}

#pdfs-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.5rem 1rem;
    background: #d33;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.pdfs-actions {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pdfs-actions button,
.pdfs-actions a button {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background-color: #0073aa;
    color: white;
    transition: background-color 0.3s ease;
}

.pdfs-actions button:hover {
    background-color: #005f8a;
}
.pdfs-actions {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.pdfs-actions button {
    padding: 0.3rem 0.7rem;
    font-size: 0.9rem;
}

.breadcrumb-link {
    color: #0066cc;
    cursor: pointer;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

#library-content {
    display: flex;
    gap: 20px;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ------------------------------------------------------- */
/* styling für die page Gallorie */
/* /Gallorie  Gallorie Gallorie Gallorie Gallorie  Gallorie Gallorie Gallorie Gallorie  Gallorie Gallorie Gallorie/ */

/* Spinner (Loading Indicator) */
#son_spinner {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: #007bff;
}

/* /* Galerie Layout als 5x5 Grid */
#son_pagination{margin-left: auto; margin-right: auto;}

/* Pagination-Container */
.son_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
} 

/* Pagination-Button-Styling */
.son_pagination button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.son_pagination button:hover {
    background-color: #0056b3;
}

/* Deaktivierter Button */
.son_pagination button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Seitenzahl Styling */
.son_pageNumber {
    font-size: 1.2rem;
    color: #333;
}
/* CSS für die Hervorhebung des Suchbegriffs */
.highlight {
    background-color: yellow;
    font-weight: bold;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ------------------------------------------------------- */
/* spinner */
.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 10px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Media Query */
@media (max-width: 768px) {
    .cl-horizontal-menu {
        flex-direction: column;
        align-items: stretch;
    }
	.son_pdf-tile {
        width: 45%;
    }

    .hamburger-icon { display: block; }

    .cl-header-menu {
        display: none;
        flex-direction: column;
        background: #333;
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
    }

    .cl-header-menu.show { display: flex; }

    .cl-header-menu li { width: 100%; }

    .main-container { flex-direction: column; }

    #sidebar, #content { width: 100%; }

    .footer-menu {
        flex-direction: column;
        align-items: center;
    }

    .footer-menu a { margin: 5px 0; }
}

@media (max-width: 480px) {
    .son_pdf-tile {
        width: 100%;
    }

    .son_pagination {
        flex-direction: column;
        gap: 10px;
    }
}
