@font-face {
    font-family: 'inter';
    src: url('../fonts/inter.woff2') format('woff2');
}

:root {

  --font-color: #4a576b;

  --highlight-color: #818cf8;
  --highlightHover-color: #6271d9;
  --highlightLight-color: #f6f6f6;

  --sidebarFont-color: #cfd1d4;
  --sidebarBackground-color: #1e293b;
  --sidebarHover-color: #4e5b6e;

}

html,body{
    font-family: 'inter', sans-serif;
    color: var(--font-color);
    font-size: 17px;
    background-color: var(--highlightLight-color);
}

body{
    overflow-y: scroll;
}

::placeholder {
  color: #a5a5a5;
  opacity: 1;
}

form{
    width:100%;
}

input:focus {
    outline: none;
}

textarea:focus {
    outline: none;
}

select:focus {
    outline: none;
}

* {
	box-sizing: border-box;
	padding:0;
	margin:0;
    line-height: 1rem;
}

a{
    text-decoration: none;
    color:inherit;
}

ul{
    list-style: none;
}

hr{
    border:0;
    height:2px;
    background: #b6b6b6;
}

small{
    font-weight: normal;
}

input,select,option,textarea,button{
    font-family: 'inter', sans-serif;
    border-radius: 0.5rem;
    border:1px solid #b6b6b6;
    background:#fff;
}

h1{
    font-size: 3rem;
    line-height: 3rem;
    font-weight: 1000;
}

.loginTypeSelector {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.loginTypeBtn {
    padding: 10px 20px;
    margin: 0 5px;
    background: #f5f5f5;
    cursor: pointer;
    border:0;
}

.loginTypeBtn.active {
    background: var(--highlight-color);
    color: white;
}

.loginOuterContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    min-height:100vh;
}

.loginContainer {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    box-shadow:10px 10px 30px 0px rgba(0,0,0,0.125);
    border-radius: 1rem 1rem 1rem 1rem;
    width:1024px;
    height:512px;
    max-width:100%;
}

.loginContainer input, .loginContainer select{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius: 0.25rem;
    padding:10px;
    background:#fff;
}

.loginContainer label{
    font-size: 0.8rem;
    line-height: 1.5rem;
    font-weight: 500;
}

.loginLeft {
    background: #fff;
    padding:2rem;
    border-radius: 1rem 0rem 0rem 1rem;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
}

.loginRight {
    position: relative;
    color: #fff;
    padding: 2rem;
    border-radius: 0rem 1rem 1rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-grow: 1;
    overflow: hidden;
}

.backgroundSlide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    transition: opacity 0.5s ease-in-out; /* Fade-Animation */
    z-index: 1;
}

.textShadowLogin {
    color: #fff;
    text-shadow:
        1px 1px 0px #000,
        -1px 1px 0px #000,
        1px -1px 0px #000,
        -1px -1px 0px #000,
        1px 0px 0px #000,
        -1px 0px 0px #000,
        0px 1px 0px #000,
        0px -1px 0px #000;
    position: relative;
    z-index: 2; /* Text über den Hintergrundbildern */
}

.loginLeft input,.loginLeft select{
    margin-bottom:0.5rem;
}

.loginRight > div{
    z-index: 1;
}

.textShadowLogin {
    color: var(--font-color);
    color:#fff;
    text-shadow:
        1px 1px 0px #000,   /* unten-rechts */
        -1px 1px 0px #000,  /* unten-links */
        1px -1px 0px #000,  /* oben-rechts */
        -1px -1px 0px #000, /* oben-links */
        1px 0px 0px #000,   /* rechts */
        -1px 0px 0px #000,  /* links */
        0px 1px 0px #000,   /* unten */
        0px -1px 0px #000;  /* oben */
}

.signUpInfo{
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom:30px;
}

.passwordForgotten{
    text-align: right;
}

.passwordForgotten a{
    font-size: 0.8rem;
    font-weight: 500;
    color:var(--highlight-color);
}

.passwordForgotten a:hover{
    text-decoration: underline;
}

.signUpInfo a{
    color:var(--highlight-color);
}

.signUpInfo a:hover{
    text-decoration: underline;
}

.loginSubmit{
    margin-top:2rem;
}

.loginSubmit button{
    background: var(--highlight-color);
    color:#fff;
    font-size: 1rem;
    font-weight: 500;
    width:100%;
    border:0;
    border-radius: 0.25rem;
    padding:10px;
    cursor: pointer;
    margin-bottom:0.5rem;
}

.loginSubmit button:hover{
    background:var(--highlightHover-color);
}

.loginCircleSVG{
    position: absolute;
    left:0;
    top:0;
}

.loginPatternSVG{
    position: absolute;
    right:0;
    top:0;
}

.loginLogo{
    text-align:center;
    padding-bottom:20px;
}


.atom-box{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:3rem;
}


.atom{
    position: relative;
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
}

.atom::before{
    content: "";
    position: absolute;
    width:0.15rem;
    height:0.15rem;
    background: #fff;
    box-shadow: inset 0 0 0.25rem #fff;
    border-radius: 50%;
    opacity: 0.5;
}

.line{
    width:100%;
    height:100%;
    position: absolute;
    opacity: 0.6;
}

.line-1{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-bottom: 10px solid #fff;
    border-top: 10px solid #fff;
    animation: line1 2s linear infinite;
    filter: drop-shadow(0 0 10px #fff);
}

@keyframes line1 {
    0%{
        transform: rotateY(70deg) rotateZ(0deg);
    }
    100%{
        transform: rotateY(70deg) rotateZ(360deg);
    }
}


.line-2{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    animation: line2 3s linear infinite;
    filter: drop-shadow(0 0 10px #fff);

}

@keyframes line2 {
    0%{
        transform: rotateX(80deg) rotateY(25deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(80deg) rotateY(25deg) rotateZ(360deg);
    }
}


.line-3{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    animation: line3 3s linear infinite;
    filter: drop-shadow(0 0 10px #fff);
}

@keyframes line3 {
    0%{
        transform: rotateX(-80deg) rotateY(25deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(-80deg) rotateY(25deg) rotateZ(360deg);
    }
}

.topbar{
    height:4rem;
    background: #556ee6;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left:2.5%;
    padding-right:2.5%;
    position: fixed;
    top:0;
    width:100%;
    z-index: 100;
}

.topbar > div{
    flex:7;
    display: flex;
    flex-direction: row;
    color: #bac4f1;
}

.topbar > div:last-child {
    flex:3;
    justify-content: flex-end;
}

.menue{
    display: flex;
    justify-content: center;
    margin-left:2rem;
}

.menue > ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.link {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    transition: background-color 0.3s ease; /* Übergang für die Hintergrundfarbe */
}

.link:hover {
    color: #fff;
}

.link > i{
    margin-right:0.5rem;
    font-size: 0.8rem;
}

.running{
    color:#fff;
}

.user{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.88rem;
}

.userName{
    color: #fff;
    font-weight: 500;
}

.userStatus, .userNr{
    color: #94a3b8;
}

.user > div{
    margin-left:3rem;
}

.userImage i, .userImage img{
    font-size:3rem!important;
    height:3rem;
}

.userImage img{
    border-radius: 100%;
}

.userDataTopbar{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.user a i{
    font-size: 1.5rem;
}

.logout{
    transition: all 0.25s ease;
}

.logout:hover{
    color:#e65555;
    transform: scale(1.2);
}



.loadingIndicator{
    padding:1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
}

.loadingIndicator .line-1, .loadingIndicator .line-2, .loadingIndicator .line-3{
    border-color: #556ee6;
}

.content{
    margin-left:2rem;
    margin-right:2rem;
    margin-top:6rem;
    margin-bottom:3rem;
    z-index: 0;
}

/*
D
a
s
h
b
o
a
r
d
*/

.header div[data-filter].selected {
    background-color: #007BFF;
    color: #fff;
}

.header input[type=checkbox]{
    height:1.5rem!important;
    width:1.5rem!important;
}

.erinnerungElement input[type=checkbox]{
    height:1.5rem!important;
    width:1.5rem!important;
}

.dashboardBox {
    display: flex;
    max-width: 100%;
}

.dashboardBox > div:first-child{
    flex: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-content: flex-start;
}

.dashboardBox > div:last-child{
    flex: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-content: flex-start;
}

.dashboardBox > div:first-child > .dashBox {
    flex: 0 0 calc(33.33% - 1rem); /* Breite mit Berücksichtigung des gap */
}

.dashboardBox > div:last-child > .dashBox {
    flex: 0 0 calc(100%); /* Breite mit Berücksichtigung des gap */
}

.dashboardBox > div:first-child > .erinnerungBox {
    width: calc(100% - 1rem);
}

.dashBox, .erinnerungBox {
    background: #fff;
    box-shadow: 0px 8px 24px rgba(27, 46, 94, 0.08);
    border-radius: 0.5rem;
    border:1px solid #dbe0e5;
}

.dashBox{
    min-width:300px;
}

.dbTitle{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #dbe0e5;
    padding: 1rem;
}

.status_1{
    background: right top no-repeat url('../images/img_status_1.svg');
}

.status_2{
    background: right top no-repeat url('../images/img_status_2.svg');
}

.status_3{
    background: right top no-repeat url('../images/img_status_3.svg');
}

.status_4{
    background: right top no-repeat url('../images/img_status_4.svg');
}

.status_5{
    background: right top no-repeat url('../images/img_status_5.svg');
}

.status_6{
    background: right top no-repeat url('../images/img_status_6.svg');
}

.dbContent{
    display: flex;
    flex-direction: column;
}

.numbers{
    padding:1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.numbers div:first-child{
    font-size: 1.4rem;
    font-weight:600;
}

.numbers div:nth-child(2) {
    font-size: 1.2rem;
    font-weight: 400;
}

.numbers span{
    display: flex;
    margin-left:1rem;
    background:#e8fdf8;
    color:#39eabe;
    font-size:0.8rem;
    font-weight:600;
    border-radius: 0.25rem;
    padding:0.25rem;
    padding-top:0.125rem;
    padding-bottom:0.125rem;
}

.smallText{
    font-size:0.8rem;
    padding:1rem;
}

.colorBar{
    margin:1rem;
    margin-top:0;
    height:0.5rem;
    background:#f6f7fc;
    border-radius: 0.25rem;
    position: relative;
}

.endDbContent{
    height:0.5rem;
}

.colorBar span{
    position: absolute;
    display: flex;
    background: linear-gradient(to right, #8a9dd5, #a288d2);
    height:100%;
    border-radius: 0.25rem;
}

.dbTitle div:first-child{
    font-weight: 700;
}

.dbTitle div:last-child{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.dbTitle div:last-child > span{
    display: flex;
    width:5px;
    height:5px;
    background:#4a576b;
    border-radius: 100%;
}



.erinnerungBox{
    display: flex;
    flex-direction: column;
}

.erinnerungBox > div{
    padding:1rem;
}

.erinnerungBox .search{
    padding: 0.5rem;
    font-size: 1rem;
    color: inherit;
    font-weight: 400;
    background: #fff;
    cursor: pointer;
}

.header{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom:1px solid #f5f6fa;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
}

.header input[type=checkbox]{
    height:1rem;
    width:1rem;
}

.header input[type=text]{
    border:1px solid #e9ecf1;
    padding-top:0.6rem;
    padding-bottom:0.6rem;
}

.header a{
    display: flex;
    justify-content: center;
    align-items: center;
    height:2.5rem;
    width:2.5rem;
    background:#f5f6fa;
    border-radius:0.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.header a:hover{
    transform: scale(1.2);
}

.header > div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.5rem;
    background:#f5f6fa;
    border-radius:0.5rem;
    padding-left:1rem;
    padding-right:1rem;
    height:2.5rem;
    transition: all 0.25s ease;
    cursor: pointer;
}

.header > div:hover{
    transform: scale(1.1);
}

.erinnerungElement{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size:0.8rem;
}

.erinnerungElement div:nth-child(1) {
    flex:1;
}

.erinnerungElement div:nth-child(2) {
    flex:2;
}

.erinnerungElement div:nth-child(3) {
    flex:3;
    font-weight:600;
}

.erinnerungElement div:nth-child(4) {
    flex:10;
}

.erinnerungElement div:nth-child(4) > div:first-child{
    font-weight:600;
}

.erinnerungElement div:nth-child(5) {
    flex:3;
    text-align: right;
    font-weight:600;
}

.erinnerungElement input[type=checkbox]{
    height:1rem;
    width:1rem;
}

.erinnerungElement img{
    border-radius: 0.5rem;
}

.erinnerungElement{
    border-bottom:1px solid #dbe0e5;
}

.erinnerungElement:last-child{
    border-bottom:0;
}

.berater{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding:1rem;
}

.berater > div:first-child > div{
    padding:0.25rem;
}

.berater > div:first-child > div:last-child{
    padding-bottom:0;
}

.berater > div:first-child > div:nth-child(1){
    font-size:0.8rem;
}

.berater > div:first-child > div:nth-child(2){
    font-size:1.4rem;
    font-weight:800;
}

.berater > div:first-child > div:nth-child(3){
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size:0.8rem;
}

.berater > div:first-child > div:nth-child(3) > i{
    font-size:1rem;
    margin-right:0.5rem;
}

.berater > div:first-child > div:nth-child(4){
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size:0.8rem;
}

.berater > div:first-child > div:nth-child(4) > i{
    font-size:1rem;
    margin-right:0.5rem;
}


.berater > div:first-child > div:nth-child(5){
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.berater > div:first-child > div:nth-child(5) > a{
    font-size:0.7rem;
    font-weight:600;
    color:#fff;
    padding:0.25rem;
    padding-left:0.5rem;
    padding-right:0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.25s ease;
    cursor: pointer;
}

.berater > div:first-child > div:nth-child(5) > a:hover{
    transform: scale(1.1);
}

.berater > div:first-child > div:nth-child(5) > a:first-child{
    margin-right:0.5rem;
    background:#55e662;
}

.berater > div:first-child > div:nth-child(5) > a:last-child{
    background:#e65555;
}

.berater > div:last-child > div{
    background: linear-gradient(to right, #8a9dd5, #a288d2);
    border-radius: 100%;
    width:150px;
    height:150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.berater > div:last-child > div > img{
    border-radius: 100%;
    width:130px;
    height:130px;
}

.dashBoxLink{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0.5rem;
    transition: all 0.25s ease;
    cursor: pointer;
    color:#595c5f;
    font-size:0.8rem;
    font-weight:600;
}

.dashBoxLink:hover{
    color:#fff;
    background: #556ee6;
}

.notice .dbTitle{
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap:0.5rem;
}

.notice .dbTitle > i{
    font-size:3rem;
}

.notice .dbContent > textarea{
    padding:1rem;
    width:100%;
    height:10rem;
    border:0;
    resize: none;
}

.notice .dbContentSave{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:1rem;
    border-top: 1px solid #dbe0e5;
}

.dbContentSave input[type="button"]{
    background:#556ee6;
    padding:1rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    border-radius: 0.25rem;
    color:#fff;
    font-size:0.8rem;
    font-weight:700;
    border:0;
    cursor:pointer;
    transition: all 0.25s ease;
}

.dbContentSave input[type="button"]:hover{
    transform: scale(1.1);
}

/*
A
N
S
P
R
E
C
V
H
P
A
R
T
N
E
R
*/

.ansprechpartnerBox{
    background: #fff;
    box-shadow: 0px 8px 24px rgba(27, 46, 94, 0.08);
    border-radius: 0.5rem;
    border:1px solid #dbe0e5;
    display: flex;
    flex-direction: column;
    width:100%;
}

.ansprechpartnerBox > div{
    border-bottom: 1px solid #dbe0e5;
    padding:1rem;
}

.ansprechpartnerBox > div:last-child{
    border-bottom: 0;
    padding:1rem;
}

.ansprechpartnerBox > div:first-child{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.ansprechpartnerBox > div:first-child > span:first-child{
    font-weight: 700;
}

.newAnsprechpartner{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.25rem;
    background: #556ee6;
    cursor: pointer;
    transition: all 0.25s ease;
}

.ansprechpartnerimport,.newFile,.newZaehler{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.25rem;
    background: #556ee6;
    cursor: pointer;
    transition: all 0.25s ease;
}


.ansprechpartnerBox > div:first-child > span:last-child:hover{
    transform: scale(1.1);
}

.ansprechpartnerBox > div:nth-child(2){
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.ansprechpartnerBox > div:nth-child(2) > div:last-child > span{
    padding:0.5rem;
    background: #f5f6fa;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.ansprechpartnerBox > div:nth-child(2) > div:last-child > span:hover{
    transform: scale(1.1);
}

.ansprechpartnerBox > div:nth-child(2) i{
    font-size:1.5rem;
}

.ansprechpartnerBox input,.ansprechpartnerBox select{
    font-size:1rem;
    padding:0.5rem;
    color:inherit;
}

.ansprechpartnerBox > div:nth-child(3){
    padding-left:0;
    padding-right:0;
}

.ansprechpartnerBox > div:nth-child(3) > table{
    width:100%;
    border-collapse: collapse;
}

.ansprechpartnerBox > div:nth-child(3) > table tr:nth-child(odd) {
    background: #f5f6fa; /* Hintergrundfarbe für ungerade Zeilen */
}

.ansprechpartnerBox > div:nth-child(3) > table tr:nth-child(odd) span {
    background: #fff; /* Hintergrundfarbe für ungerade Zeilen */
}

.ansprechpartnerBox > div:nth-child(3) > table th{
    text-align: left;
}

.ansprechpartnerBox > div:nth-child(3) > table th,.ansprechpartnerBox > div:nth-child(3) > table td{
    padding:1rem;
    vertical-align: middle;
}

.ansprechpartnerBox > div:nth-child(3) > table span{
    display: inline-block;
    padding:0.5rem;
    line-height:1.5rem;
    background: #f5f6fa;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.ansprechpartnerBox > div:nth-child(3) > table span:hover{
    transform: scale(1.1);
}

.ansprechpartnerBox > div:nth-child(3) > table i{
    font-size:1.5rem;
}

.ansprechpartnerBox input[type=checkbox]{
    height: 1rem;
    width: 1rem;
}


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

.zaehlerBox{
    background: #fff;
    border-radius: 0.5rem;
    border:1px solid #dbe0e5;
    display: flex;
    flex-direction: column;
    width:100%;
}

.zaehlerBox{
    width:100%;
}

.zaehlerBox > div{
    border-bottom: 1px solid #dbe0e5;
    padding:1rem;
}

.zaehlerBox > div:last-child{
    border-bottom: 0;
    padding:1rem;
}

.zaehlerBox > div:first-child{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.zaehlerBox > div:first-child > span:first-child{
    font-weight: 700;
}

.zaehlerBox > div:first-child > span:last-child:hover {
    transform: scale(1.1);
}

.zaehlerBox > div:nth-child(2) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.zaehlerBox > div:nth-child(2) > div:last-child > span {
    padding: 0.5rem;
    background: #f5f6fa;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.zaehlerBox > div:nth-child(2) > div:last-child > span:hover {
    transform: scale(1.1);
}

.zaehlerBox > div:nth-child(2) i {
    font-size: 1.5rem;
}

.zaehlerBox input,
.zaehlerBox select {
    font-size: 1rem;
    padding: 0.5rem;
    color: inherit;
}

.zaehlerBox > div:nth-child(3) {
    padding-left: 0;
    padding-right: 0;
}

.zaehlerBox > div:nth-child(3) > table {
    width: 100%;
    border-collapse: collapse;
}

.zaehlerBox > div:nth-child(3) > table tr:nth-child(odd) {
    background: #f5f6fa; /* Hintergrundfarbe für ungerade Zeilen */
}

.zaehlerBox > div:nth-child(3) > table tr:nth-child(odd) span {
    background: #fff; /* Hintergrundfarbe für ungerade Zeilen */
}

.zaehlerBox > div:nth-child(3) > table th {
    text-align: left;
}

.zaehlerBox > div:nth-child(3) > table th,
.zaehlerBox > div:nth-child(3) > table td {
    padding: 1rem;
    vertical-align: middle;
}

.zaehlerBox > div:nth-child(3) > table span {
    display: inline-block;
    padding: 0.5rem;
    line-height: 1.5rem;
    background: #f5f6fa;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.zaehlerBox > div:nth-child(3) > table span:hover {
    transform: scale(1.1);
}

.zaehlerBox > div:nth-child(3) > table i {
    font-size: 1.5rem;
}

.zaehlerBox input[type=checkbox] {
    height: 1rem;
    width: 1rem;
}





























































/*
L
i
e
g
e
n
s
c
h
a
f
t
*/



.liegenschaftSortierHeader-item .activeUrl{
    background: #007bff!important;
    color:#fff;
    transform: rotate(180deg);
    display: inline-block; /* Wichtig für transform */
    transition: transform 0.3s ease; /* Optional, für eine Animation */
}


.liegenschaftenHeader{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-items: flex-end;
    margin-top:2rem;
    gap: 2rem;

}

.liegenschaftenHeaderTitle{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex:3;
}

.liegenschaftenHeaderTitle span:first-child{
    font-size:2.5rem;
    line-height:2.5rem;
    color:#e6b955;
    font-weight:1000;
}

.liegenschaftenHeaderTitle span:last-child{
    font-size:1.2rem;
    line-height:1rem;
    font-weight:600;
}

.liegenschaftenHeaderButtonBox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex:6;
}

.liegenschaftenHeaderButton {
    flex: 1 1 30%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #556ee6;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.25s ease;
    color:#bac4f1;
    cursor:pointer;
    user-select: none;
}

.liegenschaftenHeaderButton:hover {
    background: #007bff;
    color: #fff;
}

.greenButton{
    background: #55e662;
    color:#fff;
}

.greenButton:hover{
    background: #007bff;
    color:#fff;
}

.liegenschaftenHeaderSearch{
    height:100%;
    flex:3;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

.liegenschaftenHeaderSearch input{
    width: 100%;
    padding:0.5rem;
    font-size: 0.8rem;
}

.liegenschaftenHeaderSearch .toggle-container {
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    flex-direction: column;
    padding-bottom:1rem;
}

.liegenschaftenHeaderSearch .toggle-label {
    margin-bottom: 10px;
}

.liegenschaftenHeaderSearch .toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.liegenschaftenHeaderSearch .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.liegenschaftenHeaderSearch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.liegenschaftenHeaderSearch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.liegenschaftenHeaderSearch input:checked + .slider {
    background-color: #4CAF50;
}

.liegenschaftenHeaderSearch input:checked + .slider:before {
    transform: translateX(26px);
}

/** LIEGENSCHAFTEN **/

.liegenschaften{
    margin-top:2rem;
}

.liegenschaft {
    position: relative;
    margin-bottom: 10px;
    opacity: 0; /* Standardmäßig unsichtbar */
    transform: translateX(-100px); /* Starten 20px nach links verschoben */
    transition: opacity 1s ease, transform 1s ease;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #dbe0e5;
    border-radius: 0.5rem;
}

.liegenschaftHeader{
    position: relative;
    margin-bottom: 10px;
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #dbe0e5;
    border-radius: 0.5rem;
}

.liegenschaftSortierHeader{
    position: relative;
    margin-bottom: 10px;
    border:1px solid transparent;
}

.liegenschaftSortierHeader-uebersicht {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0.5rem;
}

.liegenschaftSortierHeader-item{
    width: calc(100% / 8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size:1rem;
}

.liegenschaftSortierHeader-item span{
    padding: 10px;
    padding-top:5px;
    padding-bottom:5px;
    background-color: #fff;
    border: 1px solid #dbe0e5;
    border-radius: 0.5rem;
}

.klappen i {
    color:#007bff;
}

.overview-item.klappen.rotate i {
    transform: rotate(180deg);
    transition: transform 0.3s ease; /* Smooth animation */
}

.bild {
    text-align: center;
}

.bild img{
    border-radius: 0.5rem;
    width:100px;
}

.liegenschaftHeader-uebersicht {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.liegenschaftHeader-item{
    width: calc(100% / 8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:0.5rem;
    font-size:1rem;
}


.big > span{
    font-weight:700;
}

.greenPercentage{
    background: #55e662;
    padding:0.25rem;
    padding-top:0.125rem;
    padding-bottom:0.125rem;
    border-radius: 0.25rem;
    color:#fff;
    font-size:0.8rem!important;
    font-weight: 600;
}

.redPercentage{
    background: #e65555;
    padding:0.25rem;
    padding-top:0.125rem;
    padding-bottom:0.125rem;
    border-radius: 0.25rem;
    color:#fff;
    font-size:0.8rem!important;
    font-weight: 500;
}

.shadow{
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.5)!important;
}

.liegenschaft-uebersicht {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.5rem;
}

.liegenschaft-details {
    height: 0px; /* Standardmäßig verborgen */
    overflow: hidden; /* Verhindert das Anzeigen des Inhalts */
    transition: max-height 0.3s ease-out; /* Sanfte Animation */
    background-color: #fff;
}

.overview-item {
    width: calc(100% / 8); /* Jede Spalte ist gleich breit */
    padding:0.33rem;
}

.klappen{
    cursor: pointer;
}



.toggle-details {
    color: #007bff;
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.25s ease; /* Weicher Übergang */
}

.toggle-details:hover {
    color: #55e662;
}

.mirror {
    transform: rotate(180deg); /* Dreht das Element um 180 Grad */
}

.mirror:hover {
    color: #55e662;
}


.anschrift{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    font-weight:700;
}

.auslastung{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap:1.5rem;
    font-weight:500;
}

.auslastung .scaleMinus{
    font-size:1.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #e65555;
}

.auslastung .scaleMinus:hover{
    transform: scale(1.2);
}

.auslastung .scalePlus{
    font-size:1.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #55e662;
}

.auslastung .scalePlus:hover{
    transform: scale(1.2);
}

.bewohner{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-weight:700;
    gap:0.5rem;
}

.bewohner i {
    font-size:2.5rem;
}

.stromverbrauch, .gasverbrauch, .versorger, .status, .klappen{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-weight: 700;
    gap:0.5rem;
}

.stromverbrauch i{
    color:#e6b955;
    font-size:2rem;
}

.gasverbrauch i{
    color:#e65555;
    font-size:2rem;
}

.versorger i{
    font-size:2rem;
}

.klappen i{
    font-size:2rem;
}

.statusGreen{
    display: inline-block;
    width:2rem;
    height:2rem;
    border-radius: 0.5rem;
    background: #55e662;
}

.statusOrange{
    display: inline-block;
    width:2rem;
    height:2rem;
    border-radius: 0.5rem;
    background: #e6b955;
}

.statusRed{
    display: inline-block;
    width:2rem;
    height:2rem;
    border-radius: 0.5rem;
    background: #e65555;
}

.liegenschaft-details-menue {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-bottom: 1rem;
    gap:0.5rem;
}

.liegenschaft-details-menue div {
    flex: 1 1 auto; /* Flexibilität erhöhen */
    display: flex;
    justify-content: center;
    align-items: center;
}

.liegenschaft-details-menue div span {
    width: 100%; /* Span füllt die gesamte Breite des div */
    background: #a3a3a3;
    padding: 0.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
    text-align: center; /* Text zentrieren */
}

.activeMenueSpan {
    background: #3b485b !important;
}

.liegenschaft-details-menue div span:hover {
    background: var(--sidebarHover-color);
}

.liegenschaft-content{
    overflow-x: auto;
    max-height:calc(100% - 5rem);
}


.liegenschaft-content > div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.oneRow{
    display: flex; /* Fügt das Flexbox-Layout hinzu */
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top:1rem;
    margin-bottom:1rem;
}

.oneRow button{
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #fff;
    background: #55e662;
    padding:1rem;
    padding-top:0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 700;
    border:0;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.oneRow button:hover{
    transform: scale(1.2);
}

.blueBackground{
    background: #007bff!important;
}

.objekteffizienz{
    display: flex;
    gap:2rem;
    padding:1rem;
    border-bottom: 1px solid #b6b6b6;
}

.objekteffizienz div:first-child{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.objekteffizienz div:last-child{
    flex: 3;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
}

.bigObjekeffizienz{
    font-size:2rem;
    line-height:2.5rem;
    font-weight:800;
    text-align: center;
}

.greenObjekeffizienz{
    display: flex;
    background: #55e662;
    height:2rem;
    width:100%;
    border-radius: 0.5rem;
}

.redObjekeffizienz{
    display: flex;
    background: #e65555;
    height:2rem;
    width:100%;
    border-radius: 0.5rem;
}

.orangeObjekeffizienz{
    display: flex;
    background: #e6b955;
    height:2rem;
    width:100%;
    border-radius: 0.5rem;
}

.twoRow{
    display: flex; /* Fügt das Flexbox-Layout hinzu */
    width: 100%;
    justify-content: center;
    align-items: flex-start;
}

.twoRow > div {
    flex: 1 1 calc(100% / 2); /* Verteilt die 3 Elemente gleichmäßig */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:2rem;
    padding-top:0;
    padding-bottom:0;
}

.threeRow {
    display: flex; /* Fügt das Flexbox-Layout hinzu */
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    margin-top:1rem;
}

.threeRow > div {
    flex: 1 1 calc(100% / 3); /* Verteilt die 3 Elemente gleichmäßig */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:2rem;
    padding-top:0;
    padding-bottom:0;
}

.fourRow {
    display: flex; /* Fügt das Flexbox-Layout hinzu */
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    margin-top:1rem;
}

.fourRow > div {
    flex: 1 1 calc(100% / 4); /* Verteilt die 3 Elemente gleichmäßig */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:2rem;
    padding-top:0;
    padding-bottom:0;
}

.fiveRow {
    display: flex; /* Fügt das Flexbox-Layout hinzu */
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    margin-top:1rem;
}

.fiveRow > div {
    flex: 1 1 calc(100% / 5); /* Verteilt die 3 Elemente gleichmäßig */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:2rem;
    padding-top:0;
    padding-bottom:0;
}

.sixRow {
    display: flex; /* Fügt das Flexbox-Layout hinzu */
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    margin-top:1rem;
}

.sixRow > div {
    flex: 1 1 calc(100% / 6); /* Verteilt die 3 Elemente gleichmäßig */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:2rem;
    padding-top:0;
    padding-bottom:0;
}

.sixRow label,.fiveRow label,.fourRow label, .threeRow label, .twoRow label{
    margin-bottom:0.25rem;
    font-weight: 500;
}

.sixRow input, .fiveRow input, .fourRow input, .threeRow input, .twoRow input,
.sixRow select, .fiveRow select, .fourRow select, .threeRow select, .twoRow select,
.sixRow textarea, .fiveRow textarea, .fourRow textarea, .threeRow textarea, .twoRow textarea {
    padding: 1rem;
    font-size: 1rem;
    color: inherit;
    font-weight: 400;
    margin-bottom: 1rem;
    background: #fff;
    width: 100%;
    resize: vertical;
    cursor: pointer;
}

.threeRow.special > div:first-child {
    flex: 1 1 30%; /* Erstes Div nimmt 1/3 */
}

.threeRow.special > div:nth-child(2) {
    flex: 2 2 60%; /* Zweites Div nimmt 2/3 */
}

.verbrauchsmanagementDatum {
    width: 100%;
    display: flex;
    justify-content: center;
    margin:1rem;
}

.verbrauchsmanagementDatum span{
    margin-right:0.5rem;
    margin-left:0.5rem;
    padding:1rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    font-size:0.8rem;
    font-weight: 600;
    color:#fff;
    border-radius: 0.5rem;
}

.verbrauchsmanagementDatum span:nth-child(1){
    background:#4a576b;
}

.verbrauchsmanagementDatum span:nth-child(2){
    background:#5d708c;
}

.verbrauchsmanagementDatum span:nth-child(3){
    background:#7189ae;
}

.verbrauchsmanagementButton {
    width: 100%;
    display: flex;
    justify-content: center;
}

.allStatistics{
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-left: 2rem;
    margin-right: 2rem;
}

.allStatistics > div:first-child{
    flex: 2;
    display: flex;
    flex-direction: column;
}

.allStatistics > div:last-child{
    flex: 8;
}

.outerDiv{
    height:93.5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.outerDiv > span{
    font-weight: 500;
}
.outerDivTitle{
    font-weight: 500;
    margin-bottom:0.5rem;
}

.ordnen{
    display: flex;
    flex-direction: row;
    gap:0.5rem;
}

.ordnen > div{
    text-align: left;
    display: flex;
    flex-direction: column;
}

.ordnen > div > label{
    font-size:0.8rem;
}

.ordnen input {
    padding: 0.25rem;
    font-size: 0.8rem;
    color: inherit;
    font-weight: 400;
    background: #fff;
    width: 100%;
    margin:0.25rem;
}


.verbrauchsmanagementStatisticElement{
    flex: 1; /* 2 Teile von 3 */
    display: flex;
    padding:0.5rem;
}

.verbrauchsmanagementInput {
    flex: 1; /* 1 Teil von 3 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
}

.verbrauchsmanagementInput{
    font-size:0.8rem;
    font-weight:600;
}

.verbrauchsmanagementInput input{
    padding: 1rem;
    font-size: 1rem;
    color: inherit;
    font-weight: 400;
    background: #fff;
    width: 100%;
}

.verbrauchsmanagementInput span:first-child{
    font-size:1.5rem;
    font-weight:800;
    line-height:2rem;
}
.verbrauchsmanagementInput span:last-child{
    font-size:1.5rem;
    font-weight:600;
    line-height:2rem;
}

.verbrauchsmanagementPercent {
    padding:1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width:100px;
}

.verbrauchsmanagementPercent .arrow{
    font-size: 1.5rem;
}

.verbrauchsmanagementPercent .int{
    font-size: 0.8rem;
    font-weight:600;
}

.up{
    color:#55e662;
}

.down{
    color:#e65555;
}

.bars {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.bars > div{
    padding:1rem;
    padding-top:0.25rem;
    padding-bottom:0.25rem;
    display: flex;
    justify-content: flex-end;
    font-size:0.8rem;
    font-weight: 600;
    color:#fff;
    border-radius: 0.5rem;
}

.bars div {
    min-width:100px;
}

.bars div:nth-child(1){
    background:#4a576b;
}

.bars div:nth-child(2){
    background:#5d708c;
}

.bars div:nth-child(3){
    background:#7189ae;
}

.g{
    background: #55e662!important;
}

.termine{
    display: block;
    background: #556ee6;
    border-radius: 0.25rem;
    margin-bottom:0.25rem;
    color:#fff;
    padding:0.5rem;
}

.oldTermine{
    display: block;
    background: #e6b955;
    border-radius: 0.25rem;
    margin-bottom:0.25rem;
    color:#fff;
    padding:0.5rem;
}

.calendarSettings{
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.calendarSettings > div{
    margin:1rem;
    margin-top:0;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
    background: #3b485b;
}

.calendarSettings > div:nth-child(1):hover {
    transform: scale(1.2);
}

.calendarSettings > div:nth-child(3):hover {
    transform: scale(1.2);
}

.addErinnerung:hover{
    transform: scale(1.2);
}

.calendar-wrapper{
    width:100%;
}

.calendar{
    width:100%;
}

.calendar table{
    width:100%;
    border-collapse: separate;
    border-spacing: 0.25rem;
}

.calendar th{
    background:#a3a3a3;
    border-radius: 0.25rem;
    padding:0.5rem;
    color:#fff;
    width:14.28%;
}

.calendar td{
    background:#f4f4f4;
    border-radius: 0.25rem;
    padding:0.5rem;
    height:5rem;
    width:14.28%;
    vertical-align: top;
    font-size: 0.8rem;
    font-weight:600;
}

.kal_vormonat_tag{
    background: none!important;
}

.kal_aktueller_tag{
    background: #a3a3a3!important;
    color:#fff!important;
}

.erinnerung{
    margin-top:1rem;
    font-size:1rem;
    font-weight: 600;
}

.erinnerung > li{
    margin:0.5rem;
    margin-left:0;
    margin-right:0;
}

.erinnerung > li > i{
    margin-right:0.5rem;
}

.liegen,.erinnerungen,.ansprechpartner,.eigentuemerversammlungen,.email,.file,.einheit,.mieter,.editFile,.poolAnsprechpartner,.kontoeinstellungen,.zaehler{
    display: none;
}

.poolAnsprechpartner{
    background:none!important;
}

.poolAnsprechpartner > div{
    width: 1100px!important;
    box-shadow: none!important;

}

.no-background {
    background: none !important; /* Entfernt den Hintergrund */
}

.tableWrapper{
    padding-left:1rem;
    padding-right:1rem;
}

.tableWrapper table{
    width:100%;
    border-collapse: collapse;
}

.tableBody tr th{
    text-align: left;
}

.tableBody th,.tableBody td,{
    padding:0.5rem;
}

.tableWrapper table tr:nth-child(2n+1) {
  background: #f5f6fa;
}

.tableWrapper table th,.tableWrapper table td{
    text-align: left;
    padding:0.5rem;
}

.eigentuemerversammlungen > div{
    width: 1000px!important;
}

.closePopUp{
    position: absolute;
    right:0.5rem;
    top:0.5rem;
    font-size:2rem;
    color:#e65555;
    transition: all 0.5s ease;
    cursor: pointer;
}

.closePopUp:hover{
    transform: scale(1.2);
}

.popUp {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    overflow: auto; /* Ermöglicht das Scrollen */
    padding: 1rem; /* Abstand an den Rändern */
}

.popUp > div {
    position: relative;
    background: #fff;
    border-radius: 0.5rem;
    width: 900px;
    font-size: 0.8rem;
    box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.1), 0 0 0.5rem 0 rgba(0, 0, 0, 1);
    max-height: 90vh; /* Maximalhöhe auf 90% der Viewport-Höhe begrenzen */
    overflow-y: auto; /* Scrollen nur innerhalb des divs zulassen */
}

.popUp .twoRow > div{
    padding:1rem;
}

.popUp .twoRow > div:first-child{
    padding-right:0.5rem;
}

.popUp .twoRow > div:last-child{
    padding-left:0.5rem;
}

.popUp input,.popUp select,.popUp textarea{
    font-size: 1rem;
    padding: 0.5rem;
    background:#f4f4f4;
    border:0;
}


.popUp button{
    font-size:1rem;
}

.popUp .big{
    font-weight:1000;
    font-size: 1rem!important;
}

.popUp .oneRow .big{
    font-weight:1000;
    font-size: 1rem!important;
}

.big{
    font-size: 1rem;
}

.email > div{
    width: 900px;
}

.blueHeader{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #d4effe;
    border-radius: 0.5rem 0.5rem 0 0;
    padding:1rem;
}

.blueHeader i{
    font-size: 5rem;
    color: #007bff;
    position: relative;
}

.blueHeader .scalePlus{
    margin:0;
    padding:0;
    font-size:2rem;
    position: absolute;
    bottom:-0.5rem;
    right:-0.5rem;
    color:#55e662;
    background:#fff;
    line-height: 1.7rem;
    border-radius: 0.25rem;
    transition: all 0.25s ease;
    cursor: pointer;
}

.blueHeader .scalePlus:hover{
    transform:scale(1.2);
}

.blueHeader span{
    font-size:1rem;
    font-weight:700;
}

.blueHeader select{
    background: #fff;
}

.blueHeader option{
    background: #fff;
}

.blueHeader > div{
    display: flex;
    flex-direction: column;
    gap:0.5rem;
}

.leftSide{
    text-align: right;
    margin-right:0.5rem;
    background:#f4f4f4;
    border-radius: 0 0.5rem 0.5rem 0;
}

.leftSide input{
    background:#dedede;
}

.rightSide{
    margin-left:0.5rem;
    background: #dedede;
    border-radius: 0.5rem 0 0 0.5rem;
}

.rightSide input{
    background:#f4f4f4;
}


.loader {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 4px solid #f3f3f3; /* heller Rand */
    border-top: 4px solid #3498db; /* blauer Rand */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.success-message {
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 10px;
    color: #007bff;
    font-size: 1rem;
    text-align: center;
    font-weight:600;

}

.eigentuemerversammlung{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:0.5rem;
}

.eigentuemerversammlung .anstehend{
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    user-select: none;
    background: #556ee6;
}

.eigentuemerversammlung .abgelaufen{
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    user-select: none;
    background: #e6b955;
    margin-top:1.5rem;
}

.terminElement {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background: #f4f4f4;
    width: 100%;
    padding:0.5rem;
    gap:0.5rem;
    border-radius: 0.25rem;
}

.terminElement > div{
    min-width:1rem;
    min-height:2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0.25rem;
}

.terminElement > div:nth-child(1){
    flex:5;
    background: #556ee6;
}

.ab > div:nth-child(1){
    background: #e6b955!important;
}

.terminElement > div:nth-child(2){
    flex:20;
    font-size:0.8rem;
    font-weight:500;
}

.terminElement > div:nth-child(3){
    flex:66;
    font-size:0.8rem;
}

.terminElement > div:nth-child(4){
    background: #e6b955;
    color:#fff;
    width:35px;
}

.terminElement > div:nth-child(5){
    background: #e65555;
    color:#fff;
    width:35px;
}

.terminElement > div:nth-child(4),
.terminElement > div:nth-child(5){
    justify-content: center;
    transition: 0.25s all ease;
    cursor: pointer;
}

.terminElement > div:nth-child(4):hover,
.terminElement > div:nth-child(5):hover{
    transform:scale(1.2);
}

.blueHeaderSettings{
    display: flex;
    flex-direction: row;
    gap:1rem;
    border-radius:0;
}

.blueHeaderSettings div{
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
}

.blueHeaderSettings span{
    font-size:0.8rem;
    font-weight:500;
}

.blueHeaderSettings input{
    background:#fff;
}

.blueHeaderSettingsVersammlung{
    display: flex;
    flex-direction: row;
    gap:1rem;
    border-radius:0;
}

.blueHeaderSettingsVersammlung div{
    display: flex;
    flex-direction: column;
    flex: 1 1 33%;
}

.blueHeaderSettingsVersammlung span{
    font-size:0.8rem;
    font-weight:500;
}

.blueHeaderSettingsVersammlung input{
    background:#fff;
    border-radius: 0.25rem;
}



.versammlungLeftRight{
    display: flex;
    flex-direction: row;
    gap:0.5rem;
    padding:1rem;
}

.versammlungLeftRight > div:first-child{
    display: flex;
    flex-direction: column;
    gap:0.5rem;
    width:67%;
}
.versammlungLeftRight > div:last-child{
    width:33%;
    display: flex;
    flex-direction: column;
    gap:1rem;
}

.versammlungLeftRight > div:first-child > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:0.5rem;
}

.versammlungLeftRight > div:last-child > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:0.5rem;
}

.versammlungLeftRight > div:first-child > div > div:last-child {
    flex: 1; /* Container kann den maximalen Platz einnehmen */
    display: flex;
    width: 100%; /* Sorgt dafür, dass der Container den Platz ausfüllt */
}

.versammlungLeftRight > div:last-child > div > div:last-child {
    flex: 1; /* Container kann den maximalen Platz einnehmen */
    display: flex;
    width: 100%; /* Sorgt dafür, dass der Container den Platz ausfüllt */
    flex-direction: column;
}

.versammlungLeftRight > div:last-child > div > div:last-child > span{
    color:#9f9f9f;
    font-weight:700;
}

.versammlungLeftRight > div:last-child > div > div:last-child > div{
    color:#9f9f9f;
    font-size:0.7rem;
}

.versammlungLeftRight > div:first-child > div > div:last-child > input{
    width:100%;
    border-radius: 0.125rem;
    border: 1px solid #cccccc;
}

.versammlungLeftRight > div:last-child > div > div:last-child > input{
    width:100%;
    border-radius: 0.125rem;
    border: 1px solid #cccccc;
}

.versammlungLeftRight .summer{
    width:100%;
}

.versammlungLeftRight > div:first-child > div > div:first-child > span{
    display: flex;
    justify-content: center;
    align-items: center;
    width:26px;
    height:26px;
    background:#fff;
    border-radius: 0.125rem;
    border: 1px solid #cccccc;
    font-weight:700;
    color:#9f9f9f;
}

.versammlungLeftRight > div:last-child > div > div:first-child > span{
    display: flex;
    justify-content: center;
    align-items: center;
    width:26px;
    height:26px;
    background:#fff;
    border-radius: 0.125rem;
    border: 1px solid #cccccc;
    font-weight:700;
    color:#9f9f9f;
}

#eigentuemerContainer{
    display: flex;
    flex-direction: column;
}

.ansprechpartnerItems,
.ansprechpartnerGlobalItems {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht den Umbruch in die nächste Zeile */
    justify-content: flex-start;
    gap: 0.5rem; /* Abstand zwischen den Items */
}

.ansprechpartnerItem {
    display: flex;
    align-items: center; /* Vertikale Ausrichtung der Checkbox und des Labels */
    flex: 1 1 calc(50% - 0.25rem); /* Flexibles Layout: 50% minus halbe Gap-Größe */
    max-width: calc(50% - 0.25rem); /* Verhindert, dass Items breiter als 50% werden */
    background: #55e662;
    padding: 0.25rem 0.5rem; /* Verkürzte Schreibweise für Padding */
    border-radius: 0.25rem;
    box-sizing: border-box; /* Sorgt dafür, dass Padding und Border in die Breite einfließen */
    color:#fff;
}


.ansprechpartnerItem input{
    margin-right:0.5rem;
    width:1rem;
    height:1rem;
}

.ansprechpartnerTrenner{
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    background:#cccccc;
}



#addAnswerModal {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow:0 0 0 10000px rgba(0,0,0,0.5), 0 0 0 0.5rem rgba(255, 255, 255, 0.1), 0 0 0.5rem 0 rgba(0, 0, 0, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:1rem;
    width:300px!important;
}

#addAnswerModal span{
    font-size:1rem;
    font-weight:600;
}

.hidden {
    display: none!important;
}

#answerContainer{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    flex:1;
}

.answer-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 calc(50% - 0.25rem);
    background: #556ee6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    box-sizing: border-box;
    color:#fff;
    font-weight:bold;
    font-size:1rem;
}

.delete-answer-button {
    background: transparent;
    border: none;
    color: white;
    background: #e65555;
    font-size: 1rem;
    font-weight:1000;
    padding:0.5rem;
    cursor: pointer;
    margin-left: auto; /* sorgt dafür, dass der Button rechts außen steht */
}

.poolAnsprechpartnerAround{
    display: block!important;
    line-height: 2.5rem;
}

#addAnswerButton{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border:0;
    background: #556ee6;
    cursor: pointer;
    transition: all 0.25s ease;
}

#addAnswerButton:hover{
    transform: scale(1.1);
}

#ansprechpartnerContainer{
    padding-left:1rem;
    padding-right:1rem;
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}

.noticeCreated {
    display: flex; /* Flexbox für das Layout */
    flex-wrap: wrap; /* Erlaubt das Umbrechen von Notizen, wenn der Platz nicht ausreicht */
    gap: 20px; /* Abstand zwischen den Notizen */
    width:100%;

}

.noticeCreated .note-entry {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); /* Leichter Schatten für den 3D-Effekt */
    position: relative;
    display: inline-block;
    width: calc(50% - 10px); /* Notiz soll die halbe Breite des Containers einnehmen, minus ein kleiner Abstand */
    box-sizing: border-box; /* Sorgt dafür, dass Padding und Border zur Gesamtbreite zählen */
    font-size:0.8rem;
    position: relative;
}

.noticeCreated .note-date {
    background: linear-gradient(to bottom, #a288d2, #8a9dd5); /* Papier-Verlauf für realistischen Effekt */
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #dbe0e5;
    border-radius: 0.25rem 0.25rem 0rem 0rem;
    color:#fff;
    padding:0.5rem;
}

.noticeCreated .note-content {
    padding:0.5rem;
    background:#fff;
    border-radius: 0rem 0rem 0.25rem 0.25rem;
}

.note-content{
    padding-bottom:1.5rem!important;
}

.delete-note{
    position: absolute;
    bottom:0.25rem;
    right:0.25rem;
    color:#e65555;
    font-size: 1rem;
    border-radius:100%!important;
    display: flex;
    justify-content: center;
    align-items: center;
    border:0!important;
    cursor: pointer;
    transition: all 0.5s ease;
}

.delete-note:hover{
    transform: scale(1.2);
}

.hinterlegt{
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    background: #d4effe;
}

.hinterlegt > div > input{
    background:#fff;
    border: 1px solid #b6b6b6;
}

.hinterlegt > div > select{
    background:#fff;
    border: 1px solid #b6b6b6;
}

#showListButton{
    background:#007bff!important;
}

.selectPersonButton{
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #fff;
  background: #55e662;
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 700;
  border: 0;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

#addAnswerConfirmButton{
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #fff;
    background: #55e662;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 700;
    border: 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.addEinheit,.addMieter{
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #fff;
    background: #55e662;
    padding: 1rem;
    font-weight: 700;
    border: 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
}

.einheit fieldset{
    padding-left:1rem;
    margin:1rem;
}

.mieter fieldset{
    padding-left:1rem;
    margin:1rem;
}

.twoRow input[type=checkbox]{
    width:1rem;
}

.hidden-ansprechpartner-list,.hidden-wohnungsnummer-list{
    margin-bottom:1rem;
}

.hidden-ansprechpartner-list .ansprechpartner-item, .hidden-wohnungsnummer-list .wohnungsnummer-item{
    padding: 5px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-weight:500;
}
.hidden-ansprechpartner-list .ansprechpartner-item:hover, .hidden-wohnungsnummer-list .wohnungsnummer-item:hover {
    background-color: #f0f0f0;
}

.einheitenTabelle,.mieterTabelle {
    display: flex;
    flex-direction: column;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
}

.einheitenTabelleHeader, .mieterTabelleHeader, .row {
    display: flex;
    width: 100%;
}

.row {
    background: #dcdcdc;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.cell {
    display: flex;
    flex: 1 1 0; /* Stellt sicher, dass alle Zellen gleich breit sind */
    text-align: center;
    padding: 1rem;
    box-sizing: border-box; /* Verhindert, dass Padding die Zellbreite beeinflusst */
    justify-content: center;
    align-items: center;
    font-weight:700;
}

.einheitenTabelleHeader .cell{
    font-weight:400;
}

.mieterTabelleHeader .cell{
    font-weight:400;
}

.editEinheit,.viewEinheit,.editMieter,.viewMieter{
    background:#e6b955;
    padding:0.5rem;
    border-radius: 0.25rem;
    margin-right:0.25rem;
    transition: all 0.5s ease;
    cursor: pointer;
}

.editEinheit:hover,.viewEinheit:hover,.editMieter:hover,.viewMieter:hover{
    transform: scale(1.1);
}

.editEinheit i,.viewEinheit i,.editMieter i,.viewMieter i{
    font-size: 1.5rem;
}

.readonly-mode button[type="submit"] {
    display: none;
}














.newHeaderAnsprech{
    background: url("../images/ansprechpartnerHeader.png");
    height:200px;
}


.newHeader{
    padding:1rem;
    background:#d4effe;
}

.blueHeaderTitle{
    font-size: 1.2rem;
    font-weight:700;
}

.blueHeaderAnsprech{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.blueHeaderAnsprech > div{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding:1rem;
    gap:1rem;
}

.poolAnsprechButton, .poolAnsprechButtonOpacity{
    cursor: pointer;
    transition: all 0.25s ease;
    color: #fff;
    background: #55e662;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 700;
    border: 0;
    border-radius: 0.25rem;
    text-align: center;
}

.poolAnsprechButtonOpacity{
    opacity: 0.8;
    background:#999;
}

.poolAnsprechpartner input[type=checkbox]{
    width:20px;
    height:20px;
}

.ansprechpartnerFilterButtons {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    border-bottom: 2px solid #f4f4f4;
}

.ansprechpartnerFilterButtons > div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:1rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}

.poolAnsprechOption{
    cursor: pointer;
    transition: all 0.25s ease;
    color: #fff;
    background: #55e662;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 700;
    border: 0;
    border-radius: 0.25rem;
    text-align: center;
    width:100%;
    margin-top:0.5rem;
    margin-bottom:0.5rem;
}

.inactive{
    background: #999!important;
}

.poolAnsprechpartnerSearch{
    width:66%;
}

.headerKonto{
    background: url("../images/headerKonto.png");
    height:200px;
}

.yearFields{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap:1rem;
    margin-bottom:2rem;
    padding:1rem;
}

.yearField input{
    color:inherit;
}

.zaehlerHeader{
    width:100%;
    height:200px;
    background: url("../images/zaehlerHeader.png");
}

.anmeldungButton{
    border-radius: 0.5rem;
    background: #55e662;
    border:0;
    color:#fff;
    font-weight:bold;
    padding:1rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}

.anmeldungButton{
    cursor: pointer;
}

.anmeldungButton:hover{
    transform: scale(1.1);
}

.abmeldungButton{
    border-radius: 0.5rem;
    background: #e65555;
    border:0;
    color:#fff;
    font-weight:bold;
    padding:1rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}

.abmeldungButton{
    cursor: pointer;
}

.abmeldungButton:hover{
    transform: scale(1.1);
}

.spannung{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap:1rem;
}

.spannung{
    font-size: 0.75rem!important;
}



.addLiegenschaftToAnsprechpartner {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: #556ee6;
  cursor: pointer;
  transition: all 0.25s ease;
}

.addLiegenschaftToAnsprechpartner:hover {
    transform: scale(1.1);
}

.ansprechpartnerTable{
    width:100%;
    border-collapse: collapse;
}

.ansprechpartnerTable tr:nth-child(2n+1) {
  background: #f5f6fa;
}

.ansprechpartnerTable th{
    text-align: left;
}

.ansprechpartnerTable td,.ansprechpartnerTable th{
    padding:0.5rem;
}

.poolAnsprechpartnerOpenPopup{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.25rem;
    background: #556ee6;
    cursor: pointer;
    transition: all 0.25s ease;
}

.poolAnsprechpartnerOpenPopup:hover{
    transform: scale(1.1);
}

.einheitenContainer{
    width:100%;
}


.mieterContainer{
    width:100%;
}


/****************************************************************************************************/


/* Container, der Navigation und Content nebeneinander anordnet */
.page-container {
  display: flex;
  align-items: flex-start; /* Flex-Items orientieren sich an ihrem eigenen Inhalt */
  gap:2rem;
  margin: 0;
  padding: 0;
}

/* Navigation (linke Spalte) */
.navigation {
  flex: 2; /* nimmt 2/8 des verfügbaren Platzes ein */
  background-color: #fff;
  box-shadow: 0px 8px 24px rgba(27, 46, 94, 0.08);
  border-radius: 0.25rem;
  border: 1px solid #dbe0e5;
}

/* Hauptinhalt (rechte Spalte) */
.main-content {
  flex: 6; /* nimmt 6/8 des verfügbaren Platzes ein */
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0px 8px 24px rgba(27, 46, 94, 0.08);
  border-radius: 0.25rem;
  border: 1px solid #dbe0e5;
}

/* =============
   Navigation-Inhalt
   ============= */
.header-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding:1rem;
}

.support-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size:0.8rem;
  background:#f4f6f9;
  padding:1rem;
}
.support-section a {
  text-decoration: none;
  font-weight: 500;
  color: #007bff; /* ggf. anpassen */
}

.menu-header {
  font-weight: bold;
  padding:1rem;
}

.menu-item {
  padding:1rem;
  border: 1px solid #dbe0e5;
  border-top: none; /* An vorheriges Element anschließen */
  cursor: pointer;
}
.menu-item:hover {
  background-color: #f1f1f1;
}
.menu-item.active {
  background-color: #e2e2e2;
}


/* =============
Inhaltspaneele
============= */
.content-section {
    display: none; /* Standardmäßig ausgeblendet */
}
.content-section.active {
     display: block; /* Nur das aktive Panel wird angezeigt */
}

/* =============
Tabelle
============= */

.case-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0rem 1rem;
}

.vMiddle{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap:1rem;
}

.case-table td,.case-table th{
    vertical-align: middle;
    padding:0.5rem;
}

.case-table th{;
    text-align:left;
}

.status-indicator{
    background: #f2aa5b;
    display:inline-block;
    width:40px;
    height:40px;
    border-radius: 0.25rem;
}

.status-indicator.green {
  background-color: #55e662; /* Angenommen */
}

.status-indicator.red {
  background-color: #e65555; /* Abgelehnt */
}

/* Standard: Jede Zelle bekommt oben und unten einen Rahmen */
.case-table tbody td,
.case-table tbody th {
  border-top: 5px solid #f4f3f9;
  border-bottom: 5px solid #f4f3f9;
  /* Kein linker oder rechter Rahmen */
  border-left: none;
  border-right: none;
}

/* Erstes TD/TH: zusätzlich links */
.case-table tbody tr td:first-child,
.case-table tbody tr th:first-child {
  border-left: 5px solid #f4f3f9;
}

/* Letztes TD/TH: zusätzlich rechts */
.case-table tbody tr td:last-child,
.case-table tbody tr th:last-child {
  border-right: 5px solid #f4f3f9;
}

/** VERSICHERUNG CHAT **/

  /* Gemeinsame Popup-Stile */
  .modal, #popup-chat {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }

  /* Flex-Zentrierung nur für #popup-chat */
  #popup-chat {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-overlay, #popup-chat .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
  }

  .modal-content, #popup-chat .modal-content {
    position: relative;
    background: none;
    border-radius: 8px;
    overflow-y: auto;
    max-height: 90vh;
    z-index: 1001;
  }

  /* Spezifische Anpassungen für #popup-modal */
  .modal-content {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0;
    border-radius: 10px;
  }

  /* Spezifische Anpassungen für #popup-chat */
  #popup-chat .modal-content {
    width: 1200px;
    height: 90vh;
  }

  /* Container für #popup-modal */
  .containerModal {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    overflow: hidden;
  }

  /* Container für #popup-chat */
  .chat-container {
    display: flex;
    background: #fff;
    border-radius: 8px;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  /* Header für beide Popups */
  .headerModal, .chat-header {
    background: #3c5a99;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .headerModal {
    border-bottom: 1px solid #e9ecef;
  }

  .header-titleModal {
    font-size: 20px;
    font-weight: 600;
  }

  .chat-header h2 {
    margin: 0;
    font-size: 18px;
  }

  .header-actions, .chat-header i {
    display: flex;
    gap: 10px;
  }

  .header-actions i, .chat-header i {
    font-size: 20px;
    cursor: pointer;
    color: white;
  }

  /* Inhalte */
  .contentModal {
    padding: 20px;
  }

  .chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Statische Daten unter dem Header */
  /* Statische Daten unter dem Header */
  .case-info {
    padding: 15px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    display: flex; /* Flexbox für horizontale Anordnung */
    flex-wrap: wrap; /* Umbruch erlauben, falls nicht genug Platz ist */
    gap: 20px; /* Abstand zwischen den Items */
    justify-content: space-between; /* Gleichmäßige Verteilung */
  }

  .case-info-item {
    font-size: 14px;
    display: flex;
    flex-direction: column; /* Titel und Wert untereinander */
    flex: 1; /* Jedes Item nimmt gleichen Platz ein */
    min-width: 120px; /* Mindestbreite, damit es nicht zu schmal wird */
  }

  .case-info-title {
    color: #555;
    font-size: 14px;
    margin-bottom: 5px;
  }

  .case-info-value {
    font-size: 14px;
    color: #2c3e50;
  }

  /* Entferne die alte span-Definition, da sie nicht mehr benötigt wird */

  .chat-body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  .message-list {
    width: 280px;
    background: #f5f5f5;
    padding: 20px;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .sidebar-btn {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: #e6e6e6;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.2s;
  }

  .sidebar-btn:hover {
    background: #ddd;
  }

  .sidebar-btn.active {
    background: #3c5a99;
    color: #fff;
  }

  .chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
  }

  .message {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
  }

  .message-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
  }

  .message-body p {
    margin: 0 0 10px;
  }

  .message-body ul {
    margin: 0 0 10px 20px;
  }

  /* Formular-Stile für #popup-modal */
  .form-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .form-group label {
    font-size: 14px;
    color: #2c3e50;
    font-weight: 500;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .form-group textarea {
    height: 80px;
    resize: vertical;
  }

  .expandable {
    display: none;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
    gap: 15px;
    flex-direction: column;
  }

  .expandable.active {
    display: flex;
  }


  #message-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    min-height: 50px;
    font-size: 14px;
  }

  .chat-btn, .submit-btn {
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
  }

  .chat-btn {
    background: #3c5a99;
  }

  .chat-btn:hover {
    background: #2c3e60;
  }

  .submit-btn {
    background: #2ecc71;
    padding: 12px 25px;
    font-size: 16px;
    width: 180px;
    margin-top: 10px;
    transition: all 0.3s ease;
  }

  .submit-btn:hover {
    background: #27ae60;
  }

  /* Media Query für #popup-modal */
  @media (max-width: 600px) {
    .headerModal {
      flex-direction: column;
      text-align: center;
      gap: 10px;
    }
    .header-actions {
      margin-top: 10px;
    }
    .submit-btn {
      width: 100%;
    }
  }

  .file-attachments {
  margin-top: 10px;
}

.file-attachments a {
  color: #007bff;
  text-decoration: none;
}

.file-attachments a:hover {
  text-decoration: underline;
}

.file-attachments i {
  margin-right: 5px;
}

.uploadFileElement {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.uploadFileElement span {
  margin-right: 10px;
}

.uploadFileElement button {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
}

.chat-footer {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  height:250px;
  background:#f5f5f5;
  border-top: 1px solid #ddd;
  padding:1rem;
}

.chat-footer #message-input{
    height:100%;
}


.chat-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
}

.green{
    background:#55e662;
}

.red{
    background:#e65555;
}

.chat-btn:hover {
  background-color: #0056b3;
}

#file-list {
    display: flex;
    flex-direction: column;
    gap:0.5rem;
    background:#f5f5f5;
    padding:1rem;
}

#file-list div {
    color:#007bff;
    padding-top:0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#file-list div:first-child {
    padding-top:1rem;
}

#file-list div:last-child {
    padding-bottom:1rem;
}

.buttonCollect{
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.btn-bearbeiten, .btn-chat, .archive {
    border: 0;
    transition: transform 0.2s ease;
}

.btn-bearbeiten:hover, .btn-chat:hover, .archive:hover {
    cursor: pointer;
    transform: scale(1.2);
}

.btn-bearbeiten i, .btn-chat i, .archive i{
    font-size: 1.5rem;
}

.btn-bearbeiten i {
    color:#888;
}

.btn-chat i {
    color:#888;
}

.archive i {
    color:#888;
}

.btn-bearbeiten i:hover, .btn-chat i:hover ,.archive i:hover{
    color:#007bff;
}

.dashboard-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
}

.chart-container {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-container h3 {
  margin: 0 0 10px;
  font-size: 1.2em;
  color: #333;
  text-align: center;
}

canvas {
  max-width: 100%;
}



#new-insurance-button,.new-case-button{
    background: #51af9d;
    border:0;
    padding:1rem;
    color:#fff;
    font-weight:bold;
}

#new-insurance-button:hover,
.new-case-button:hover {
    transform: scale(1.1);
    cursor: pointer;
}





















































































































































































/**/