/* CSS Document */


h1 {font-size: clamp(2rem, 6vw, 3.5rem);}
h2 {font-size: clamp(1.75rem, 5vw, 3rem);}
h3 {font-size: clamp(1.5rem, 4.5vw, 2.5rem);}
h4 {font-size: clamp(1.25rem, 4vw, 2rem);}
h5 {font-size: clamp(1rem, 3.5vw, 1.75rem);}
h6 {font-size: clamp(0.875rem, 3vw, 1.5rem);}

body {display: flex;min-height: 100vh;flex-direction: column;}

main {flex: 1 0 auto;}

.modal {background-color: #EBEBEB;}
@media (prefers-color-scheme: dark) 
{
  /* CSS Code wenn Dark Mode aktiv */ 
	label {color:#FFF !important;}
	.modal {background-color: #6C6B6B;}
}
/* Smartphones (Portrait, max 600px) */
@media (max-width: 600px) 
{
  .breadcrumb {font-size: 0.9em;}
  .calendar {font-size: 0.7em;}
}

/* Tablets (Portrait & Landscape, 601px�992px) */
@media (min-width: 601px) and (max-width: 992px) 
{
	.breadcrumb {font-size: 1em;}
  	.calendar {font-size: 0.85em;}
}

/* Desktops (993px�1200px) */
@media (min-width: 993px) and (max-width: 1200px) 
{
	.breadcrumb {font-size: 1.1em;}
  	.calendar {font-size: 1em;}
}

/* Large Screens (ab 1201px) */
@media (min-width: 1201px) 
{
	.breadcrumb {font-size: 1.2em;}
  	.calendar {font-size: 1.1em;}
}

.MyHeadNav:hover {background-color: #DCDCDC;}

.menu_button {position: absolute;top: 75px; border-top-right-radius: 20px;border-bottom-right-radius: 20px; background-color: #2196f3;padding: 0.3em 1.2em 0.3em 0.1em;transition: 0.2s; cursor: alias;}
.menu_button i {font-size: 3em !important;}
.menu_button:hover {background-color: #CCC; transition: 0.2s;}
.rowEO {padding: 1em 0.3em;margin:0;}
.rowEOh:hover {background-color: #bbdefb  !important;}
.rowEO:nth-child(2n+1) {background-color: #CCC;}
.liEOh:hover {background-color: #bbdefb  !important;}
.liEO:nth-child(2n+1) {background-color: #CCC;}
.rowEO_zero {margin:0; padding: 0.2em 0;border-bottom: 1px solid #FFF;}

.OL_EO > li:nth-child(2n+1) {background-color: #CCC;}
.myOL {margin-left: 0;padding-left: 1em;}
.boxed {padding: 0.2em 0.4em; margin:0; border: 2px solid #CCC;}

.KG-but-small {margin: 0; padding: 0 0.4em; display: inline-block !important;}
.MyModal { padding: 2em;border-radius: 20px;}
.MyModal .modal-footer .btn-small {margin-right: 1em !important;}
.modal-content h4 {margin: 1em 0.5em;}
.material-tooltip1 {background-color: #398CFD; border-radius: 10px;border:1px solid #000;}

.header-headline {font-size: 0.8em;}
.quick-access li {display: inline-block; padding: 0.2em 0.5em;}
.quick-access li:hover {background-color: rgba(0,0,0,0.1);}

.disabled-radio {color: aquamarine !important;}
.toast {font-weight: bold;}
.btn-small, .btn {text-transform: uppercase;}

.collapsible-header {white-space: nowrap;}
.InfoBox {background-color: rgba(117,139,241,0.3);padding: 0.3em;text-align: justify;}

.StaturReadUL {list-style: none;}
.StaturReadUL li {margin: 0; padding: 0.2em 0.5em;}
.StaturReadUL li:hover {background-color: #bbdefb !important;}
.StaturReadUL > li:nth-child(2n+1) {background: #CCC;}

.purpose_text {padding: 1em;border-radius: 20px;}
/* 🚀 1️⃣ Modal nicht in den Hintergrund setzen */
.modal, popover {
    z-index: 1050 !important; /* Materialize nutzt standardmäßig 1000 */
}
.modal::backdrop{backdrop-filter:blur(1px) !important;z-index: 800 !important;}

/* 🚀 2️⃣ Modal-Overlay hinter das Modal setzen */
.modal-overlay {
    z-index: 1000 !important;
}

/* 🚀 3️⃣ Tooltip & Toast ÜBER das Modal setzen */
.material-tooltip, #toast-container {
    position: fixed !important;
    z-index: 11000 !important; /* Muss HÖHER sein als Modal & Overlay */
}

/* 🚀 4️⃣ Einzelne Toast-Nachricht fixen */
#toast-container div {
    position: relative!important;
    backdrop-filter: none !important; /* Kein Blur */
    filter: none !important;
/*    background: rgba(50, 50, 50, 0.95) !important;  Sicherstellen, dass der Toast sichtbar bleibt */
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.bd-filter::backdrop {backdrop-filter:none !important;}