/* ============================================================================ */
/* list2.css

   Beispiel implementierung:

   <!-- Kategorie-Überschrift -->
   <span class="list2-categoryTitle">Keinem Standort zugewiesen</span>

   <!-- Listen-Element -->
   <div class="list2-item" onclick="...">

     <!-- Linker Bereich: Symbol + Text -->
     <div class="list2-item-left">
       <img src="images/devices/barrier.svg" class="ItemIcon" alt="Symbol" />
       <div>
         TEXT
         ...
       </div>
     </div>

     <!-- Rechter Bereich -->
     <div class="list2-item-right">
         TEXT
         ...
     </div>

     <!-- Aktions-Icons -->
     <div class="list2-item-more">
       <span class="list2-item-moreAction red" onclick="event.stopPropagation(); ...">...</span>
       ...
       <span class="list2-item-moreAction glue" onclick="event.stopPropagation(); ...">...</span>
     </div>

   </div><!-- Ende Listen-Element -->

*/
/* ============================================================================ */


/* Überschrift bzw. Kategorie */
.list2-categoryTitle {
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
}

/* Das eigentliche Listenelement */
.list2-item {
    position: relative;
    padding: 10px;
    margin-bottom: 5px;
    border-bottom: 2px solid #08517c;
    min-height: 70px;
    background-color: #f0f0f0;
    transition: background-color 0.2s ease;
    color: black;
    font-weight: bold;

    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start; /* Inhalte oben ausrichten */
}
.list2-item::after {
    content: "";
    display: table;
    clear: both;
}

.list2-item.clickable {
    cursor:pointer;
}

.list2-item:hover {
    background-color: #1c94c4;
    color:white;
}

/* Links: Symbol + Text */
.list2-item-left {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    margin-right: 10px;
    transition: margin-left 0.3s ease; /* Sanfte Übergänge */
    margin-bottom: 0;
}
.list2-item-left:after {
    clear:both;
}

.list2-item-left > img {
    width: 80px;
    max-height: 80px;
    margin-right: 20px;
    margin-bottom: 0;
}

.list2-item-left > div {
    flex: 1 1 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    hyphens: auto;
}

/* Rechts */
.list2-item-right {
    flex: 0 0 100px;
    width: fit-content;
    margin-right: 60px; /* Rechter Abstand */
}

/* Optionsmenü rechts neben dem Listenelement */
.list2-item-more {
    position: absolute;
    background-color: #08517c;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    border-left: none;
    display: flex;
    flex-direction: row; /* Elemente von links nach rechts anordnen */
    align-items: flex-start; /* Oben ausrichten */
    transition: width 1s ease-in-out;
    cursor: pointer;
}

.list2-item-more .list2-item-moreIconOpen {
    height: 100%;
    width: 60px;
    margin-top: 20px;
    text-align: center;
    color: white;
    float: right;
}
.list2-item-more:not(.open) .list2-item-moreIconOpen {
    display: block;
}
.list2-item-more.open > .list2-item-moreIconOpen {
    display: none;
}

.list2-item-moreIconClose {
    height: 100%;
    width: 60px;
    margin-top: 32px;
    text-align: center;
    color: white;
    float:right;
}
.list2-item-more:not(.open) .list2-item-moreIconClose {
    display: none;
}
.list2-item-more.open > .list2-item-moreIconClose {
    display: block;
}

.list2-item-moreAction {
    height: 100%;
    width: 60px;
    text-align: center;
    border-right: 1px solid #08517c;
    margin: 0;
    padding-top: 28px;
    box-sizing: border-box;

    /* default color */
    background-color: #595959;
    color: white;
}
.list2-item-moreAction.red {
    background-color: #c41010;
    color:white;
}
.list2-item-moreAction:hover.red {
    background-color: #ea1414;
    color:white;
}
.list2-item-moreAction.blue {
    background-color: #0c659d;
    color:white;
}
.list2-item-moreAction:hover.blue {
    background-color: #1488d1;
    color:white;
}
.list2-item-moreAction.green {
    background-color: #4b9847;
    color:white;
}
.list2-item-moreAction:hover.green {
    background-color: #36a631;
    color:white;
}
.list2-item-moreAction.orange {
    background-color: #FFA500FF;
    color:white;
}
.list2-item-moreAction:hover.orange {
    background-color: #fbad18;
    color:white;
}
.list2-item-moreAction:after {
    clear: both;
}
.list2-item-more:not(.open) .list2-item-moreAction {
    display: none;
}
.list2-item-more.open .list2-item-moreAction {
    display: block;
}