html                                                            { scroll-behavior:smooth; }
body                                                            { font-family: arial; font-size:0.9rem; color:#606060; overflow-x:hidden; }

h1                                                              { font-weight: normal; font-size:2.2rem; }
h2                                                              { font-size:2.0rem; font-weight:lighter; margin:0rem; margin-bottom:10px; }
h3                                                              { font-size:1.5rem; font-weight:normal; margin:0rem; margin-bottom:10px; }

.ui-link,
a                                                               { text-decoration: none; }


.blink_daysremain ,
.blink_username {
  font-weight: bold;  
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  0%    { color:black; }
  50%   { color:red; }
  100%  { color:black; }
}

h1.slogan                                                       { display:inline-block; background: rgba(60,60,60,0.5); color:#ffffff; padding:10px; margin:0px; letter-spacing:2px; }
div.slogan                                                      { position:static; margin-top:-100px; margin-bottom:45px; }
p.text1                                                         { padding-top:0.7rem; padding-bottom:0.7rem; }
div.ui-selectonemenu.ui-widget.ui-state-default
span.ui-selectonemenu-label.ui-inputfield                       { font-size: 0.75rem; }
div.contentWidth                                                { max-width:1170px !important;
                                                                  padding-left: 1.0rem;
                                                                  padding-right: 1.0rem;
                                                                  margin-left: auto; 
                                                                  margin-right: auto;
}
div.mainContent                                                 { margin-top:142px !important; }
div.news-details p                                              { margin: 0rem; }
div.mainFooter a                                                { font-family:arial; font-size:0.75rem; color:#ffffff; text-decoration: none; }
div.mainFooter div.breadcrumb span                              { padding:15px 7px 15px 7px; font-size:0.75rem; font-weight:bold; color:#ff0000;  }
div.internal-link,
div.more-link,                                                     
a.internal-link,
a.more-link                                                     {
    display: inline-block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38"><path fill="white" d="M10 4l20 12-20 12z"></path></svg>' );
    background-size: 20px;
    background-position: left 2px top 4px;
    background-repeat:no-repeat;
    padding:3px 10px 3px 25px;
    font-size:0.9rem !important;
    text-decoration: none;
    background-color: var(--red-700);
    border-radius:3px;
    color:#ffffff;
    cursor:pointer;
}
    div.mainHeader nav.ui-breadcrumb ol.ui-breadcrumb-items li                                              { font-size: 0.9rem; }
    div.mainHeader nav.ui-breadcrumb ol.ui-breadcrumb-items li a.ui-menuitem-link span.ui-menuitem-text,
    div.mainHeader nav.ui-breadcrumb ol.ui-breadcrumb-items li a.ui-menuitem-link                           { color: red !important; }
    div.mainHeader nav.ui-breadcrumb ol.ui-breadcrumb-items li span.ui-state-disabled span.ui-menuitem-text { color: black !important; }
    div.mainHeader nav.ui-breadcrumb ol.ui-breadcrumb-items li:not(.ui-breadcrumb-chevron)::before          { color: #ff0000; font-size:0.7rem; }   
    div.mainMenu span.ui-icon.ui-icon-triangle-1-e,
    div.mainMenu span.ui-icon.ui-icon-triangle-1-s                                                          { display:none !important; }
    .cookie-banner {
        position: fixed;
        bottom: 0px;
        left: 0%;
        right: 0%;
        width: 100%;
        padding: 5px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #eee;
        border-radius: 0px;
        border-top:1px solid lightgrey;
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    }
    .close {
        padding: 5px 40px 5px 40px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

div.ui-carousel button.ui-link span         { color:#ffffff; }
div.ui-carousel button.ui-link:hover span   { color:#606060; }
    
#natChangePwdModal_content                  { padding-right: 0px !important; }

#natChangePwdModal .modal-body {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 7rem);   /* Fallback */
    max-height: calc(100dvh - 7rem);  /* berücksichtigt mobile Browserleisten */
}

#natChangePwdModal .modal-body > p {
    flex: 0 0 auto;
}

#natChangePwdModal .modal-body > iframe {
    flex: 0 1 760px;
    height: 760px;
    min-height: 0;
    width: 100%;
    border: 0;
}

@media screen and (min-width:768px)                             { 
    .md\:surface-300                                            { background-color:var(--surface-300) !important }
    div#mainMenueRow                                            { background-color: var(--surface-900); }
    div.mainMenu.ui-menu.ui-menubar                             { background-color: var(--surface-900); border:0px !important; }
    div.mainMenu ul.ui-menu-child                               { width:max-content !important; }
    div.mainMenu span                                           { font-size:0.8rem; }
    div.mainMenu > ul > li > ul                                 { padding-right:10px !important; }
    div.mainMenu ul li.level1 a                                 { padding:2px 15px 3px 15px !important; border:0px !important; border-radius: 0px !important; }
    div.mainMenu > ul > li > a.level1                           { padding:2px 15px 3px 15px !important; border:0px !important; border-radius: 0px !important; color:#ffffff !important; }
    div.mainMenu > ul > li > a.level1 > span,
    div.mainMenu > ul > li.level1 > a > span                    { font-weight:bold; color:#ffffff !important; }
    div.mainMenu ul li ul li.level2 ul li a.ui-menuitem-link    { padding:2px 5px 3px 5px !important; }
    div.mainMenu > ul > li.ui-menuitem-active > a               { background-color:#337ab7 !important; color:#ffffff !important; }
    div.mainMenu ul li a.ui-menuitem-link.ui-state-hover        { background-color:#d62631 !important; color:#ffffff !important; }
    div.mainMenu ul li a.ui-menuitem-link.ui-state-active       { background-color:#337ab7 !important; } 
    div.mainMenu ul li a.ui-menuitem-link.ui-state-hover span,
    div.mainMenu ul li a.ui-menuitem-link.ui-state-active span  { color:#ffffff !important; }
}
@media (max-width:768px)                                        { 

    
    
    div.mainContent                                             { margin-top:135px !important; }    
    h1.slogan                                                   { display:inline-block; background: rgba(256,256,256,0.1); color:#606060; padding:0px; margin:0px; font-size: 1.8rem; }
    div.slogan                                                  { position:static; margin-top:15px; margin-bottom:0px; padding-bottom:0px !important; }
    div#mainMenueRow                                            {
        background-color: var(--surface-0);overflow-x:hidden;overflow-y:scroll;height: 50vh;border:0px solid gray;
        background-color:#ffffff !important; margin:10px 0px 15px 15px !important;padding:0px !important;
    }
    div#mainMenueRow div.mainMenu ul,
    div#mainMenueRow div.mainMenu ul li,
    div#mainMenueRow div.mainMenu ul li ul                      { position: unset !important; background-color: unset !important; }
    div#mainMenueRow div.mainMenu > ul                          { margin-bottom: 10px; }
    div.mainMenu                                                { background-color:#ffffff !important; border:0px; }
    div.mainMenu ul                                             {
        box-shadow:none !important;
        width: 100% !important;
    }
    div.mainMenu ul li ul,
    div.mainMenu ul li ul li ul                                 { margin-left:10px !important; padding:2px; }
    div.mainMenu ul,                                        
    div.mainMenu > ul > li                                      { display:block !important; width: 100%; }
    div.mainMenu > ul > li > a > span                           { font-weight:normal !important;  }
    div.mainMenu ul li                                          { 
        display:block !important;
        font-size:0.9rem;
        border-bottom:0px dotted gray !important;
        background-image: url('/jakarta.faces.resource/images/header/arrow-right.png.xhtml') !important;
        background-repeat: no-repeat;
        background-position-y: 4px;
        padding-left: 12px !important;
        
    }
    div.mainMenu ul li a                                        { padding:0px !important; background-color: unset !important; }
    div.mainMenu ul li a span.ui-menuitem-text                  { color:var(--surface-600) !important; text-transform: capitalize; }
    
}


/* ===== Barrierefreiheit: Links ===== */
/* Fließtext-Links: farblich abgesetzt UND unterstrichen (mind. 2 Markierungen) */
div.mainContent a:not(.more-link):not(.internal-link):not(.prev):not(.next):not(.block):not([class*="ui-button"]):not([class*="ui-menuitem"]) {
    color: var(--red-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}
div.mainContent a:not(.more-link):not(.internal-link):not(.prev):not(.next):not(.block):hover,
div.mainContent a:not(.more-link):not(.internal-link):not(.prev):not(.next):not(.block):focus { text-decoration-thickness: 2px; }
/* Externe Links / neues Fenster: zusätzliches Symbol + Hinweis für Screenreader */
div.mainContent a[target="_blank"]:not(.more-link):not(.internal-link)::after {
    content: "\00a0\2197";
    content: "\00a0\2197" / " (öffnet in neuem Fenster)";
}
/* Footer-Links: Pfeil-Symbol + Unterstreichung */
div.mainFooter div.breadcrumb a                                 { text-decoration: underline; text-underline-offset: 2px; }
div.mainFooter div.breadcrumb a:hover,
div.mainFooter div.breadcrumb a:focus                           { text-decoration-thickness: 2px; }
/* Button-Links (mehr/zurück): Farbe + Pfeil-Symbol vorhanden; deutlicher Fokus für Tastatur */
a:focus-visible,
button:focus-visible,
.more-link:focus-visible,
.internal-link:focus-visible                                    { outline: 2px solid #337ab7; outline-offset: 2px; }
a.prev, a.next                                                  { text-decoration: none; }
/* Werte-Kacheln: Rückseite auch per Tastatur erreichbar */
.rotateTiles:focus-within .flip-card .flip-card-inner           { transform: rotateY(180deg); }