/* main page Colors */

/* background page*/
body {background-color: #2c3034; padding-top: 6rem;}

details, h1,h3,h4,h5,h6,a {color: whitesmoke;}
h2 {color: #a6cbff;}
p, li, ul {color: #bfbfc0;}

/* Message styling is now handled by Bootstrap alerts with custom animation */
.message-alert {
    max-width: 600px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Preserve original message colors for text inside alerts */
.alert-success {
    color: #4ffe0f !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-color: #4ffe0f !important;
}

.alert-danger {
    color: #fe0f0f !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-color: #fe0f0f !important;
}

.alert-warning {
    color: #fed60f !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-color: #fed60f !important;
}

/* Button close color for alerts */
.alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.color-success {color: #4ffe0f !important;}

/*wird in forms genutzt um einen file link weiss darzustellen*/
.custom-link a {
        color: white !important;
    }


a:hover {color: #79acfc;}
a {
    color: white; /* Ändern Sie die Farbe der Links auf Weiß */
    text-decoration: none; /* Entfernen Sie die Unterstreichung der Links */
}

.full-width-card-group {
  width: 100%;
    margin-left: -10px;
}

.custom-small-btn {
    font-size: 14px;
    padding: 1px 4px;
}


.custom-small-text-size {
    font-size: 12px; /* Passe die Größe nach Bedarf an */
}
.custom-large-text {
    font-size: 3rem; /* Passe die Schriftgröße nach Bedarf an */
}

.lh-1 {
  line-height: 1.3 !important;
}

  .is-invalid, .invalid-feedback {
        color: red;
    }
  .invalid-feedback strong {
        color: red !important;
    }

/* fonts */
body {font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif}
h1  {font-size: 2.2em; /* 40px/16=2.5em */}
h2 {font-size: 1.6em; /* 30px/16=1.875em */}
p, li, a {font-size: 0.94em; /* 14px/16=0.875em */}

li::marker {
    font-size: 1.2rem; /* Passe die gewünschte Größe hier an */
}

.logo {height: 70px; width: auto}
.startimage {height: 250px; padding-bottom: 15px;}
.forms {background-color: #bbbaba; padding: 1.5rem;border-radius: 25px;}
.title-box {padding: 3rem 0 0 0;}
.crossed-out {
    text-decoration: line-through;
}
.normaltext {
    text-decoration: none;
}

.username-spacing {
    padding-right: 10px;
}

.task-info-switch {
    margin-top: 30px;
}

.active-link {
        color: #d7ff02;
        /* Weitere gewünschte Stile für den hervorgehobenen Button */
}

/*!**/
/*  Breitere Container: Vergrößert die maximale Breite von .container*/
/*  (und Varianten) gegenüber den Bootstrap-Defaults, um unschöne*/
/*  Zeilenumbrüche/Überlagerungen zu reduzieren.*/
/*  Diese Overrides werden nach Bootstrap geladen und greifen global.*/
/**!*/

/*!* ≥576px (sm) *!*/
/*@media (min-width: 576px) {*/
/*  .container, .container-sm {*/
/*    max-width: 640px; !* vorher 540px *!*/
/*  }*/
/*}*/

/*!* ≥768px (md) *!*/
/*@media (min-width: 768px) {*/
/*  .container, .container-md {*/
/*    max-width: 860px; !* vorher 720px *!*/
/*  }*/
/*}*/

/*!* ≥992px (lg) *!*/
/*@media (min-width: 992px) {*/
/*  .container, .container-lg {*/
/*    max-width: 1120px; !* vorher 960px *!*/
/*  }*/
/*}*/

/*!* ≥1200px (xl) *!*/
/*@media (min-width: 1200px) {*/
/*  .container, .container-xl {*/
/*    max-width: 1480px; !* vorher 1140px *!*/
/*  }*/
/*}*/

/*!* ≥1400px (xxl) *!*/
/*@media (min-width: 1400px) {*/
/*  .container, .container-xxl {*/
/*    max-width: 1760px; !* vorher 1320px *!*/
/*  }*/
/*}*/

/* Fixed helper: button below the fixed top navbar, left aligned */
.sticky-below-navbar-left {
    position: fixed;
    top: 9rem; /* moved slightly further below the navbar */
    left: 3rem;
    z-index: 1050; /* above content, below modal (Bootstrap modals are 1055+) */
}

@media (max-width: 576px) {
    .sticky-below-navbar-left { left: 0.75rem; top: 7rem; }
}

.project-title-sticky {
    position: sticky;
    top: 6rem;
    z-index: 1020;
    background-color: #2c3034;
    padding-bottom: 1.5rem;
}

.textcolor-blue {
    color: #a6cbff;
}



/* navbar */
.navbar-dark {font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif}
.navbar-dark {
    background-color: #212529 !important;
    border-bottom: 1px solid #888;
}
.navbar-dark a:hover {
    color: #ffffff;
}
.dropdown-item:hover {
    color:#0f86fe !important;
    font-weight: bolder !important;
    background-color: #e0e0e0 !important;
}

/*.ckeditor-content p, li, u, ul, strong, style, ol {*/
/*    color: black !Important;*/
/*}*/


/*form */
label {
  color: white;
}
input[type="text"] {
  padding: 6px;
}
select {
  padding: 2px;
}
/*use by helptext*/
.form-text {
      color: #ebc427 !important;
         font-size: 12px;
    }

/* bootstrap table */
.table{
  font-size: 0.85em;
}

/* unvisited links */
table a:link, .inline-supervisor-boards-featurefilm a:link, .inline-supervisor-boards-tvmovie a:link, .inline-supervisor-boards-tvserie a:link {
    color: white;
    text-decoration:none;
}
/* visited links */
table a:visited {
    color: whitesmoke;
    text-decoration:none;
}
/* visited links */
table a:hover, .inline-supervisor-boards {
    color: #79acfc;
}

table a {font-size: 1em; /* 14px/16=0.875em */
        font-weight: normal;}

.nowrap {
  white-space: nowrap;
}

table td.major  {
  background-color: #3ea154 !important;
}



/* carousel carouselExampleFade*/
.carousel .carousel-item {
  height: 270px;
}

.carousel {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid #888;
}

.carousel-item img {
    position: absolute;
    top: -200px;
    left: 0;
    min-height: 500px;
}
.slider-image {
    width: 100vw;
    height: 70vh;
    background-position: 0 -420px;
}




@media (max-width: 768px) {
  .carousel .carousel-item {
    height: 230px
  }

  .slider-image {

        background-position: center 230px;
        background-size: contain;

  }
}




/* change log <div> auf home.html*/
.changelog-table{
    width: 80%;
    /*max-width: 1200px;*/
    /*table-layout: fixed;*/
}

.changelog-table th,
.changelog-table td {
    padding: 4px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #ccc;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.changelog-table th:nth-child(1),
.changelog-table td:nth-child(1) {
  width: 20%;
}

.changelog-table th:nth-child(2),
.changelog-table td:nth-child(2) {
  width: 65%;
}

.changelog-table th:nth-child(3),
.changelog-table td:nth-child(3) {
  width: 15%;
}

.table-fit {
  width: 1%;
  white-space: nowrap;
}













.card {
    border: 1px solid #555555;
    overflow: hidden;
}



.card-text {
    font-size: 16px;
}

/* CSS für den Karten-Titel */
.card-title {
    color: #ffc107; /* Gewünschte Farbe für den Titel, hier als Beispiel Magenta */
}


/* textbox used in restoration project_detail_page Cards*/
.widebox {
    background-color: #212529 !important;/* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #555555 !important;/* keine Rahmenlinie */
    width: 850px; /* volle Breite */
    /*height: 180px; !* Höhe der Textbox *!*/
    padding: 5px; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    /*margin-top: 5px;*/
    margin-bottom: 5px;
    margin-right: 5px;
}


.table-separator {
    background: #2c3034 !IMPORTANT;
}

.summary_id {
    font-size: 0.8em;
    font-weight: bold;
}

.isolated_days {
    padding: 10px;
    margin-left: 30px;
    color: whitesmoke;
    font-size: 0.8em;
    background: #212529;
    list-style-type: none;
}

#sectionDeliveries table th {
    background: #212529;
    color: #ffc107;
    font-weight: lighter ;
}

#sectionDeliveries table td{
    color: #e6e6e6;
    font-weight: lighter ;

}


/*.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {*/
/*    background-color: #ffc107 !IMPORTANT;*/
/*    color: #79acfc !IMPORTANT;*/
/*}*/


/* textbox used in DailiesDetail Kino, Movie, Serie*/
.textbox {
    background-color: #212529 !important;/* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important;/* keine Rahmenlinie */
    width: 320px; /* volle Breite */
    height: 180px; /* Höhe der Textbox */
    padding: 5px; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.textbox_many_text {
    background-color: #212529 !important;/* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important;/* keine Rahmenlinie */
    /*width: 528px; !* volle Breite *!*/
    /*height: 480px; !* Höhe der Textbox *!*/
    padding-top: 10px;
    font-size: 14px; /* Schriftgröße */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}



.textbox-warning {
    background-color: #212529 !important;/* dunkle Hintergrundfarbe */
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #e70d0d !important;/* keine Rahmenlinie */
    width: 320px; /* volle Breite */
    height: 180px; /* Höhe der Textbox */
    padding: 5px; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}


/* wird für die Musterboxen verwendet*/
.textbox-height {
    background-color: #212529 !important;/* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important;/* keine Rahmenlinie */
    width: 350px; /* Standardbreite */
    max-width: 100%; /* Responsiv: nicht breiter als Container */
    height: 580px; /* Höhe der Textbox */
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
    font-size: 16px; /* Schriftgröße */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}

/* wird für die Musterboxen verwendet*/
.textbox-camera {
    background-color: #212529 !important;/* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important;/* keine Rahmenlinie */
    width: 100%; /* volle Container-Breite */
    max-width: 1600px; /* Maximalbreite */
    /*height: 305px; !* Höhe der Textbox *!*/
    height: auto;
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
    font-size: 16px; /* Schriftgröße */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}


/* textbox used in Supervisor List*/
.textbox-supervisor-boards-list {
    background-color: #2c3034 !important;/* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 0;/* keine Rahmenlinie */
    width: 320px; /* volle Breite */
    height: 370px; /* Höhe der Textbox */
    padding: 0; /* Innenabstand */
    margin: 0;
    font-size: 16px; /* Schriftgröße */

}

.card-title {
    padding-top: 0;
    margin-top: 0;
    line-height: 0.5;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
    text-decoration: none;
}

.card-title a {
    text-decoration: none!important;
}
a.card-title {
    text-decoration: none;
}

/* textbox used in Supervisor Board*/
.textbox-supervisor-boards {
    background-color: #212529 !important;/* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important;/* keine Rahmenlinie */
    width: 250px; /* volle Breite */
    height: 800px; /* Höhe der Textbox */
    padding: 0; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    overflow: auto;
}

/* Zwei gestapelte Dropzones (verloren / wird nicht realisiert),
   teilen sich gemeinsam die Höhe einer normalen Spalte. */
.dnd-dropzone-stack {
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 800px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    gap: 5px;
}

.dnd-dropzone-stack .textbox-supervisor-boards.dnd-dropzone-half {
    width: 100%;
    height: auto;
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
}

/* Dropzone-Optik: leicht transparentes Rot + großes zentrales Symbol */
.textbox-supervisor-boards.dnd-dropzone-only {
    background-color: rgba(220, 53, 69, 0.25) !important;
    border: 1px dashed rgba(220, 53, 69, 0.8) !important;
    position: relative;
}

.textbox-supervisor-boards.dnd-dropzone-only .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.textbox-supervisor-boards.dnd-dropzone-only .card-title {
    text-align: center;
    width: 100%;
}

.dnd-dropzone-icon {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
}

/* Hover-/Drag-over-Hervorhebung, falls gesetzt */
.textbox-supervisor-boards.dnd-dropzone-only.drag-over,
.textbox-supervisor-boards.dnd-dropzone-only:hover {
    background-color: rgba(220, 53, 69, 0.4) !important;
}

/* "gewonnen" – grüne Dropzone für Wechsel auf "in Vorbereitung" */
.textbox-supervisor-boards.dnd-dropzone-only.dnd-dropzone-win {
    background-color: rgba(25, 135, 84, 0.25) !important;
    border: 1px dashed rgba(25, 135, 84, 0.85) !important;
}
.textbox-supervisor-boards.dnd-dropzone-only.dnd-dropzone-win.drag-over,
.textbox-supervisor-boards.dnd-dropzone-only.dnd-dropzone-win:hover {
    background-color: rgba(25, 135, 84, 0.45) !important;
}

/* Konfetti-Regen: Vollbild-Overlay mit fallenden Partikeln */
.dnd-confetti-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2000;
}
.dnd-confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 14px;
    opacity: 0.9;
    border-radius: 2px;
    animation-name: dnd-confetti-fall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes dnd-confetti-fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0.9;
    }
}

/* Gewitter-Overlay: seitenfüllende Wolken, Regen und Blitze (bei "verloren") */
.dnd-thunderstorm-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2000;
    background: linear-gradient(to bottom,
        rgba(20, 25, 35, 0.55) 0%,
        rgba(30, 35, 45, 0.35) 60%,
        rgba(30, 35, 45, 0.15) 100%);
    animation: dnd-thunder-fadeout 6s ease-in forwards;
}
@keyframes dnd-thunder-fadeout {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
}
.dnd-thunderstorm-cloud {
    position: absolute;
    width: 340px;
    height: 120px;
    background: radial-gradient(ellipse at 30% 50%,
        rgba(60, 65, 75, 0.95) 0%,
        rgba(60, 65, 75, 0.75) 45%,
        rgba(60, 65, 75, 0) 70%),
                radial-gradient(ellipse at 70% 60%,
        rgba(40, 45, 55, 0.95) 0%,
        rgba(40, 45, 55, 0.7) 50%,
        rgba(40, 45, 55, 0) 75%);
    filter: blur(6px);
    animation-name: dnd-thunder-cloud-drift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes dnd-thunder-cloud-drift {
    0%   { transform: translateX(-10vw); }
    100% { transform: translateX(30vw); }
}
.dnd-thunderstorm-raindrop {
    position: absolute;
    top: -20px;
    width: 2px;
    height: 14px;
    background: linear-gradient(to bottom,
        rgba(174, 194, 224, 0.0),
        rgba(174, 194, 224, 0.85));
    animation-name: dnd-thunder-rain;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes dnd-thunder-rain {
    0%   { transform: translateY(-10vh); }
    100% { transform: translateY(110vh); }
}
.dnd-thunderstorm-flash {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0);
    animation: dnd-thunder-flash 6s linear forwards;
}
@keyframes dnd-thunder-flash {
    0%, 14%, 16%, 29%, 31%, 54%, 56%, 79%, 81%, 100% {
        background-color: rgba(255, 255, 255, 0);
    }
    15%, 30%, 55%, 80% {
        background-color: rgba(255, 255, 255, 0.85);
    }
}


.object-supervisor-boards {
   padding: 3px; /* Innenabstand */
   margin-top: 0; /* Außenabstand */
   margin-left: 5px;

}

.inline-supervisor-boards-featurefilm {

    background-color: #175892 !important; /* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important; /* keine Rahmenlinie */
    /* width: 320px; /* volle Breite */
    /* height: 180px; /* Höhe der Textbox */
    padding: 0; /* Innenabstand */
    margin-top: 3px; /* Außenabstand */
    font-size: 16px; /* Schriftgröße */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.inline-supervisor-boards-featurefilm a:hover {
    color: #a4beff;
}



.inline-supervisor-boards-tvmovie {

    background-color: #3f5465 !important; /* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important; /* keine Rahmenlinie */
    /* width: 320px; /* volle Breite */
    /* height: 180px; /* Höhe der Textbox */
    padding: 0; /* Innenabstand */
    margin-top: 3px; /* Außenabstand */
    font-size: 16px; /* Schriftgröße */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.inline-supervisor-boards-tvmovie a:link {
    text-decoration: none!important;
}

.inline-supervisor-boards-tvmovie a:hover {
    color: #fce461;
}



.inline-supervisor-boards-tvserie {

    background-color: #204614 !important; /* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important; /* keine Rahmenlinie */
    /* width: 320px; /* volle Breite */
    /* height: 180px; /* Höhe der Textbox */
    padding: 0; /* Innenabstand */
    margin-top: 3px; /* Außenabstand */
    font-size: 16px; /* Schriftgröße */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.inline-supervisor-boards-tvserie a:link {
    text-decoration: none!important;
}
.inline-supervisor-boards-tvserie a:hover {
    color: #fce461;
}

.inline-supervisor-boards-restoration {

    background-color: #6b6740 !important; /* dunkle Hintergrundfarbe #62118d */
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important; /* keine Rahmenlinie */
    /* width: 320px; /* volle Breite */
    /* height: 180px; /* Höhe der Textbox */
    padding: 0; /* Innenabstand */
    margin-top: 3px; /* Außenabstand */
    font-size: 16px; /* Schriftgröße */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.inline-supervisor-boards-restoration a:link {
    text-decoration: none!important;
}
.inline-supervisor-boards-restoration a:hover {
    color: #fce461;
}




.inline-supervisor-boards-specialproject {

    background-color: #1f1f1f !important; /* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #832525 !important; /* helle Textfarbe */
    border: 1px solid #888 !important; /* keine Rahmenlinie */
    /* width: 320px; /* volle Breite */
    /* height: 180px; /* Höhe der Textbox */
    padding: 0; /* Innenabstand */
    margin-top: 3px; /* Außenabstand */
    font-size: 16px; /* Schriftgröße */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.inline-supervisor-boards-specialproject a:link {

    text-decoration: none!important;
}
.inline-supervisor-boards-specialproject a:hover {
    color: #a4beff;
}




.inline-supervisor-boards-without-dailies {

    background-color: #878787 !important; /* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #ffffff; /* helle Textfarbe */
    border: 1px solid #888 !important; /* keine Rahmenlinie */
    /* width: 320px; /* volle Breite */
    /* height: 180px; /* Höhe der Textbox */
    padding: 0; /* Innenabstand */
    margin-top: 3px; /* Außenabstand */
    font-size: 16px; /* Schriftgröße */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}
.inline-supervisor-boards-without-dailies a:link {
    text-decoration: none!important;
}
.inline-supervisor-boards-without-dailies a:hover {
    color: #fce461;

}




.card_legend_warnings {

    background-color: #fff3cd !important; /* dunkle Hintergrundfarbe #212529 #021b33*/
    color: #2d2d2d; /* helle Textfarbe */
    border: 1px solid #888 !important; /* keine Rahmenlinie */
    /* width: 320px; /* volle Breite */
    /* height: 180px; /* Höhe der Textbox */
    padding: 0; /* Innenabstand */
    margin-top: 3px; /* Außenabstand */
    font-size: 16px; /* Schriftgröße */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}





/*  ?? */
.carousel-inner {
    background-color: darkgray;
    }

.carousel-item {
    color: white;
    }


/* Testserver id */
#testserver-heading {
  color: #fff200; /* ändern Sie diese Farbe nach Bedarf */
}
#testserver-heading::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #ff0000;
  animation: blink 1s ease-in-out infinite;
}

.badge-blink {
  display: inline-block;
  animation: blink 1.5s ease-in-out infinite;
  /* Badge-Schrift auf Größe der umgebenden Tabellenzelle anheben,
     damit das Datum im roten Badge genauso groß wirkt wie andere Daten. */
  font-size: 1em;
  padding: 0.25em 0.5em;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



.modal-content {
  --bs-modal-color: white; /* Weiße Schriftfarbe */
  --bs-modal-bg: #343a40; /* Dunkle Hintergrundfarbe */
  --bs-modal-border-color: rgba(255, 255, 255, 0.125); /* Farbe des Modalrahmens */

}

.modal-header,
.modal-footer {
  --bs-modal-header-bg: #212529; /* Dunkle Hintergrundfarbe für Header und Footer */
}

.modal-body {
    text-align: left !important; /* Links ausrichten */
    overflow-wrap: break-word;
  --bs-modal-body-bg: #343a40; /* Dunkle Hintergrundfarbe für den Body */

}



label {
    color: white;
    font-size: 0.85em;
    vertical-align: middle;
}
input, select {
    /*min-width: 1.5em;*/
    /*min-height: 0.85em;*/
    vertical-align: middle;
    font-family: inherit;
    font-size: 0.85em !important;
}

.logininput input {
    background-color: dimgrey;
    color: white; /* Setzt die Textfarbe auf Weiß */
    font-weight: bold; /* Macht den Text dicker */
}

.logininput input:focus {
    background-color: dimgrey;
    color: white; /* Behält die weiße Textfarbe bei, auch wenn das Element den Fokus hat */
}

textarea {
     font-family: inherit;
     font-size: 0.85em !important;
}


/* dropzone */
.dz {
    background-color: whitesmoke !important;
    border: dashed !important;
    border-color: #ccc !important;
    border-radius: 20px !important;
}
.dz:hover {
    background-color: grey !important;
}

.custom-link a{
    color: #232323 !important;
}
.custom-link a:hover{
    color: cornflowerblue !important;
}

.text-bright-blue { color: #79acfc !important; }


/* Compact table rows for order status panel (halve spacing vs .table-sm) */
.table-compact-rows > :not(caption) > * > * {
    padding-top: 0.15rem; /* default .table-sm is ~0.3rem */
    padding-bottom: 0.15rem;
}
.table-compact-rows {
    line-height: 1.1; /* tighten text line-height slightly */
}

/* Hervorhebung aktiver Filter in der Filter-Box (Eingangsrechnungsliste etc.)
   Greift sofort (CSS-only), sobald der User etwas eingibt oder auswählt —
   nicht erst nach dem Absenden des Formulars.
   - Textfelder: erkannt über :not(:placeholder-shown) (Platzhalter "-" ist gesetzt).
   - Dropdowns: erkannt über :has(option:checked:not([value=""])) (modernes CSS).
   - .filter-active bleibt als server-seitiger Fallback nach Reload.
*/
#filter-form input.form-control:not(:placeholder-shown),
#filter-form select.form-control:has(option:checked:not([value=""])) {
    background-color: #fff8e1;          /* dezentes Gelb */
    border-color: #f0ad4e;              /* Bootstrap "warning"-Ton */
    box-shadow: 0 0 0 0.15rem rgba(240, 173, 78, 0.25);
    color: #000;                        /* schwarze Schrift auf gelbem Hintergrund */
    font-weight: 700;                   /* fette Schrift bei aktivem Filter */
}


/* Auch Optionen im geöffneten Dropdown dunkel darstellen, wenn das Select aktiv ist */
.filter-active option,
#filter-form select.form-control:has(option:checked:not([value=""])) option {
    color: #000;
    background-color: #fff;
}