/* 
    Created on : 23.04.2025, 11:33:56
    Author     : s.sorg
*/
#toast-zone {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    z-index: 9999;
}
/* Logo-Größe für normalen Header */
#header .logo img,
#header .logo svg {
    height: 60px; /* gewünschte Höhe */
}

/* Logo-Größe für verkleinerten Header bei Scroll */
body.header-fixed.header-animated #header.scrolled .logo img,
body.header-fixed.header-animated #header.scrolled .logo svg {
    height: 40px; /* kleinere Höhe bei Scroll */
}
#header .navbar-section {
    padding-left: 2rem;
}

/* Bugfix Loginform */
#grav-login{
    max-width: 27.5rem;
}

#grav-login > form.login-form {
    max-width: none;
}

#grav-login .rememberme {
    margin: 0;
    /*padding: 0;*/
}

/* Seitenlayout */

#body-wrapper {
    height: calc(100vh - 4.5rem);  /* reserviert für Footer */
}

#body-wrapper .container.grid-xl {
    padding-top: 0.5rem;
    height: 100%;
}


.container.grid-xl {
  max-width: 100%;
  align-content: flex-start;
}

/* Überschrift zentrieren */
.container.grid-xl h4 {
  text-align: center;
  margin-top: 0;
}


/* #####################################################

    Rotor (https://tobiasahlin.com/spinkit/)

   ##################################################### */

#initrotorwrap {
    position: absolute;
    height: 100%;
    width: 100%;
}


/* Rotor, der vor dem tabellenladen angezeigt wird */
#initrotorwrap .sk-cube-grid,
#initrotorwrap .sk-cube-text {
    position: absolute;      
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%); 
    /*width: 80%;              
    height: 10px;
    background: #ccc;
    border-radius: 5px;
    overflow: hidden;*/
    
}
#initrotorwrap .sk-cube-text {
    margin-top: 100px; /* nach Höhe des Cubes */
    color: #aaa;    /* nach Farbe des Cubes */
}



.sk-cube-grid {
  width: 80px;
  height: 80px;
  /*margin: 200px auto;*/
}

.sk-cube-grid .sk-cube {
  width: 32%;
  height: 32%;
  background-color: #e0e0e0;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}

/* #####################################################

    MAV-Popup

   ##################################################### */
#mav_popup.show {
    display:    block;
    transform: translate(-50%, -50%);
    
}
#mav_popup {
    font-size:  14px;    /* muss .tabulator entsprechen */
    position:   absolute;
    z-Index:     12010;
    display:    none;
    background: #fff;
    border:     1px solid #ccc;
    border-radius: 0.5em;
    padding:    0.7em 1em 1.8em 1em;
    box-shadow:  0.1em 0.1em 0.3em rgba(0,0,0,0.5);
}
/* Images im Text des Popuops (aus blueprint.yaml) */
#mav_popup .popupTextImg {
    height: 0.6em;
}

/* Style für den Close-Button */
/* Close-Button oben rechts */
#mav_popup #mav_popupHeaderClose {
    display: flex;
    justify-content: flex-end;
    font-size: 0.8em;
}
#mav_popup #mav_popupClose {
    display:        flex;
    align-items:    center;
    font-size:      1.6em;
    user-select:    none;
    line-height:    1em;
    text-align:     center;
    vertical-align: middle;
    color:          #00000063;            /* dezente Farbe */  
    /*background:     rgba(0, 0, 0, 0.1); /* leichter Hintergrund */  
    border-radius:  3px;             /* abgerundete Ecken */
    cursor:         pointer;
    font-weight:    bold;
    transition:     background 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
    padding:        0.1em 0.25em 0.2em 0.3em; /* text zentrieren */
    margin: -0.2em -0.3em 0 0;
}

/* Hover- und Fokus-Effekte */
#mav_popup #mav_popupClose:hover,
#mav_popup #mav_popupClose:focus {
    background: rgba(0, 0, 0, 0.05);  /* etwas stärkerer Kontrast */  
    color:      #00000088;                /* dunkleres × */  
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
#mav_popup #mav_popupClose:active {
    background: rgba(0, 0, 0, 0.05);  /* etwas stärkerer Kontrast */  
    color:      #00000088;                /* dunkleres × */  
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
}



/* verhindert die Anzeige von Tabulator-Tooltips, wärend das mav_popup geöffnet ist */
body.mav_popup_hideTabulatorTooltips div.tabulator-tooltip.tabulator-popup-container {
    display: none;
}

/* #####################################################

    MicroModal

   ##################################################### */

.modal__header .modal__close {
  /*margin-top: -0.3em;
  margin-right: -0.3em;
  font-weight: bold;
  color: #00000088;*/
}
/* Hover- und Fokus-Effekte */
.modal__header .modal__close:hover::before/*,
.modal__header .modal__close:focus::before*/{
    background: rgba(0, 0, 0, 0.05);  /* etwas stärkerer Kontrast */  
    color:      #00000088;                /* dunkleres × */  
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    
}
.modal__header .modal__close:active::before {
    background: rgba(0, 0, 0, 0.05);  /* etwas stärkerer Kontrast */  
    color:      #00000088;                /* dunkleres × */  
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.modal__header .modal__close::before{
    display:        flex;
    align-items:    center;
    user-select:    none;
    line-height:    1em;
    text-align:     center;
    vertical-align: middle;
    color:          #00000063;            /* dezente Farbe */  
   /* background:     rgba(0, 0, 0, 0.1);  leichter Hintergrund */  
    border-radius:  3px;             /* abgerundete Ecken */
    cursor:         pointer;
    font-weight:    bold;
    transition:     background 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
    padding:        0.2em 0.25em 0.2em 0.3em;
    margin:         -1.8em -1.4em 0 0;
}


.modal__header .modal__title {
  line-height: 0.8;
}

.modal__container {
  padding: 2em;
  border-radius: 6px;
}


.modal__content {
    font-size: 14px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.modal__content .mm_section {
    display: block;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.modal__container .modal__footer {
    display: flex;
    justify-content: right;
    column-gap: 0.5rem;
}


.modal__content #removeLsaLsaKomNrSpan,
.modal__content #removeLsaLsaNameSpan {
    font-weight: bold;
}


/* Dialogbreiten microModal */
#footer_datenschutz-modal .modal__container {
    max-width: 70vh;
    max-height: 90vh;
}