body {
	background-color: var(--third-color)!important;
    overflow: hidden;
}

footer, header {
    display: none!important;
}


.projectNotFound {
    text-align: center;
    color: var(--third-color) !important;
    font-weight: 600;
    font-size: 16px;
}

.projectNotFound h2 {
    color: var(--third-color);
    font-weight: 900;
    font-size: 40px;
}

.projectNotFound a {
    color: var(--secondary-color);
    font-size: 20px;
    font-weight: 600;
    background-color: var(--primary-color);
    padding: 5px 10px;
    border-radius: 10px;
    line-height: 60px;
}


/* Desktop (Standard) */
html {
    font-size: 16px!important; /* 1rem = 16px */
}

/* Tablet */
@media (max-width: 768px) {
    html {
        font-size: 14px!important; /* 1rem = 14px */
    }
}

/* Smartphone */
@media (max-width: 480px) {
    html {
        font-size: 12px!important; /* 1rem = 12px */
    }
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 1.3rem;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}




.header-container {
    background-color: var(--secondary-color)!important;
}

.et_pb_menu_0_tb_header.et_pb_menu ul li a{
	color: var(--primary-color)!important;
}



/*loading page*/

.userEmptyNote {
    margin-left: 5%;
	margin-right: 5%;
	width: 90%;
}

.userEmptyNoteInner {
    max-width: 500px;
    min-width: 300px;
    margin: 100px auto;
    padding: 40px;
    border: 2px solid var(--secondary-color);
    border-radius: 20px;
    color: var(--secondary-color);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    background-color: var(--primary-color);
}


.userEmptyNote button {
    margin: 40px auto 0px auto;
}

/* call div */

div#callDisplay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}


.call-info {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

div#openCallOrganization {
    border: 2px solid var(--secondary-color);
    padding: 5px 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    line-height: 20px;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
}


/* Hebe das Element hervor, indem der z-index erhöht wird */
.highlighted {
    position: relative; /* Stellt sicher, dass das z-index funktioniert */
    z-index: 10001!important; /* Höher als der Tooltip */
	pointer-events: none;
}



/* Overlay, wenn es die Klasse 'loading' hat */
/* Vollbild-Overlay */
.loadingOverlay.loading {
    opacity: 1;
}

/* Overlay ohne die 'loading'-Klasse, macht es unsichtbar */
.loadingOverlay {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--third-color);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
	/*height: 0px;*/
	transition: opacity 1s ease;
	 z-index: 9999;
}

/* Container für Spinner und Logo */
.spinnerOverlay-container {
    position: relative;
    width: 200px; /* Größe des Containers anpassen */
    height: 200px;
    text-align: center;
}

/* Stil für das Logo (SVG) */
.logoOverlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    background-image: var(--logo-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Stil für den Spinner */
.spinnerOverlay {
    box-sizing: border-box; /* Berücksichtigt die Rahmenbreite in der Größe */
    width: 100%; /* Passt die Breite an den Container an */
    height: 100%; /* Passt die Höhe an den Container an */
    border: 10px solid var(--secondary-color); /* Heller Rand */
    border-top: 10px solid var(--primary-color); /* Blauer Rand für den Spinner */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.spinnerOverlay-container{
	opacity: 0;
}

/* Spinner-Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.buttonStyling {
	 padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	cursor: Pointer;
	transition: 1s;
	display: flex;
    align-items: center;
    justify-content: center;
	border: 2px solid var(--secondary-color);
}


/* ProjectSettings Overlay und Container */
.projectSettingsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.projectSettingsOverlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.projectSettingsPopupContainer {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 0;
    height: 0;
    background: rgb(0 9 18 / 80%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.projectSettingsPopupContainer.active {
    width: 90vw;
    height: 90vh;
    top: 5vh;
    right: 5vw;
    padding: 20px;
    opacity: 1;
    pointer-events: all;
}

/* Close Button */
.projectSettingsCloseBtn, .closeButton {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #fffafabd;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 1002;
}

.projectSettingsCloseBtn:hover, .closeButton:hover {
    color: #ff4d4d;
    transform: rotate(90deg);
}

/* Tab Container und Navigation */
.projectSettingsTabContainer {
    display: flex;
    height: 100%;
}

.projectSettingsTabContainer h2, .projectSettingsTabContainer h3, .projectSettingsTabContainer h4{
    color: var(--header-color-light);
}

.projectSettingsTabNav {
    width: 220px;
    padding: 20px 0;
    border-right: 1px solid #e0e0e0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px 0 0 8px;
}

.projectSettingsTabBtn {
    display: block;
    width: 100%;
    padding: 15px 25px;
    border: none;
    background: none;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: var(--header-color-light);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.projectSettingsTabBtn:hover {
    border-bottom-color: rgba(76, 175, 80, 0.5);
    color: #4CAF50;
}

.projectSettingsTabBtn.active {
    border-bottom-color: #4CAF50;
    color: #4CAF50;
    box-shadow: none;
}

/* Tab Content Area */
.projectSettingsTabContent {
    flex: 1;
    padding: 30px 40px;
    overflow-y: auto;
    border-radius: 0 12px 12px 0;
    position: relative;
}

.projectSettingsTabPane {
    opacity: 0;
    transform: translateX(20px);
    position: absolute;
    width: calc(100% - 80px);
    transition: all 0.3s ease-in-out;
    top: 0px;
    display: none;
}

.projectSettingsTabPane.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
    display: block;
}

.projectSettingsTabPane h2{
    color: var(--header-color-light);
}




















/* Form Container und Sections */
.projectSettingsFormContainer {
    max-width: 100%;
    margin: 0 auto;
}

.projectSettingsFormSection {
    position: relative;
    margin-bottom: 40px;
}

/* Typography */
h2 {
    font-size: 1.8em;
    margin: 0 0 20px 0;
    color: #333;
    font-weight: 600;
}

h3 {
    font-size: 1.3em;
    margin: 30px 0 15px;
    color: #4CAF50;
    font-weight: 500;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
}

/* Form Elements */
.projectSettingsInput,
.projectSettingsSelect {
    width: 100%;
    height: 48px;
    padding: 12px 16px!important;
    margin-bottom: 25px!important;
    border: none!important;
    border-bottom: 2px solid #ccc!important;
    background: transparent!important;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.3s ease;
    padding-bottom: 0px !important;
}

.projectSettingsInput:focus,
.projectSettingsSelect:focus {
    border-color: #4CAF50;
    outline: none;
}

.projectSettingsSelect {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23555" stroke-width="2" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.projectSettingsSelectSmall {
    width: 200px !important;
}

/* Upload Elements */
.projectSettingsUpload {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    margin-bottom: 25px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.projectSettingsUpload:hover {
    border-color: #4CAF50;
    background: #f0f5f0;
}

.projectSettingsUploadContainer {
    flex: 1;
    margin-bottom: 20px;
}

.projectSettingsUploadContainer label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: 14px;
}

.projectSettingsUploadPreview {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.projectSettingsUploadPreview img {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.projectSettingsUploadPreview span {
    font-size: 14px;
    color: #666;
    padding: 5px 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

/* Layout Elements */
.projectSettingsFormGrid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.projectSettingsFormColumn {
    flex: 1;
    min-width: 280px;
}

.projectSettingsFormRow {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.projectSettingsFormGroup {
    flex: 1;
}

.projectSettingsFormGroup label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: 14px;
}

.projectSettingsFullWidth {
    width: 100%;
    margin-top: 25px;
}

.projectSettingsSuggestions {
    position: absolute;
    background: white;
    width: 100%;
    max-height: 200px;
    overflow-y: scroll !important;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 9999;
}

.projectSettingsSuggestions li {
    background: white;
    padding: 10px 15px;
    margin: 0;
    list-style: none !important;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.projectSettingsSuggestions li:hover {
    background-color: #f5f5f5;
}

.projectSettingsSuggestions li:last-child {
    border-bottom: none;
}

/* Selbst wenn ein anderes Styling die Liste beeinflusst,
   dies wird es überschreiben */
.projectSettingsSuggestions[id^="projectSettingsSuggestions"] li {
    list-style: none !important;
    display: block !important;
    width: 100% !important;
}

/* Hidden Elements */
input[type="hidden"] {
    display: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .projectSettingsFormRow {
        gap: 15px;
    }

    .projectSettingsTabNav {
        width: 180px;
    }
}

@media (max-width: 768px) {
    .projectSettingsTabContainer {
        flex-direction: column;
    }

    .projectSettingsTabNav {
        width: 100%;
        padding: 10px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
    }

    .projectSettingsTabBtn {
        padding: 10px 15px;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .projectSettingsTabBtn.active {
        border-left: none;
        border-bottom-color: #4CAF50;
    }

    .projectSettingsFormRow {
        flex-direction: column;
        gap: 0;
    }

    .projectSettingsSelectSmall {
        width: 100% !important;
    }

    .projectSettingsPopupContainer.active {
        width: 95vw;
        height: 95vh;
        top: 2.5vh;
        right: 2.5vw;
        padding: 15px;
    }

    .projectSettingsTabContent {
        padding: 20px 15px;
    }

    .projectSettingsSuggestions {
        width: calc(100% - 30px);
    }
}








/* Bildvorschau */
.current-logo img {
    display: block;
    margin: 0 auto 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Platzhaltertext */
::placeholder {
    color: #aaa;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 600px) {
    #organizationSettingsForm {
        padding: 15px;
    }

    #saveOrganizationSettings {
        font-size: 14px;
        padding: 10px;
    }
}

#companyBoxHeaderLogo {
    background-image: var(--logo-url);
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
}

#companyBoxHeader{
	margin-bottom: 30px;
}


#newContactForm {
    overflow: hidden;
    transition: 0.5s ease-out;
    width: 100%;
    float: right;
    background: var(--primary-color);
    border-radius: 10px;
    color: var(--secondary-color);
    margin-bottom: 10px;
    /* max-height: 0px; */
    position: relative;
    font-size: 12px;
	height: 0px;
	transition: 1s;
	opacity: 0;
}

#newContactForm.active{
	padding: 20px 0px;
    margin: 20px 0px;
	height: auto;
	opacity: 1;
}

#newContactButton {
        fill: var(--secondary-color);
    float: right;
    background-color: var(--primary-color);
    width: 2rem;
    height: 2rem;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 50%;
	position: relative;
	border: none;
    margin-top: -5px;
}

#newContactButton.iconToolTip::after, #resendInvitation.iconToolTip::after{
	background-color: var(--secondary-color);
	color: var(--primary-color);
	transform: translateX(-50%);
    left: -60px;
	position: absolute;
    text-align: center;
    top: -30px;
}

.spinnerResendEmail{
    width: 20px!important;
    height: 20px!important;
}


.organizationViewFullHeight {
    min-height: 100vh;
    min-width: 200px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 150px;
}

.rightHeaderContainer {
    margin-bottom: 20px;
    width: 90%;
    margin: 50px auto;
    height: 50px;
}

#testPeriodContainer {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

button#newAnalysisButton {
    float: right;
}




#organizationContainerOwned.active{
    opacity: 0;
    height: 0px;
	display: none;
}

#organizationContainerNotOwned.active{
    opacity: 0;
    height: 0px;
	display: none;
}

#showOwnCompaniesButton.active{
	transform: rotate(90deg);
}

#showNotOwnCompaniesButton.active{
	transform: rotate(90deg);
}





.showCompaniesButton svg {
    width: 20px;
    height: 20px;
}

.organizatinOwnedDivider{
	width: 100%;
}

.showCompaniesButton {
    float: right;
}

.organizationTeamHeader {
    float: left;
}




.analysis-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: -9;
	display: flex;
	opacity: 0;
	pointer-events: none;
	transition: 1s;
}

.analysis-overlay.active{
	z-index: 1000;
	opacity: 1;
	pointer-events: all;
}

.analysis-popup {
    background: var(--primary-color);
    width: 80vw;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1001;
	border-radius: 20px;
}

.analysis-popup .analysis-close-btn {
    position: absolute;
    top: -30px;
    right: -30px;
    background: transparent;
    color: var(--secondary-color);
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
}

.analysis-popup .analysis-close-btn:hover {
    background: var(--primary-color);
}








.organizationViewContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    overflow:auto;
    position: relative;
}


div#paginationOrganization {
    position: absolute;
    right: 0;
    top: 30px;
}







input#searchField {
    width: 40%;
    border-radius: 20px;
    line-height: 40px;
    padding-left: 20px;
    min-width: 200px;
}

p#noResultsMessage {
    width: 100%;
    margin-top: 20px;
}



/*filter and sort*/

div#sortContainerHeader {
    display: flex;
    gap: 5px;
    background: none;
    box-shadow: none;
}


.sortContainerItem {
    display: flex; /* Nebeneinander anordnen */
    align-items: center; /* Vertikale Zentrierung */
    gap: 5px; /* Abstand zwischen Name und Pfeilen */
}

.sortContainerHeader.grid .sortContainerItem {
    min-width: 10px!important;
    margin: 0px!important;
}

.sortContainerHeader.grid {
    justify-content: space-between;
    padding: 10px 30px;
}

.sortContainerHeader.grid #indexSortItemContainer {
    display: none;
}
.sortContainerHeader.grid #buttonSortItemContainer {
    display: none;
}

svg#filterIcon {
    width: 15px;
    pointer-events: none;
}

.sort-title {
    font-size: 16px; /* Schriftgröße des Titels */
    font-weight: bold; /* Fettgedruckter Titel */
}

div#iconsSortItemContainer {
    margin-left: auto;
    max-width: none;
}

div#buttonSortItemContainer {
    width: 130px!important;
    margin-right: 0px;
}

#dateSortItemContainer {
    margin-left: 10px;
    min-width: 70px !important;
}



.arrow {
    font-size: 10px; /* Größe der Pfeile */
    color: gray; /* Standardfarbe der Pfeile */
    cursor: pointer; /* Mauszeiger ändern */
    user-select: none; /* Verhindert Textauswahl */
}

.arrow.active {
    color: var(--secondary-color);
}

/* Optional: Hover-Effekt */
.arrow:hover {
    color: darkgray; /* Hover-Farbe */
    transform: scale(1.1); /* Vergrößerung bei Hover */
}

.dateSort-popup, .followUpSort-popup {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff; /* Heller Hintergrund */
    padding: 30px 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Stärkerer Schatten für modernes Design */
    border-radius: 8px; /* Abgerundete Kanten */
    z-index: 1000;
    min-width: 300px;
    max-width: 500px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.dateSort-popup .close-popup {
    position: absolute;
    right: 15px;
    top: 15px;
    background: none;
    border: none;
    font-size: 30px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 15px;
}

.dateSort-popup .close-popup:hover {
    color: #f44336; /* Rot beim Hover */
}

.dateSort-popup label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

.dateSort-popup input[type="date"], .followUpSort-popup input[type="date"] {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    transition: border-color 0.3s ease;
}

.dateSort-popup input[type="date"]:focus, .followUpSort-popup input[type="date"]:focus {
    border-color: #007bff; /* Fokusfarbe */
    outline: none;
}

.dateSort-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.dateSort-filters button {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.dateSort-filters button:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
}

.dateSort-popup .reset-filter {
    margin-top: 15px;
    text-align: center;
}

.dateSort-popup .reset-filter button, .followUpSort-popup .reset-filter button {
    background-color: #f44336; /* Rotes Design für Zurücksetzen */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.dateSort-popup .reset-filter button:hover, .followUpSort-popup .reset-filter button:hover {
    background-color: #d32f2f; /* Dunkleres Rot beim Hover */
}


.iconSort-popup {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1000;
    min-width: 300px;
    max-width: 400px;
}

.iconSort-popup .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 30px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
}

.iconSort-popup .close-popup:hover {
    color: #f44336;
}

.sortCheckbox-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sortCheckbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sortCheckbox-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sortCheckbox label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.ownerSort-popup {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1000;
    min-width: 300px;
    max-width: 400px;
}

.ownerSort-popup .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
}

.ownerSort-popup .close-popup:hover {
    color: #f44336;
}

.sortCheckbox-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}







/* Styling für den Umschaltbereich */
.viewToggle {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-left: auto;
}

.viewToggle button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.viewToggle button:hover {
    background-color: #0056b3;
}

#iconList, #iconGrid {
    width: 20px;
    fill: var(--primary-color);
}

#iconList.activeIcon, #iconGrid.activeIcon {
    fill: var(--secondary-color);
}





/* Allgemeine Organisationen-Container (unabhängig von der Ansicht) */
.organizationsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Abstand zwischen den Organisationen */
    width: 100%;
}

/* Listenansicht: Elemente nebeneinander */
.organizationsContainer.list .singleorganizationContainer {
    display: flex; /* Inhalte nebeneinander */
    flex-direction: row; /* Horizontal anordnen */
    align-items: center; /* Vertikale Zentrierung */
    gap: 5px; /* Abstand zwischen Feldern */
    color: var(--primary-color);
}

/* Kachelansicht: Elemente untereinander */
.organizationsContainer.grid .singleorganizationContainer {
    display: flex; /* Inhalte untereinander */
    flex-direction: column; /* Vertikale Anordnung */
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 200px;
    max-width: 600px;
    height: auto;
    width: unset;
    position: relative;
    padding-bottom: 40px;
}

.organizationStatusIconContainer {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.organizationStatusIcon {
    width: 20px;
    fill:#b1b1b1;
    position: relative;
}
.iconNumberCount {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 10px;
    line-height: 10px;
}

.organizationStatusIcon svg {
    vertical-align: middle;
}

.organization-field.organizationDate {
    margin-left: 10px;
    min-width: 70px !important;
}

.organizationsContainer.grid .organization-field{
    margin: auto;
    text-align: center;
}

.organizationsContainer.grid .projects-popup-toggle{
    margin: auto;
    margin-top: 20px;
}

.organization-field a {
    color: var(--primary-color-70);
}

.organizationsContainer.grid .organization-field.organizationDate {
    position: absolute;
    right: 10px;
}

.organizationsContainer.grid .organization-field.organizationIndex {
    margin: 0px !important;
}

.organizationsContainer.grid .organization-field.organizationName {
    font-size: 1.2rem;
    margin-top: 30px;
}

div#organizationIconContainer {
    min-width: 260px !important;
    overflow: inherit;
}


    /* Felder der Organisation (gemeinsam für beide Ansichten) */
.organization-field {
    flex-shrink: 0;
    margin-right: 10px;
    text-align: left;
    white-space: nowrap;
    font-size: 0.9rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.organizationFollowUp.followUp {
    color: red;
}

.chat-date-input.followUp{
    color: red;
}

/* Button für Projekte (bleibt in beiden Ansichten gleich) */
.toggleProjectsButton {
    padding: 8px 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Links ausgerichtet */
}


/* Projekt-Container (wird standardmäßig ausgeblendet) */
.singleorganizationProjects {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
}

/* Popup-Hintergrund */
.projects-popup-container {
   position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.projects-popup-inner-content {
    min-width: 400px;
    max-height: calc(100% - 80px);
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Popup-Inhalt */
.projects-popup-content {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    min-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    width: 90vw;
}

.projects-popup-content.followUp{
    border: 5px solid red;
}

div#projectsPopupHeader {
    height: 100%;
    flex: 1;
    overflow: auto;
    display: flex;
    gap: 40px;
    padding: 40px;
    padding-bottom: 20px;
}

div#projectsPopupHeaderGradient {
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    position: relative;
    z-index: 1;
}

div#projectsPopupContainer {
    position: relative;
    z-index: 0;
    padding-top: 20px;
    margin-top: -20px;
    min-width: 200px;
    height: auto;
    flex: 0 1 auto;
    max-height: 30vh;
    min-height: 200px;
    overflow: auto;
}

/* Schließen-Button */
.projects-popup-close {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    font-size: 30px;
    cursor: pointer;
    font-weight: bold;
    color: #333;
}

/* Dynamischer Projekte-Container */
#projectsPopupContainerInner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100% - 40px);
    margin: auto;
    margin-bottom: 40px;
}

/* oranization crm container */

.chat-display {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    overflow-y: auto;
}

.chat-message {
    margin: 20px 0;
    padding: 10px;
    border-radius: 10px;
    background-color: #444444; /* Nachrichten-Hintergrund */
    position: relative;
}

.chat-message.sent {
    background-color: #dedcdc;
    margin-left: auto;
    width: 90%;
}

#message-0 {
    background-color: #4e4d4d;
    color: var(--third-color);
}

div#message-text-0 {
    -webkit-line-clamp: none;
    margin: 5px;
}

.chat-message-meta {
    position: absolute;
    font-size: 12px;
    width: 100%;
}

span.chat-message-name {
    position: absolute;
    left: -40px;
    top: -10px;
    font-weight: 600;
    background-color: darkgray;
    color: white;
    border-radius: 50%;
    padding: 5px;
    cursor: default;
    width: 25px;
    height: 25px;
    line-height: 16px;
    text-align: center;
}

span.chat-message-datetime {
    position: absolute;
    right: 10px;
    top: -33px;
    font-weight: 400;
}

.chat-input.placeholder {
    color: #aaa; /* Placeholder-Farbe */
}

button.toggle-more {
    background: transparent;
    border: none;
    font-weight: 300;
}

.message-type-icons-chat {
    display: flex;
    gap: 5px;
    position: absolute;
    left: 0px;
    top: -9px;
}

span.chat-message-icon {
    width: 15px;
    height: 15px;
    fill: #c4c0c0;
}

.chat-message-icon.active {
    fill: black;
}

.chat-message-container.blurred {
    filter: blur(2px);
    position: relative;
}

.delete-chat-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.delete-chat-icon svg {
    width: 24px;
    height: 24px;
}






.chat-message-text {
    margin: 5px;
    /*display: -webkit-box; /* Flexibles Layout für Mehrzeilen-Kürzungen */
    display: flex;
    -webkit-box-orient: vertical; /* Textfluss vertikal anordnen */
    overflow: hidden; /* Text, der nicht passt, ausblenden */
    text-overflow: ellipsis; /* Drei Punkte am Ende anzeigen */
    -webkit-line-clamp: 2; /* Maximale Anzahl der sichtbaren Zeilen */
    cursor: pointer; /* Zeigt, dass der Text interaktiv ist */
    transition: all 0.3s ease; /* Für sanfte Übergänge */
    padding: 5px;
    padding-top: 10px;
}

.chat-message-text p {
    padding: 1px;
}

.chat-message-text.expanded {
    -webkit-line-clamp: unset; /* Hebt die Begrenzung der Zeilen auf */
    display: block; /* Ermöglicht die Anzeige von beliebig vielen Zeilen */
    overflow: visible;
}

.edit-message-icon {
    width: 40px;
    height: 40px;
    fill: var(--third-color);
}

.save-icon {
    width: 20px;
    height: 20px;
}

.delete-icon {
    width: 40px;
    height: 40px;
    fill: #f95c5c;
}

.more-icon {
    width: 20px;
    height: 20px;
}

.action-icons {
    opacity: 0;
    transition: 0.5s;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0000009e;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    gap: 25%;
    align-items: center;
    pointer-events: none;
}

.action-icons.active {
    opacity: 1;
    pointer-events: all;
}

.show-more-option-icons {
    position: absolute;
    right: 10px;
    top: 5px;
}


/* Popup-Container */
.chat-popup-container {
    width: calc(60% - 30px);
    margin-left: auto;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding-right: 10px;
}

div#chatInputContainer {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 10px;
}

/* Oberste Zeile mit dem Eingabefeld */
.input-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.chat-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 14px;
    padding: 10px;
    resize: none; /* Verhindert manuelle Größenänderung */
    max-height: 200px; /* Maximale Höhe */
    overflow-y: auto; /* Scrollbar bei Überlauf */
    border-radius: 10px;
}

/* Placeholder-Stil */
.chat-input::placeholder {
    color: #aaaaaa;
}

/* Untere Zeile mit den Icons und dem Senden-Button */
.icon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-type-icons {
    display: flex;
    gap: 10px;
}

.message-type-icons .icon, .icon-chat-datepicker {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    fill: lightgrey;
}

.message-type-icons .icon svg, .icon-chat-datepicker svg {
    width: 25px;
    height: 25px;
}

.date-picker-container {
    display: flex;
    gap: 10px;
    margin: auto;
}

.date-picker-container input#chat-date-input {
    border: none;
    font-size: 14px;
    text-align: center;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none; /* Versteckt das Standardsymbol */
}


.message-type-icons .icon.active {
    fill: var(--primary-color);
}

.message-type-icons .icon:hover {
    fill: var(--primary-color);
}

#aiSvgIcon {
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-top: 15px;
    margin-right: 10px;
    fill: lightgray;
}

#aiSvgIcon.active{
    fill: var(--primary-color);
}

/* Senden-Button */
.send-message-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    fill: white;
    position: relative;
}

.send-message-button svg{
    width: 40px;
    height: 40px;
}

.send-message-button:hover {
    background-color: var(--secondary-color);
    transform: scale(1.1);
}

/* Spinner mit `::after` erzeugen */
.send-message-button::after {
    content: '';
    position: absolute;
    top: 50%; /* Zentriere den Spinner vertikal */
    left: 50%; /* Zentriere den Spinner horizontal */
    width: 24px; /* Spinner-Breite */
    height: 24px; /* Spinner-Höhe */
    border: 3px solid rgba(255, 255, 255, 0.5); /* Halbtransparenter Rahmen */
    border-top-color: #fff; /* Farbe für die Vorderseite des Spinners */
    border-radius: 50%; /* Macht den Spinner rund */
    transform: translate(-50%, -50%) scale(0); /* Spinner verstecken */
    transition: transform 0.3s ease; /* Animation beim Erscheinen */
    z-index: 1; /* Überlagert den Button-Inhalt */
    animation: none; /* Keine Animation standardmäßig */
}

/* Aktiviert den Spinner */
.send-message-button.loading::after {
    transform: translate(-50%, -50%) scale(1); /* Spinner anzeigen */
    animation: spinSendButton 1s linear infinite; /* Rotation starten */
}

/* Spinner-Animation */
@keyframes spinSendButton {
    from {
        transform: translate(-50%, -50%) rotate(0deg); /* Initialer Zustand */
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg); /* Endzustand */
    }
}

/* Button-Inhalt bei aktiviertem Spinner ausblenden */
.send-message-button.loading {
    fill: transparent; /* Text unsichtbar machen */
}



/* project popup left side informations*/
.projects-popup-details {
    max-width: 40%;
    float: left;
    position: relative;
    overflow-y: auto;
    flex: 1;
}

div#projectPopupDetailsMap {
    height: 25vh;
    width: 98%;
}

input#projects-popup-organization-name {
    font-size: 20px;
    font-weight: 600;
}

input#projects-popup-organization-address {
    font-size: 14px;
    margin-top: 0px;
}

.projects-popup-details h2 {
    font-size: 16px;
}

div#projectPopupDetailsContact {
    margin-top: 30px;
    overflow-y: auto;
    position: relative;
}



/* Felder */
.projects-popup-field-group,
.projects-popup-field-group-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.projects-popup-field-group label {
    min-width: 80px;
    font-weight: bold;
}

.projects-popup-input {
    background-color: #ffffff;
    border: none!important;
    border-radius: 5px;
    color: #333;
    width: 100%;
    max-width: 300px;
    cursor: pointer;
}

.projects-popup-input:focus,
.projects-popup-input-active {
    outline: 2px solid #4caf50;
    cursor: text;
    background-color: #ffffff;
}


/* raing*/

div#organizationRatingContainer {
    display: flex;
    justify-content: center;
    margin-left: auto;
}

.ratingIcon {
    width: 20px;
    fill: lightgray;
}

.ratingIcon.active{
    fill: var(--primary-color);
}


/* Allgemeiner Container */
.projects-popup-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 50px);
    padding: 3px 0px;
    position: relative;
    height: 40px;
}

.projects-popup-contact.blurred{
    filter: blur(5px);
    pointer-events: none;
}

.projects-popup-contact.blurredSave{
    filter: blur(5px);
    pointer-events: none;
}

/* Zeilen */
.projects-popup-contact-row {
    display: flex;
    gap: 20px; /* Abstand zwischen den Feldern */
    justify-content: space-between;
    align-items: center;
    height: 40px;
}

/* Felder */
.projects-popup-contact-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Abstand zwischen Label und Input */
    position: relative;
}

.projects-popup-input:focus {
    border-color: #4caf50;
    outline: none;
    background-color: #ffffff;
}

/* Buttons für Telefon und E-Mail */
.projects-popup-contact-button {
    padding: 0px;
    background-color: var(--primary-color);
    fill: var(--third-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 25px;
    transition: background-color 0.3s ease;
    margin: auto;
    height: 25px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

button.projects-popup-contact-button svg {
    fill: var(--third-color);
    height: 15px;
    width: 15px;
}

.projects-popup-contact-button:hover {
    background-color: #45a049;
}

/* Popup-Feld (Overlay für Eingabefeld) */
.projects-popup-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: auto;
    width: 300px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    transform: translate(-50%, -50%);
}
div#phone-popup {
    width: 200px;
}

.projects-popup-contact-action {
    position: absolute;
    top: 0;
    right: -40px;
    display: flex;
    gap: 5px;
    height: 40px;
}

/* Input-Feld im Popup */
.projects-popup-overlay input {
    flex: 1;
    padding: 5px 10px !important;
    font-size: 14px;
    border: none;
    border-bottom: 2px solid #ddd;
    outline: none;
    transition: border-color 0.3s ease;
    height: 40px;
    max-width: calc(100% - 40px);
    border-radius: 20px;
}

.projects-popup-overlay input:focus {
    border-color: #4caf50;
}

/* Icon-Button im Popup */
.projects-popup-icon-button {
    background-color: var(--primary-color);
    fill: var(--third-color);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    position: absolute;
    right: 0;
    top: 0;
}

.projects-popup-icon-button:hover {
    background-color: #45a049;
}

.projects-popup-address-container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.projects-popup-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 14px;
}

.address-suggestions {
    position: absolute;
    top: 100%; /* Direkt unter dem Input-Feld */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px; /* Maximalhöhe für das Dropdown */
    overflow-y: auto; /* Scrollbar für lange Listen */
    z-index: 1000;
    display: none; /* Standardmäßig ausgeblendet */
    list-style: none;
    margin: 0;
    padding: 0;
}

.address-suggestions li {
    padding: 10px;
    cursor: pointer;
}

.address-suggestions li:hover {
    background-color: #f0f0f0;
}

ul#address-suggestions {
    list-style: none;
    width: 90%;
    background: var(--third-color);
}










/*prject List*/

div#singleProjectsContainer {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Container für jede Organisation */
.singleorganizationContainer {
    display: flex; /* Flexbox aktivieren */
    flex-direction: row; /* Inhalte nebeneinander */
    align-items: center; /* Vertikale Zentrierung */
    gap: 15px; /* Abstand zwischen den Spalten */
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 100%;
    flex: 0 0 auto;
}

.organizationB2B {
    border: 1px solid red;
}
.organizationB2BWaiting {
    border: 1px solid var(--primary-color);
}


.projects-popup-toggle {
    padding: 5px 10px;
    font-size: 14px;
    width: 130px;
}



.project-row {
    display: flex;
    flex-direction: row; /* Zeilenlayout */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: space-between; /* Abstand zwischen den Feldern */
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.project-field {
    flex: 1; /* Gleiche Breite für alle Felder */
    padding: 0 10px;
    text-align: left;
    white-space: nowrap; /* Kein Zeilenumbruch */
    overflow: hidden; /* Überlauf verstecken */
    text-overflow: ellipsis; /* Zeigt "..." bei Überlänge */
}

.project-button {
    flex-shrink: 0; /* Button bleibt unverändert */
    padding: 8px 12px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
}

.project-button:hover {
    background-color: white;
    color: #28a745;
}

#project-index {
    max-width: 40px;
}

#project-size, #project-timeStamp {
    max-width: 100px;
}

.organizationName {
    font-weight: 600;
}




.singleorganizationProjects {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}



.projectLocked{
	opacity: 0.5;
}

.creationDateOverview {
    position: absolute;
    bottom: 0px;
    right: 10px;
    font-size: 10px;
}

.creationDateProjectOverview {
    position: absolute;
    bottom: 20px;
    font-size: 0.7rem;
}

.singleorganizationContainer h2 {
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-color);
    padding: 0px;
}

.singleorganizationContainer p {
    font-size: 1rem;
    font-weight: 500;
    padding: 0px;
    text-align: left;
}



.singleorganizationProject {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 6rem;
    min-width: 6rem;
    max-width: 6rem;
    border-radius: 50%;
    height: 6rem;
	width: 6rem;
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -20px -20px 40px rgba(255, 255, 255, 0.2);
	background: var(--third-color);
    transition: box-shadow 0.3s ease, transform 0.5s ease;
	margin-left: auto;
    margin-right: auto;
	position: relative;
}



.circular-chart {
    position: absolute;
    margin: 10px auto;
    max-width: 100%;
    max-height: 250px;
}

.circular-chart.deleted {
	border: 2px solid red;
    border-radius: 50%;
}
.circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
}

.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke: var(--secondary-color); /* Farbe der Border */
    transition: stroke-dasharray 0.3s ease;
}

.percentage {
    fill: #666;
    font-size: 0.5em;
    text-anchor: middle;
    alignment-baseline: middle;
}



.singleorganizationProject:hover {
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), 
                inset -2px -2px 4px rgba(255, 255, 255, 0.2);
    transform: scale(0.9);
	cursor: pointer;
}

.singleorganizationProject:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.singleorganizationProject.active {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    z-index: 100;
}

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



/* Analyse*/

.newArea {
    position: absolute;
    z-index: 999;
    bottom: 30px;
    animation: pulse 1.5s infinite;
}

.aiIconContainer {
    position: absolute;
    bottom: 10px;
    height: 100px;
    width: 100px;
    z-index: 1;
}

.aiIcon {
    width: 100%;
    height: 100%;
    transition: all 1s ease-in-out;
    transform: scale(var(--scale, 1));
    filter: brightness(var(--brightness, 1));
    opacity: 0.7;
}

#energyExpertsCopyright {
    position: absolute;
    z-index: 1;
    bottom: 0;
    font-weight: 600;
    font-size: 0.5rem;
    height: 1rem;
}

#energyExpertsCopyrightLogo {
    background-image: url(/wp-content/plugins/energyExperts/assets/media/energyExpertsLogo.png);
    width: 1rem;
    height: 0.5rem;
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 0.5rem ;
}

.mapboxgl-ctrl-attrib-inner {
    font-size: 0.4rem;
    height: 1rem;
}

a.mapboxgl-ctrl-logo{
    height: 1rem;
    width: 4rem;
}

.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
    float: left;
    margin: 0 0 5px 5px;
}




.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
	position: fixed;
    z-index: 1;
}

.popup-content-inner {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    overflow: auto;
    left: 0;
}
.popup-content-inner.expanded {
	/*padding: 40px;*/
}

.popup-content {
    background: var(--primary-color);
    transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease, border-radius 0.5s ease, padding 0.5s ease;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
	color: var(--secondary-color);
    padding: 40px;
}

.popup-overlay.resizeMap {
    visibility: visible;
    opacity: 0;
}
.popup-overlay.resizeMap .popup-content {
    transform: scale(1);
}

.popup-overlay.active .popup-content {
    transform: scale(1);
    z-index: 99;
}


.previewKwhKwp {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -10px;
    color: black;
    font-weight: 600;
}

.previewAlignment {
    float: left;
    padding-left: 10px;
	width: 33%;
}
.previewCity {
    text-align: center;
    padding-right: 10px;
    float: right;
    width: 33%;
}

.previewDate {
    text-align: right;
    padding-right: 10px;
	float: right;
	width: 33%;
}

.previewSize {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
}
.previewTitle {
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
	    padding-top: 50px;
}

.previewProjectButtonContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.openProjectButton {
    text-align: center;
    border: 2px solid var(--secondary-color);
    display: inline-block;
    padding: 5px 10px;
    min-width: 100px;
    max-width: 80%;
    margin-top: 2vw;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-radius: 10px;
	text-transform: uppercase;
    font-weight: 800;
    font-size: 16px;
}



#mapContainerEntry {
	z-index: 0;
    position: relative;
    width: 100%;
	height: 50%;
    overflow: hidden;
}
#grid-connection-overview-container.active {
    display: none;
}
#mapContainerEntry.expanded {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#mapContainerEntry.expanded::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: radial-gradient(circle, transparent 10%, rgba(255, 255, 255, 1) 90%);*/
    pointer-events: none; /* Stellen Sie sicher, dass das Overlay keine Mausereignisse blockiert */
    transition: 2s;
}

#mapContainerEntry.expanded.active::after {
    opacity: 0;
}

#mapContainerEntry.expanded.black-overlay::after {
    background: radial-gradient(circle, transparent 40%, rgb(16 36 72) 70%);
}

#mapContainerEntry.expanded.black-overlay.active::after {
    background: none;
}

#customTablePopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 60vh;
    background-color: var(--third-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 20px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

#customTablePopup.hidden {
    display: none;
}

#customTablePopupContent {
    flex: 1;
    overflow: auto;
}

#customTablePopupOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#customTablePopupOverlay.hidden {
    display: none;
}

#closeTablePopup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

#closeTablePopup svg {
    fill: #000;
    width: 30px;
    height: 30px;
}


#mapEntry {
    width: 100%;
    height: 100%;
    clip-path: ellipse(50% 100% at 50% 100%);
}
#mapEntry.expanded {
    clip-path: none;
    transition: 0.5s ease;
}



#turnTiltContainer{
	opacity: 0;
	z-index: -1;
	transition: 0.5s;
}

#turnTiltContainer.visible{
	opacity: 1;
	z-index: 1;
}


#iconTilt, #iconTurn {
    position: absolute;
    top: 50%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transform: translate(0px, -50%);
}

#iconTilt {
    left: 60px;
}
#iconTilt::after {
    top: 20vh;
}

#iconTurn {
    right: calc(50% - 20vw);
    top: 150px;
}
#iconTurn::after {
    top: -7px;
    left: calc(20vw + 80px);
}

.slider-container-tilt-turn {
    position: relative;
    height: 30px;
}

#iconTilt .slider-container-tilt-turn {
    width: 30px;
    height: 30vh;
}
#iconTurn .slider-container-tilt-turn {
    width: 40vw;
    height: 20px;
}

.slider-background-tilt-turn {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--secondary-color);
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
	border-radius: 5px;
}

#iconTilt .slider-background-tilt-turn {
    width: 4px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
#iconTurn .slider-background-tilt-turn {
    margin-top: 6px;
}


input#turnSlider {
    width: 100%;
    height: 4px;
    background-color: var(--secondary-color);
}

.slider-container-tilt-turn input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 24px;
            width: 24px;
            background: var(--primary-color);
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

        .slider-container-tilt-turn input[type=range]::-moz-range-thumb {
            height: 24px;
            width: 24px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

       .slider-container-tilt-turn input[type=range]::-ms-thumb {
            height: 24px;
            width: 24px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }



input#tiltSlider {
    transform: rotate(90deg);
    width: 30vh;
    position: absolute;
    left: -15vh;
    top: calc(30vh - 140px);
    height: 4px;
    background-color: var(--secondary-color);
}

.mapControls {
    position: absolute;
    opacity: 0;
    transform: translate(0, -50%);
    top: 50%;
    right: 10px;
    z-index: -5;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
    fill: var(--header-color-light);
    stroke: var(--header-color-light);
    padding: 20px 10px;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
}


/* Legend Layer Contaier */

#layerLegendContainer {
    display: none; /* Initial versteckt */
    position: fixed;
    bottom: 20px;
    right: 90px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    z-index: 1000;
    max-width: 200px;
    min-width: 200px;
}

.legend-section {
    display: none; /* Initial versteckt */
}

.legend-section:not(:last-child) {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.legend-header {
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
    font-size: 14px;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.legend-text {
    color: #4b5563;
    line-height: 1.4;
    font-size: 12px;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
    #layerLegendContainer {
        bottom: 15px;
        right: 15px;
        padding: 14px;
        max-width: 220px;
        min-width: 180px;
    }

    .legend-text {
        font-size: 11px;
    }
}


#mapControlsTopRight.visible {
	opacity: 1;
	z-index: 1;
	
}

.mapBlueprintContainer{
    position: relative;
}

.blueprintMapPopup {
    position: absolute;
    right: 60px;
    top: -50%;
    z-index: -1;
    background: var(--primary-color);
    padding: 20px 10px;
    border-radius: 10px;
    opacity: 0;
}

.blueprintMapPopup.active{
    opacity: 1;
    z-index: 1;
}

.blueprintMapIcon {
    width: 30px;
    height: 30px;
    fill: var(--secondary-color);
    stroke: var(--secondary-color);
    transition: 0.5s;
}

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

.blueprintMapIcon.active {
    fill: var(--third-color);
    stroke: var(--third-color);
}


#areaDiv {
    position: absolute;
    top: 200px;
    left: 50%;
	transform: translateX(-50%);
    background-color: var(--primary-color);
    padding: 10px 20px;
	opacity: 0;
	z-index: -1;
	font-weight: 700;
    font-size: 25px;
    color: var(--secondary-color);
    border-radius: 5px;
    box-shadow: 0 20px 30px rgb(0 0 0 / 21%);
	pointer-events: none;
}

#areaDiv.active {
    opacity: 1;
	z-index: 0;
}

.distanceDivFixed, .distanceDivVar{
	color: #000000;
	font-weight: 700;
}

.distanceDivFixed {
    background: #ffffff;
    padding: 5px;
    border-radius: 5px;
}

.distanceDivVar {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: bold;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.closeMeassureIcon {
    cursor: pointer;
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    right: 2px;
    top: -5px;
    line-height: 16px;
    color: #ff4444;
}

.closeMeassureIcon:hover {
    color: #cc0000;
    transform: scale(1.1);
}


#iconTiltTurn {
	transition: 0.5s;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}


 #resizeMap {
            margin-top: 30px;
        }
        .resizeMapIcon {
            width: 1rem;
            height: 1rem;
            cursor: pointer;
            margin-bottom: 20px;
        }


.mapSettingIcons {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 20px;
    transition: 0.5s;
    position: relative;
}

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

.mapSettingIcons.active{
    fill: var(--third-color);
    stroke: var(--third-color);
}

.mapSettingIcons.active{
    fill: rgb(49 255 0);
    stroke: rgb(49 255 0);
}



/* map Popup*/

/* ============================================================================
   POLYGON HOVER POPUP STYLES - Jony Ive Design
   ============================================================================ */

#polyPopup-container {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    transform: translate(-50%, -100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform-origin: bottom center;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15));
}

#polyPopup-container.polyPopup-visible {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}

#polyPopup-container.polyPopup-hidden {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.8);
}

.polyPopup-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 16px;
    min-width: 180px;
    position: relative;
    box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.08),
            0 1px 2px rgba(0, 0, 0, 0.02);
}

.polyPopup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.polyPopup-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.polyPopup-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.polyPopup-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.polyPopup-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.polyPopup-stat-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.polyPopup-stat-value {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.polyPopup-arrow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    border-left: none;
    transform: translateX(-50%) rotate(45deg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Animation für smooth entrance */
@keyframes polyPopup-fadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(0.8) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1) translateY(0);
    }
}

#polyPopup-container.polyPopup-animate-in {
    animation: polyPopup-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .polyPopup-content {
        background: rgba(28, 28, 30, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .polyPopup-title {
        color: #f5f5f7;
    }

    .polyPopup-stat-label {
        color: #98989d;
    }

    .polyPopup-stat-value {
        color: #f5f5f7;
    }

    .polyPopup-arrow {
        background: rgba(28, 28, 30, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top: none;
        border-left: none;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .polyPopup-content {
        min-width: 160px;
        padding: 14px;
        border-radius: 14px;
    }

    .polyPopup-title {
        font-size: 13px;
    }

    .polyPopup-stat-value {
        font-size: 14px;
    }

    .polyPopup-stats {
        gap: 12px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .polyPopup-content {
        background: rgba(255, 255, 255, 1);
        border: 2px solid #000;
    }

    .polyPopup-title {
        color: #000;
    }

    .polyPopup-stat-value {
        color: #000;
    }

    .polyPopup-stat-label {
        color: #666;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #polyPopup-container {
        transition: opacity 0.2s ease;
    }

    #polyPopup-container.polyPopup-animate-in {
        animation: none;
    }

    @keyframes polyPopup-fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
}

/*hardware popup*/
.mapHardwarePopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapHardwarePopup.active {
    opacity: 1;
    visibility: visible;
}

/* Container für den eigentlichen Dialog */
.mapHardwareDialog {
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header Section */
.mapHardwareHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.mapHardwareHeader h2 {
    margin: 0;
    font-size: 1.5rem;
    color:var(--header-color-light);
    font-weight: 500;
    padding: 0;
}

/* Schließen-Button */
.mapHardwareClose {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: #666;
    transition: color 0.2s ease, transform 0.2s ease;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.mapHardwareClose:hover {
    color: #333;
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.05);
}

.mapHardwareClose:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.4);
}

/* Content Layout */
.mapHardwareContainer {
    flex: 1;
    overflow: hidden;
}

.mapHardwareContent {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Left Sidebar Tabs */
.mapHardwareTabs {
    width: 220px;
    border-right: 1px solid #eee;
    overflow-y: auto;
}

.mapHardwareTab {
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #eee;
    position: relative;
    font-weight: 400;
    color: var(--header-color-light);
}

.mapHardwareTab:hover {
    background-color: rgba(0, 0, 0, 0.53);
}

.mapHardwareTab.active {
    background-color: var(--primary-color, #3498db);
    color: white;
    font-weight: 500;
}

/* Right Content Panel */
.mapHardwareDetails {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
    position: relative;
}

/* Company Logo */
.mapHardwareLogo {
    position: absolute;
    top: 20px;
    right: 45px;
    width: 120px;
    height: 60px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}

/* Hardware Image Background */
.mapHardwareImage {
    height: 250px;
    margin-bottom: 25px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    background-size: contain;
    background-repeat: no-repeat;
}

.mapHardwareImage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(241, 241, 241, 0) 40%, rgb(255 255 255 / 90%) 80%, rgb(255 255 255) 100%);
}

/* Title */
.mapHardwareTitle {
    font-size: 1.75rem;
    margin-bottom: 25px;
    color: #333;
    font-weight: 500;
    margin-top: -50px;
}

/* Dropdowns */
.mapHardwareDropdown {
    margin-bottom: 20px;
    position: relative;
}

.mapHardwareDropdown label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--header-color-light);
}

.mapHardwareDropdown select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: white;
    appearance: none;
    font-size: 14px;
    color: #333;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mapHardwareDropdown select:focus {
    outline: none;
    border-color: var(--primary-color, #3498db);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.mapHardwareArrow {
    position: absolute;
    right: 15px;
    top: 65%;
    pointer-events: none;
    color: #666;
}

/* Fixed Value Containers */
.mapHardwareValue {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

.mapHardwareValue label {
    font-weight: 500;
    margin-right: 10px;
    min-width: 150px;
    color: var(--header-color-light);
}

.mapHardwareValueText {
    color: var(--header-color-light);
    font-weight: 400;
}

/* PDF Button */
.mapHardwarePdf {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 25px;
    background-color: var(--primary-color, #3498db);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-align: center;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.mapHardwarePdf:hover {
    background-color: var(--primary-color-dark, #2980b9);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Animation Classes */
.mapHardwareFadeIn {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.mapHardwareFadeOut {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .mapHardwareDialog {
        width: 95%;
        max-height: 90vh;
    }

    .mapHardwareContent {
        flex-direction: column;
    }

    .mapHardwareTabs {
        width: 100%;
        height: auto;
        display: flex;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #eee;
        color: var(--header-color-light);
    }

    .mapHardwareTab {
        white-space: nowrap;
        border-bottom: none;
        border-right: 1px solid #eee;
    }

    .mapHardwareLogo {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 15px;
    }
}




#analyse-container{
	position: absolute;
	top: 0;
	min-height: 100vh;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	left: 0px;
	display: none;
}

#analyse-container.visible{
	opacity: 1;
	display: unset;
}


.pd-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 50%);
    transition: 1s;
    z-index: -1;
    opacity: 0;
    left: 0;
}

.pd-container.active {
    opacity: 1;
    z-index: 1;
    transition: 1s;
    pointer-events: none;
}

#grid-connection-container {
    background: none;

}

.pdDetailsContainer {
    width: 100%;
    height: 100%;
}

.pdDetailsContainerInner {
    padding-top: 140px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    pointer-events: all;
}

.tabHeader {
    font-size: 26px;
    color: var(--header-color-light);
    text-transform: uppercase;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0%);
}


.grid-connection-button-Box {
    background-color: var(--secondary-color);
	color: var(--primary-color);
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
    width: 350px;
    height: 70px;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
	position: relative;
	transition: 0.5s;
}


.grid-connection-button-Box::before {
    content: '';
    background-image: url(/wp-content/plugins/energyExperts/assets/media/lock.png);
    background-size: 30px;
    border-radius: 10px;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #00000063;
    background-position: center;
}



        .slider-container {
			opacity: 1;
			transition: 0.5s;
            position: absolute;
			width: 80vw;
			z-index: -1;
        }
#time-slider-container.active, #month-slider-container.active {
	z-index: 2;
}

#time-slider-container{
	left: 10vw;
	top: 60px;
}

#month-slider-container{
	left: 10vw;
	bottom: 6rem;
}

        .slider-container input[type=range] {
            -webkit-appearance: none;
            background: transparent;
            position: absolute;
            z-index: 1;
			width: 100%;

        }

        .slider-container input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 1rem;
            width: 1rem;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

        .slider-container input[type=range]::-moz-range-thumb {
            height: 1rem;
            width: 1rem;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

       .slider-container input[type=range]::-ms-thumb {
            height: 1rem;
            width: 1rem;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

       .slider-container input[type=range]::-webkit-slider-runnable-track {
            height: 8px;
            background: transparent;
            cursor: pointer;
            border-radius: 5px;
        }

       .slider-container input[type=range]::-moz-range-track {
            height: 8px;
            background: transparent;
            cursor: pointer;
            border-radius: 5px;
        }

       .slider-container input[type=range]::-ms-track {
            height: 8px;
            background: transparent;
            cursor: pointer;
            border-radius: 5px;
            border-color: transparent;
            color: transparent;
        }

       .slider-container input[type=range]::-ms-fill-lower {
            background: transparent;
        }

       .slider-container input[type=range]::-ms-fill-upper {
            background: transparent;
        }

        .tick-container {
           
			height: 0.5rem;
			margin-top: 5px;
        }

		.timeMonthLabel {
			display: block;
    		margin-top: 0.3rem;
			width: 100%;
    		text-align: center;
			color: #8a8585;
    		font-weight: 700;
            font-size: 0.7rem;
		}

        .tick {
            position: absolute;
            width: 0.03rem;
            height: 0.5rem;
            background: var(--primary-color);
            opacity: 0.8;
        }

        .tick-label {
            position: absolute;
            top: -30px;
            width: 1rem;
            text-align: center;
            transform: translateX(-50%);
            font-size: 0.8rem;
            color: black;
        }

        .tick-container .tick.active {
            background: var(--primary-color);
        }

        .tick-container .tick-label.active {
            color: var(--primary-color);
        }

        .selected-value {
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            color: var(--primary-color);
            white-space: nowrap;
            z-index: 3;
        }
        /* header navigation*/

#projectSettingContainer {
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
    pointer-events: all;
    display: none;
}

.profileIcon {
    height: 37px;
    width: 37px;
    padding: 7px;
    fill: var(--primary-color);
    position: relative;
    margin: 10px;
}

svg#progress-profile-ring {
    width: 37px;
    height: 37px;
}

.topNavigationBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 160px;
    pointer-events: none;
    z-index: 2;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pulse {
    animation: pulse 3s infinite ease-in-out;
}

/*PD SLider*/

#pd-slider-container {
    position: absolute;
    width: 100vw;
    top: 30px;
    padding: 0% 5%;
}

/* Flexbox-Container für die Icons (gleichmäßige Verteilung über die Breite) */
.pd-icon-container {
    display: flex;
    justify-content: space-between; /* Gleichmäßige Verteilung über die gesamte Breite */
    align-items: center; /* Zentriert die Icons vertikal */
    width: 100%; /* Stellt sicher, dass der Container die gesamte Breite nutzt */
    padding: 10px; /* Optionaler Innenabstand */
    box-sizing: border-box; /* Innenabstand wird in die Breite einberechnet */
}

/* Styling für das Icon-Container-Element */
.iconBoxPd {
    position: relative;
    flex: 1;
    max-width: 80px;
    justify-content: center;
    display: flex;
    pointer-events: all;
}

/* Styling für den Button-Container */
.iconButtonPd {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    margin: 0 auto; /* Zentriert den Button horizontal innerhalb des iconBoxPd */
    fill: var(--header-color-light);
    stroke: var(--header-color-light);
    flex-basis: content;
}

/* Standard-Styling für das Icon (runder Hintergrund) */
.iconPd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: var(--primary-color);
    transition: all 0.3s ease;
    z-index: 1;
    box-shadow: 0 0 15px #bababa;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: relative;
    padding: 10px;
}


#iconPdButtonPd4 {
    transform: scale(1.3);
}

#dashboardIconSvg {
    width: 60px;
    height: 60px;
    border-radius: 0px;
    background: transparent;
    margin-bottom: 10px;
    box-shadow: unset;
}

.progress-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    transform: rotate(-90deg);
    top: 0px;
    left: 0px;
}

.progress-background {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 5;
}

.progress-bar {
    fill: none;
    stroke: var(--secondary-color);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 188.5; /* 2 * π * 30 */
    stroke-dashoffset: 188.5;
    transition: stroke-dashoffset 0.3s ease-in-out;
}


/* Styling für das Icon (SVG) */
.headerIcon {
    width: 24px;
    height: 24px;
}

/* Pillen-Ansicht (unsichtbar standardmäßig, pillenförmiger Hintergrund) */
.pillViewPd {
    position: absolute;
    top: 50%; /* Zentriert vertikal */
    left: 50%; /* Zentriert horizontal */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    border-radius: 20px;
    color: var(--primary-color);
    fill: var(--primary-color);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0); /* Zentriert und skaliert von 0 */
    transition: all 0.3s ease;
    padding: 0px 20px; /* Fügt horizontalen und vertikalen Abstand hinzu */
    min-width: 80px; /* Mindestbreite für die Pillen-Ansicht, anpassbar */
    white-space: nowrap; /* Verhindert Zeilenumbruch im Text */
    transform-origin: center center; /* Verankerung der Transformation in der Mitte */
    height: 40px;
}

/* Hover-Effekt: Icon ausblenden, Pillen-Ansicht einblenden mit Plop-Animation aus der Mitte */
.iconButtonPd:hover .iconPd {
    opacity: 0;
    transform: scale(0.8);
}

.iconButtonPd:hover .pillViewPd {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Zentriert und skaliert auf normale Größe */
}

/* Rückkehr-Animation: Pillen-Ansicht ausblenden, Icon einblenden */
.iconButtonPd:not(:hover) .pillViewPd {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0); /* Zentriert und skaliert auf 0 */
}

.iconButtonPd:not(:hover) .iconPd {
    opacity: 1;
    transform: scale(1);
}
.iconButtonPd.clicked .iconPd, .iconButtonPd.clicked .pillViewPd{
    background-color: var(--primary-color);
    color: var(--secondary-color);
    fill: var(--secondary-color);
    stroke: var(--secondary-color);
}

#iconPdButtonPd4:hover .iconPd {
    opacity: 1;
}





#address p{
	line-height: 30px;
}

#connectionsContainer .detailBoxOneItem {
    margin-bottom: 10px;
}

#iconMail {
    margin-right: 50px;
}

#iconPhone {
    margin-right: 24px;
}

#resendInvitation svg {
    width: 15px;
    height: 15px;
    fill: var(--secondary-color);
}

.editIcon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: 0px;
    background-color: var(--primary-color);
    border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	fill: var(--secondary-color);
	stroke: var(--secondary-color);
}

#connectionDetail1 span.detailBoxOneLabelSub {
    width: 60px;
}



.detailBoxOneItemSubContainerDetails {
    display: flex;
    flex-direction: column;
	 margin-top: 20px;
}

.detailBoxOneItemSubContainer {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Optional: Abstand zwischen den Zeilen */
	flex-wrap: wrap;
	width: 100%;
    min-height: 20px;
}

#addressDisplay {
    position: relative;
}


.contactDetailBoxItemSubContainer {
    position: relative;
    margin-bottom: 15px;
}

.contactDetailBoxInput {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 12px;
    box-sizing: border-box;
}

.contactDetailBoxInput::placeholder {
    color: #aaa;
    font-size: 14px;
}

.contactDetailBoxInput:focus {
    border-color: #007bff;
    outline: none;
}

.disabled-email {
    background-color: #e0e0e0 !important;
    cursor: not-allowed;
    opacity: 0.5;
}

.tooltip-container {
    position: relative;
    display: inline-block;
	width: 100%;
}

.tooltip-text {
    visibility: hidden;
    width: 100px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid var(--secondary-color);
    position: absolute;
    z-index: 1;
    bottom: 115%; /* Position über dem Tooltip-Container */
    left: 50%;
    margin-left: -50px; /* Zentrieren */
    
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.contactSaveButton {
    font-size: 12px;
    margin-left: auto;
    margin-right: 10px;
    padding: 5px 10px;
}

.salutationForm {
    padding: 0px;
    margin-left: 10px;
	width: calc(100% - 20px) !important;
	margin-top: 10px;
}

.contactDetailBoxItemSubContainer {
    position: relative;
    margin-bottom: 15px;
    width: calc(50% - 20px);
    float: left;
    margin-left: 10px;
	margin-right: 10px;
}

.contactDetailBoxItemSubContainer input {
    width: 100%;
}



.iconDetailBoxOneSub {
            position: absolute;
            right: 0px;
            cursor: pointer;
            width: 20px;
            height: 20px;
            background-size: 10px;
			background-repeat: no-repeat;
			background-position: center;
			background-color: var(--primary-color);
			border-radius: 50%;
			transition: 0.5s;
			display: flex;
			justify-content: center;
			align-items: center;
			fill: var(--secondary-color);
        }

.iconDetailBoxOneSub svg {
    pointer-events: none;
}

 .detailBox {
    opacity: 0;
    transition: 0.5s ease-out;
    width: 100%;
    float: right;
    background: var(--primary-color);
    border-radius: 10px;
    color: var(--secondary-color);
    margin-bottom: 10px;
    max-height: 0px;
    position: relative;
    font-size: 12px;
     overflow: auto;
}


        .detailBox.open {
            opacity: 1;
            max-height: 500px;
			padding: 10px 5px;
        }


.detailBoxOneLabelSub {
    min-width: 150px; /* Diese Breite kannst du anpassen */
    text-align: left;
    font-weight: bold; /* Optional: Um das Label hervorzuheben */
    padding-right: 10px; /* Abstand zwischen Label und Value */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.detailBoxOneLabelSubSub {
    margin-left: 10px;
}

.disclaimerSub {
    color: var(--third-color);
    font-weight: 300;
    font-size: 10px;
}

.detailBoxOneValueSub {
	color: var(--third-color);
    font-size: 0.7rem;
    min-width: 80px;
    width: calc(20px + 30%);
}

.detailBoxOneValueSub a {
    color: inherit; /* Optional: Um die Linkfarbe beizubehalten */
    text-decoration: none; /* Optional: Entfernt die Unterstreichung bei Links */
}

@media (max-width: 768px) {
    .detailBoxOneItemSubContainer {
        flex-direction: column; /* Bei kleineren Bildschirmen Labels und Werte untereinander anordnen */
        align-items: flex-start;
    }

    .detailBoxOneLabelSub {
        padding-right: 0;
    }

    .detailBoxOneValueSub {
        width: 100%;
    }
	
	#connectionDetail1 span.detailBoxOneLabelSub {
    width: 100%;
}
}




/*span.detailBoxOneLabelSub {
    min-width: 50px;
    display: block;
    float: left;
    width: 50%;
}

span.detailBoxOneValueSub {
    min-width: 100px;
    width: calc(50% - 5px);
    text-align: right;
    display: block;
    float: right;
    max-width: calc(100% - 60px);
	color: var(--third-color);
}

.subLoanHeader .detailBoxOneLabelSub {
    float: none;
    font-weight: 700;
}*/



.boxHeader {
    font-size: 1rem;
    font-weight: bolder;
    margin-top: 30px;
    margin-bottom: 0px;
    color: var(--primary-color);
	text-transform: uppercase;
}

.boxHeader svg {
    fill: var(--primary-color);
}


.organizationIcon{
	z-index: 1;
    position: absolute;
    top: 10px;
    left: 50px;
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	fill: var(--primary-color);
	opacity: 1;
	transition: 0.5s;

}

.organizationIcon.active{
	opacity: 0;
}

/*delete Popup styling*/

div#deleteProjectButton {
    left: 10px;
}

#deleteProjectButton svg {
    width: 80%;
}

.deleteEntryOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999999;
            justify-content: center;
            align-items: center;
        }

        .deleteEntryContent {
            background: var(--third-color);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .deleteEntryButton, .cancelEntryButton {
            margin: 10px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .deleteEntryButton, .cancelEntryButton {
            background-color: #ccc;
            color: black;
        }


.generalorganizationDetails {
    padding: 20px 20px 20px 40px;
}


.detailBoxOneItemSubContainer a {
    color: rgb(255 255 255);
    font-weight: 600;
}


/*edit values*/

/* Styling für das Input-Feld im readonly-Zustand (sieht wie ein <p>-Tag aus) */
.read-only-input {
  border: none!important;
  background: none!important;
  cursor: pointer; /* Verhindert, dass das Input-Feld bearbeitet werden kann */
	padding: 5px;
}

/* Entfernt die Fokussier-Border */
.read-only-input:focus {
  outline: none;
}

/* Styling für das Input-Feld im aktiven Zustand (sieht wie ein normales Input-Feld aus) */
.read-only-input.active {
  border: 1px solid var(--primary-color)!important; /* Füge eine sichtbare Umrandung hinzu */
  background: var(--third-color)!important;
  pointer-events: auto; /* Ermöglicht Bearbeitung im aktiven Zustand */
	color: var(--primary-color) !important;
}

#saveValueButton {
    position: sticky;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: var(--secondary-color);
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 22px;
}




#projectTitleInput{
	text-align: center;
	width: calc(100% - 50px);
}

.darkStyleInputContainer {
    color: var(--third-color) !important;
    font-size: 0.7rem;
    min-width: 80px;
    width: calc(20px + 30%);
}

.listContainer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Hier wird die Übergangszeit und der -typ gesetzt */
}

.listContainer.active {
    max-height: 500px; /* Setze dies auf eine Höhe, die groß genug für dein Inhaltssein */
}

.workCostsDropDownIcon {
    width: 10px;
    height: 10px;
    fill: var(--third-color);
    margin-left: 5px;
}

.inputContainerDiv {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 5px;
    margin-bottom: 5px;
}

.inputContainerDivInput {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--secondary-color);
}

.editSplit1 {
    width: 100%;
}

.editSplit2 {
    width: 100%;
}

.editSplit3 {
    width: 100%;
}
/* main Icons */

/*
 .iconToolTip::after {
    content: attr(data-tooltip);
    position: absolute;
     top: -40px;
    transform: translateX(-50%);
    background-color: var(--third-color);
    color: #8a8585;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    margin-bottom: 5px;
    z-index: 1000;
	font-size: 12px;
}

.iconToolTip:hover::after {
    opacity: 1;
}

.iconToolTip90::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 25%;
    left: 60%;
    transform: translateY(-50%);
    background-color: var(--third-color);
    color: #8a8585;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    margin-left: 5px;
    z-index: 1000;
}

.iconToolTip90:hover::after {
    opacity: 1;
}


.icon-container{
	opacity: 0;
	position: absolute;
    transition: 0.5s;
	display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    width: calc(100vw - 40px);
    bottom: 1.5rem;
    margin-left: 20px;
    margin-right: 20px;
	pointer-events: none;
	font-weight: 600;
    font-size: 20px;
    z-index: 3;
}

.icon-container.active{
	opacity: 1;
	transition: 0.5s;
	pointer-events: all;
}


.iconBox{
	flex: 1 1 auto;
	position: relative;
}

.iconButton, .iconButtonMap{
    width: 5vw;
    height: 5vw;
    min-width: 40px;
    min-height: 40px;
    max-width: 70px;
    max-height: 70px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40px;
	background-color: var(--secondary-color);
	border-radius: 50%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
	margin-left: auto;
    margin-right: auto;
	transition: 0.5s;
	display: flex;
    justify-content: center;
    align-items: center;
    fill: var(--primary-color);
    stroke: var(--primary-color);
	position: relative;
	z-index: 3;
}


.iconButton.active{
	background-color: var(--primary-color);
	fill: var(--secondary-color);
    stroke: var(--secondary-color);
}



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

.spinner {
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }

.spinner .path {
      stroke: var(--primary-color);
    }

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



*/



/*map settings*/
/*
.mapSettingsContainer {
    position: absolute;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3sease, z-index 0sease 0.3s;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    pointer-events: none;
    right: 0;
}



.mapSettingsContainer.active {
    opacity: 1;
    z-index: 999;
    transition: opacity 0.3s ease;
	pointer-events: all;
}

.mapSettingsItem {
	flex: 1 1 5rem;
    width: 5rem;
    box-sizing: border-box;
	transition: 0.5s;
}

.mapSettingsItem.inactive{
	opacity: 0;
	pointer-events: none;
}

.mapSettingsSliderContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.circular-slider {
    position: relative;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circular-slider .handle {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    cursor: pointer;
	z-index: 1;
}


.center-icon{
	position: absolute;
    background: var(--secondary-color);
	color: var(--primary-color);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
	fill: var(--primary-color);
    stroke: var(--primary-color);
}

.center-icon svg {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.buttonDegree {
    width: 5rem;
    height: 2.5rem;
    position: absolute;
	background-size: 10px;
	background-repeat: no-repeat;
	opacity: 0.6;
}
.buttonDegree:hover {
	opacity: 1;
}

.buttonPlus{
	top: 0;
	border-bottom: 1px solid var(--secondary-color);
}

.buttonPlus svg{
	position: absolute;
    top: 3px;
    left: calc(50% - 3px);
	fill: var(--secondary-color);
    stroke: var(--secondary-color);
	
}

.buttonMinus{
	bottom: 0;
}

.buttonMinus svg {
    position: absolute;
    bottom: 3px;
    left: calc(50% - 3px);
	fill: var(--secondary-color);
    stroke: var(--secondary-color);
}

.changeMwpLabel {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translate(-50%, 0px);
    font-size: 8px;
    line-height: 8px;
}

#changeMwpInputId {
    width: 40px;
    background-color: rgba(256, 256, 256, 0.3);
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    text-align: center;
}



.buttonDegreeBackground{
	background-color: var(--primary-color);
	border-radius: 50%;
	width: 5rem;
	height: 5rem;
	transition: 0.5s;
}

.axisLockIcon {
    fill: var(--primary-color);
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


.workingWidth-buttons {
    position: relative;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	transition: 0.5s;
}




#boundaryAdjustment{
	display: flex;
    justify-content: center;
    align-items: center;
	background-color: var(--secondary-color);
	fill: var(--primary-color);
    stroke: var(--primary-color);
}

#boundaryAdjustmentBackground.active{
	background-color: var(--secondary-color);
}*/

/*map planning*/

.mapPlanningContainer {
    position: absolute;
    top: -120px;
    left: calc(10% + 112px);
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease, z-index 0s ease 0.3s;
	display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
	pointer-events: none;
}

.mapPlanningContainer.active {
    opacity: 1;
    z-index: 10;
    transition: opacity 0.3s ease;
	pointer-events: all;
}


.mapPlanningItem {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mapPlanningIcon {
    position: relative;
    width: 5rem;;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-value {
    position: absolute;
    font-size: 0.8rem;
    background: var(--secondary-color);
	color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
}
.center-value svg {
    width: 2rem;
    height: 2rem;
}


.buttonPlanningBackground{
	background-color: var(--primary-color);
	border-radius: 50%;
	width: 5rem;
	height: 5rem;
	transition: 0.5s;
}




        /*icon Grid connection*/

.icon-containerGrid {
    opacity: 0;
    position: absolute;
    transition: 0.5s;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: flex-start;
    width: 100px;
    top: 150px;
    pointer-events: none;
    font-weight: 600;
    font-size: 20px;
    z-index: 3;
    flex-direction: column;
    height: calc(100vh - 200px);
    left: 5%;
}

.icon-containerGrid.active{
    opacity: 1;
    transition: 0.5s;
    pointer-events: all;
}


.iconBoxGrid {
    flex: 1 1 auto;
    position: relative;
    display: grid;
    place-items: center;
}

.iconButtonGrid{
    width: 5vw;
    height: 5vw;
    min-width: 40px;
    min-height: 40px;
    max-width: 70px;
    max-height: 70px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
    margin-left: auto;
    margin-right: auto;
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    fill: var(--primary-color);
    stroke: var(--primary-color);
    position: relative;
    z-index: 3;
}

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

.iconButtonGrid svg {
    height: 1.5rem;
    width: 1.5rem;
}


.iconButtonGrid.active{
    background-color: var(--primary-color);
    fill: var(--secondary-color);
    stroke: var(--secondary-color);
}

/* Container-Styling */
#grid-connection-overview-container {
    opacity: 0;
    padding: 20px;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    width: calc(95% - 200px);
    position: absolute;
    bottom: 100px;
    left: calc(5% + 150px);
    background-color: var(--third-color);
    transition: 0.5s;
}

/* Überschrift */
.grid-header {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-align: left;
}

/* Flexbox für Zeilen */
.grid-row {
    display: flex;
    flex-wrap: wrap; /* Nebeneinander oder Umbruch bei Platzmangel */
    gap: 10px; /* Abstand zwischen den Elementen */
}

.grid-item {
    min-width: 200px; /* Mindestbreite */
    flex: 1; /* Flexlayout */
    display: flex; /* Flexlayout für vertikale Textanordnung */
    flex-direction: column; /* Elemente untereinander anordnen */
    justify-content: center; /* Vertikale Zentrierung der Inhalte */
    align-items: center; /* Horizontale Zentrierung */
    text-align: center; /* Textzentrierung */
    padding: 10px;
    border: 1px solid var(--border-color); /* Rahmen */
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten */
}

/* Styling der Beschriftung */
.grid-label {
    font-weight: bold; /* Fett für die Beschriftung */
    margin-bottom: 5px; /* Abstand zur zweiten Zeile */
    font-size: 0.8rem;
    color: #555;
}

/* Styling der Werte */
.grid-value {
    font-size: 1rem; /* Größerer Text für Werte */
    color: #333;
}


#grid-connection-pdf-container {
    opacity: 0;
    padding: 20px;
    border-radius: 5px;
    width: calc(95% - 200px);
    position: absolute;
    top: 200px;
    left: calc(5% + 150px);
    background-color: var(--third-color);
    transition: 0.5s;
    pointer-events: none;
    overflow: auto;
    height: calc(100vh - 300px);
    max-width: 600px;
}

#grid-connection-pdf-container.active{
    pointer-events: all;
    opacity: 1;
    z-index: 99999;
}


/* Allgemeines Styling für das Formular */
.e8pdf-styled-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Zwei-Spalten-Layout */
    gap: 20px; /* Abstand zwischen den Feldern */
    max-width: 900px;
    margin: auto;
    background-color: #f7f7f7;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Überschrift */
.e8pdf-section-header {
    grid-column: span 2; /* Überspannt beide Spalten */
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

/* Einzelne Felder */
.e8pdf-form-field {
    display: flex;
    flex-direction: column;
}

.e8pdf-form-field label {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
    color: var(--primary-color);
}


/* Fortschrittsanzeige */
#e8pdf-progress-container {
    width: 100%;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin-bottom: 20px;
    position: relative;
}

#e8pdf-progress-bar {
    height: 100%;
    background-color: var(--primary-color);
    width: 0;
    border-radius: 5px;
    transition: width 0.3s;
}

/* Abschnitt */
.e8pdf-form-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 470px);
    overflow: auto;
}

/* Überschrift */
.e8pdf-section-header {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Flexbox für Zwei-Spalten-Layout */
.e8pdf-form-row {
    display: flex;
    flex-wrap: wrap; /* Damit es bei kleineren Bildschirmen umbricht */
    gap: 20px;
}

/* Einzelne Felder */
.e8pdf-form-field {
    flex: 1 1 calc(50% - 20px); /* Nimmt 50% Breite minus Abstand */
    display: flex;
    flex-direction: column;
}


/* Input */
.e8pdf-form-field input {
    padding: 12px!important;
    border: 1px solid var(--border-color)!important;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Nur für Checkbox und Label */
.e8pdf-checkbox-field {
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikale Ausrichtung */
    gap: 10px; /* Abstand zwischen Checkbox und Label */
    justify-content: flex-start; /* Links ausrichten */
}

/* Optional: Checkbox Styling */
.e8pdf-checkbox {
    margin: 0; /* Entfernt Standardabstand */
}

/* Optional: Label Styling */
.e8pdf-checkbox-label {
    font-size: 14px; /* Schriftgröße */
    font-weight: bold; /* Fettgedruckt */
    color: #333; /* Farbe des Textes */
}


/* Input Fokus */
.e8pdf-form-field input:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

/* Navigation */

#e8pdf-form-navigation {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 20px;
    left: 5%;
    width: 90%;
}
/* Zurück-Button */
#e8pdf-prev-btn {
    margin-right: auto; /* Schiebt den "Zurück"-Button nach links */
}

/* Weiter-Button */
#e8pdf-next-btn {
    margin-left: auto; /* Schiebt den "Weiter"-Button nach rechts */
    background-color: var(--primary-color);
    color: var(--secondary-color);
    min-width: 100px;
    position: relative;
}

.e8pdf-navigation-button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #6d6d6d;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.e8pdf-navigation-button:hover {
    background-color: #292929;
}

.e8pdf-navigation-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .e8pdf-form-field {
        flex: 1 1 100%; /* Einspaltiges Layout auf kleinen Bildschirmen */
    }
}




/* spinner css*/

.spinner {
    width: 20px;
    height: 20px;
    border: 4px solid rgb(255 255 255 / 20%);
    border-top: 4px solid #fffdfd;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    position: absolute;
    left: calc(50% - 10px);
    top: calc(50% - 10px);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}




@media (max-width: 600px) {
    .tab[title]:hover:after {
        max-width: calc(100vw - 20px); /* Begrenze die maximale Breite des Tooltips */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tab[title]:hover:after {
        left: auto;
        right: 10px;
        transform: none;
    }

    .tab[title]:hover:before {
        left: auto;
        right: 10px;
        transform: none;
    }
}


/*finance tab*/

.yieldGraphs-canvas {
    max-height: 40vh;
    height: 40vh;
    width: 100%;
}

.yieldGraphs-tab {
    cursor: pointer;
    padding: 10px 15px;
    background-color: #f0f0f0;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.yieldGraphs-tab.yieldGraphs-active {
    background-color: var(--primary-color);
    color: white;
}

.yieldGraphs-chartlockIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.yieldGraphs-levelOnePaymentButton {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.yieldHeader {
    font-size: 26px;
    color: var(--header-color-light);
    margin: 40px 0px;
}

.yieldGraphs-container {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    min-height: 40vh;
}


.yieldInformationContainer {
    background-color: white;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 10px;
}

.yieldInformationHeader {
    font-size: 18px;
    color: rgb(100, 116, 139);
    font-weight: 600;
    margin-bottom: 20px;
}

.yieldInformationRow {
    color: rgb(100, 116, 139);
    display: flex;
    gap: 20px;
    width: 100%;
}

.yieldInformationRow.bolt{
    font-weight: 700;
}

.yieldInformationLabel {
    width: 150px;
}

.yieldInformationLabel {
    width: 150px;
}

.yieldInformationValue {
    width: 150px;
    text-align: right;
    padding: 2px 4px;
}

.topTabView-container {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.topTabView-buttons {
    display: flex;
    background-color: rgb(0 9 18 / 85%);
    z-index: 2;
    position: absolute;
    width: 100%;
    backdrop-filter: blur(10px);
}

.topTabView-button {
    padding: 15px 25px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
}

.topTabView-button:hover {
    color: var(--secondary-color-50);
}

.topTabView-button.topTabView-active {
    color: var(--secondary-color);
}

.topTabView-button.topTabView-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.topTabView-content {
    padding: 20px;
    display: none;
    height: calc(100% - 52px);
    overflow-y: auto;
    padding-top: 50px;
}

.topTabView-content h3 {
    margin-top: 20px;
}

.topTabView-content.topTabView-active {
    display: block;
}

.topTabView-graph-placeholder {
    height: 200px;
    background-color: #f9f9f9;
    border: 1px dashed var(--border-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    margin-bottom: 15px;
}

/* Spezifische Stile für Finanzgraphen */
#financeGraphs {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.finance-graph-placeholder {
    height: 200px;
    background-color: #f9f9f9;
    border: 1px dashed var(--border-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}


#financeGraphs{
    width: 100%;
}

.processModule-container {
    display: flex;
    width: 100%;
    min-height: 400px;
    padding: 5%;
    height: 100%;
}

/* Prozessschritte links */
.processModule-steps {
    width: 280px;
    padding-right: 40px;
    position: relative;
    overflow-y: auto;
}

/* Vertikale Linie für den Prozessablauf */
.processModule-steps::before {
    content: '';
    position: absolute;
    top: 20px; /* Beginnt in der Mitte des ersten Kreises */
    height: var(--gray-line-end, 20px); /* Dynamisch berechnet, um exakt beim letzten Kreis zu enden */
    left: 40px;
    width: 1px;
    background-color: #E0E0E0;
    z-index: 0;
}

/* Farbige Linie bis zu aktuellem Punkt */
.processModule-steps::after {
    content: '';
    position: absolute;
    top: 20px; /* Beginnt in der Mitte des ersten Kreises */
    height: var(--active-line-end, 0);
    left: 40px;
    width: 1px;
    background-color: var(--primary-color);
    z-index: 0;
    transition: height 0.3s ease;
}

/* Einzelner Prozessschritt */
.processModule-step {
    display: flex;
    align-items: center;
    margin-bottom: 40px; /* Fester Abstand zwischen Schritten */
    position: relative;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.2s ease;
    padding-left: 40px;
    min-height: 44px; /* Mindesthöhe für konsistente Abstände */
}

.processModule-step:hover {
    transform: scale(1.05);
}

/* Der letzte Schritt hat keinen Abstand nach unten */
.processModule-step:last-child {
    margin-bottom: 0;
}

/* Kreis mit weißem Schatten-Hintergrund */
.processModule-step-circle-bg {
    position: absolute;
    width: 34px;
    height: 34px;
    left: 40px;
    border-radius: 50%;
    background-color: white;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Kreis für den Prozessschritt */
.processModule-step-circle {
    position: absolute;
    width: 34px;
    height: 34px;
    left: 40px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    z-index: 2;
    color: #666;
    font-weight: 500;
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* Aktiver und abgeschlossener Schritt */
.processModule-step.active .processModule-step-circle {
    background-color: #000000b5;
    color: #eeeeee;
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
}

.processModule-step.completed .processModule-step-circle {
    background-color: var(--primary-color);
    color: var(--secondary-color);;
}

/* Häkchen für abgeschlossene Schritte */
.processModule-step-check {
    display: none;
    color: var(--header-color-light);
}

.processModule-step.completed .processModule-step-check {
    display: block;
}

.processModule-step.completed .processModule-step-number {
    display: none;
}

/* Container für Titel und Info-Button */
.processModule-step-content {
    margin-left: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Erlaubt Umbruch bei langen Titeln */
}

/* Titel des Schritts */
.processModule-step-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--header-color-light);
    transition: all 0.3s ease;
    line-height: 1.4;
}

.processModule-step.active .processModule-step-title {
    color: var(--header-color-light);
    font-weight: 600;
}

/* Titel-Container im Panel */
.processModule-panel-title-container {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.processModule-panel-title-container h2 {
    margin: 0;
    color: var(--header-color-light);
    font-size: 22px;
    font-weight: 600;
}

/* Info-Button für die Erklärung - jetzt im Panel */
.processModule-step-info {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #F5F5F5;
    border: 1px solid var(--border-color);
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.processModule-step-info:hover {
    background-color: var(--secondary-color);;
    color: #555;
}

/* Inhaltsbereich rechts */
.processModule-content {
    flex: 1;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Panel für den Inhalt */
.processModule-panel {
    display: none;
    animation: processModuleFadeIn 0.4s ease;
    flex: 1;
}

.processModule-panel.active {
    display: block;
}

.processModule-panel h2 {
    color: var(--header-color-light);
    font-size: 22px;
    font-weight: 600;
    padding: 0px;
}

.processModule-panel p {
    line-height: 1.7;
    color: var(--header-color-light);
    margin-bottom: 20px;
    font-size: 15px;
}

@keyframes processModuleFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Navigation */
.processModule-navigation {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Navigation Buttons */
.processModule-button {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.processModule-back-button {
    background-color: #f5f5f5;
    color: #666;
}

.processModule-back-button:hover {
    background-color: #e8e8e8;
    transform: scale(1.05);
}

.processModule-next-button {
    background-color: #00000059;
    color: white;
    margin-left: auto;
}

.processModule-next-button:hover {
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 5px rgba(79, 70, 229, 0.3);
    transform: scale(1.05);
    color: black;
}

.processModule-complete-button {
    background-color: var(--secondary-color);;
    color: white;
    margin-left: auto;
}

.processModule-complete-button:hover {
    background-color: var(--primary-color);;
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
    transform: scale(1.05);
}

/* Popup-Stil */
.processModule-explanation-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.processModule-explanation-popup.active {
    opacity: 1;
}

.processModule-popup-content {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.processModule-explanation-popup.active .processModule-popup-content {
    transform: translateY(0);
}

.processModule-close-popup {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.processModule-close-popup:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #555;
}

#processModule-popup-title {
    margin-top: 0;
    color: #111;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

#processModule-popup-text {
    line-height: 1.7;
    color: #444;
    font-size: 15px;
}

.processModule-container-collapsed {
    width: 90%;
    margin: 20px;
}

.next-step-header {
    padding: 10px 0;
    color: #333;
}

.next-step-header h3 {
    margin: 0;
    font-size: 30px;
    font-weight: 300;
    padding: 0;
    font-variant: all-petite-caps;
    color: #ffffff;
}

.next-step-content {
    border-top: 1px solid #ffffff;
    padding-top: 20px;
}

.next-step-content h4 {
    color: var(--header-color-light);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    padding: 0px;
}

.next-step-content p {
    color: var(--header-color-light);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.next-step-container {
    width: calc(100% - 100px);
    float: left;
}



.next-step-button {
    display: block;
    background-color: #00000061;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    font-weight: 600;
    float: right;
    position: absolute;
    right: 20px;
    bottom: 20px;
}


.next-step-button:hover {
    background-color: rgba(255, 254, 254, 0.38);
    color: #000000;
}

/* finance chart*/

.financeChart-container {
    width: 100%;
    margin: 0 auto;
}

/* Box styles */
.financeChart-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.financeChart-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #d3d3d3;
}

.financeChart-header p {
    font-size: 18px;
    font-weight: 500;
    margin-left: 10px;
}

.financeChart-logo {
    width: 24px;
    height: 24px;
    background-color: var(--financeChart-primary-color);
    border-radius: 50%;
}

.financeChart-chart-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

/* Toggle buttons */
.financeChart-toggle-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.financeChart-tab-container {
    position: relative;
    display: flex;
    align-items: center;
}

.financeChart-tab:hover + .financeChart-info-button {
    opacity: 1;
}

.financeChart-tab {
    padding: 6px 20px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2sease;
    background-color: var(--primary-color);
    color: var(--third-color);
}

.financeChart-tab.active {
    background-color: var(--secondary-color);
    color: var(--third-color);
}

.financeChart-info-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fffcfc;
    font-size: 10px;
    cursor: pointer;
    transition: background-color 0.2sease;
    position: absolute;
    right: 3px;
    top: 3px;
    border: 1px solid;
    opacity: 0;
}

.financeChart-info-button:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* Popup styles */
.financeChart-explanation-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.financeChart-explanation-popup.active {
    opacity: 1;
}

.financeChart-popup-content {
    background-color: white;
    border-radius: 8px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.financeChart-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.financeChart-popup-title {
    font-size: 18px;
    font-weight: 500;
}

.financeChart-popup-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #888;
}

.financeChart-popup-text {
    color: #555;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .financeChart-toggle-buttons {
        justify-content: center;
    }

    .financeChart-tab {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* Chart lock styling for premium features */
.financeChart-chartlockIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.financeChart-levelOnePaymentButton {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: var(--financeChart-primary-color);
    color: white;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}




/* grid view  tab */
.moduleGridView-container {
    width: 100%;
    height: calc(100vh - 250px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.moduleGridView-top {
    height: 30%;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.moduleGridView-bottom {
    display: flex;
    gap: 20px;
    height: 70%;
    margin-top: auto;
}

.moduleGridView-bottomLeft,
.moduleGridView-bottomRight {
    flex: 1;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: calc(50% - 10px);
}

.moduleGridView-bottomRight {
    margin-left: auto;
}

.moduleGridView-title {
    font-size: 24px;
    font-weight: 600;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.moduleGridView-close {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}
.moduleGridView-expanded {
    position: absolute;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.moduleGridView-top.moduleGridView-expanded {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transform-origin: top center;
    animation: expandFromTop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.moduleGridView-bottomLeft.moduleGridView-expanded {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transform-origin: bottom left;
    animation: expandFromBottomLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.moduleGridView-bottomRight.moduleGridView-expanded {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transform-origin: bottom right;
    animation: expandFromBottomRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes expandFromTop {
    0% {
        top: 0;
        left: 0;
        width: 100%;
        height: 30%;
    }
    100% {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

@keyframes expandFromBottomLeft {
    0% {
        top: calc(30% + 20px);
        left: 0;
        width: calc(50% - 10px);
        height: 70%;
    }
    100% {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

@keyframes expandFromBottomRight {
    0% {
        top: calc(30% + 20px);
        left: calc(50% + 10px);
        width: calc(50% - 10px);
        height: 70%;
    }
    100% {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Collapse Animationen */
@keyframes collapseToTop {
    0% {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    100% {
        top: 0;
        left: 0;
        width: 100%;
        height: 30%;
    }
}

@keyframes collapseToBottomLeft {
    0% {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    100% {
        top: calc(30% + 20px);
        left: 0;
        width: calc(50% - 10px);
        height: 70%;
    }
}

@keyframes collapseToBottomRight {
    0% {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    100% {
        top: calc(30% + 20px);
        left: calc(50% + 10px);
        width: calc(50% - 10px);
        height: 70%;
    }
}

.moduleGridView-expanded .moduleGridView-close {
    opacity: 1;
}

.moduleGridView-content-collapsed,
.moduleGridView-content-expanded {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.moduleGridView-content-expanded {
    opacity: 0;
    visibility: hidden;
    padding: 0px;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: auto;
}

.moduleGridView-expanded .moduleGridView-content-collapsed {
    opacity: 0;
    visibility: hidden;
    transition-duration: 0.4s;
}

.moduleGridView-expanded .moduleGridView-content-expanded {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.3s;
}


/*task form*/
/* Global Form Styles */
.ee-form-container {
    max-width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.ee-form-section {
    position: relative;
    margin-bottom: 40px;
}

/* Typography */
.ee-form-container h2 {
    font-size: 1.8em;
    margin: 0 0 20px 0;
    color: #333;
    font-weight: 600;
}

.ee-form-container h3 {
    font-size: 1.3em;
    margin: 30px 0 15px;
    color: #4CAF50;
    font-weight: 500;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
}

/* Form Elements */
.ee-form-input,
.ee-form-select {
    width: 100%;
    padding: 12px 5px!important;
    border: none!important;
    border-bottom: 2px solid #ccc!important;
    background: transparent!important;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.3s ease;
    padding-bottom: 0px !important;
}

.ee-form-input:focus,
.ee-form-select:focus {
    border-color: var(--primary-color)!important;
    outline: none;
}

.ee-form-input::placeholder {
    color: #515151;
}

.ee-form-select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23555" stroke-width="2" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.ee-form-select-small {
    width: 200px !important;
}

/* Form Layout */
.ee-form-grid {
    display: flex;
    gap: 0px 10%;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ee-form-column {
    flex: 1;
    min-width: 280px;
}

.ee-form-row {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.ee-form-group {
    flex: 1;
    margin-bottom: 30px;
    min-width: 40%;
    background: #ffffffc9;
    padding: 10px;
    border-radius: 10px;
}

.ee-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: 14px;
}

.ee-form-full-width {
    min-width: 100%;
    grid-column: span 2;
}

/* Address Search with Mapbox */
.ee-form-geocoder {
    width: 100%;
}

.mapboxgl-ctrl-geocoder {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
}

/* Suggestions */
.ee-form-suggestions {
    position: absolute;
    background: white;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 9999;
    display: none;
}

.ee-form-suggestions li {
    background: white;
    padding: 10px 15px;
    margin: 0;
    list-style: none !important;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: block;
    max-width: 100%;
    box-sizing: border-box;
    color: #444;
}

.ee-form-suggestions li:hover {
    background-color: #f5f5f5;
}

.ee-form-suggestions li:last-child {
    border-bottom: none;
}

/* Required fields */
.ee-form-required {
    color: #e53e3e;
    margin-left: 3px;
}

/* Styles für die Kontaktliste */
.ee-form-contact-item {
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 15px;
    border: 0.5px solid #fff;
}

.ee-form-contact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ee-form-contact-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--header-color-light);
}

.ee-form-contact-delete-btn {
    border: none;
    background: transparent;
    color: #ff5252;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.ee-form-contact-delete-btn:hover {
    color: #ff0000;
}

.ee-form-actions {
    margin-top: 10px;
    text-align: left;
}

.ee-form-button {
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.ee-form-button:hover {
    background-color: #45a049;
}

/* Styles für die Flächenliste */
.ee-form-flaeche-item {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

.ee-form-flaeche-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ee-form-flaeche-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.ee-form-flaeche-delete-btn {
    border: none;
    background: transparent;
    color: #ff5252;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.ee-form-flaeche-delete-btn:hover {
    color: #ff0000;
}


/* Responsive Design */
@media (max-width: 768px) {
    .ee-form-grid,
    .ee-form-row {
        flex-direction: column;
        gap: 0;
    }

    .ee-form-column {
        width: 100%;
    }

    .ee-form-select-small {
        width: 100% !important;
    }
}

.bottomRightDashboard {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column; /* Stellt sicher, dass Kinder vertikal gestapelt werden */
}

.tab-overview-header {
    padding: 10px 10px;
    background-color: rgb(0 0 0 / 40%);
    color: var(--header-color-light);
    font-size: 18px;
    font-weight: 500;
}


.detail-category-header {
    padding: 10px;
    background-color: #00000059;
    color: white;
    font-weight: 600;
    line-height: 1.4em;
    border-bottom: 1px solid #d3d3d3;
}

.detail-row {
    display: flex;
    border-bottom: 1px solid #d3d3d3;
    padding: 0;
    line-height: 1.4em;
}

.detail-row:last-child {
    border-bottom: none;
}

.highlight {
    color: var(--primary-color);
    font-weight: 600;
}

/* FinanceDashboard */
@keyframes neonPulse {
    from { text-shadow: 0 0 15px #00ccff; }
    to { text-shadow: 0 0 30px #00ffcc, 0 0 50px #00ccff; }
}

#finance-dashboard-chart {
    width: 100%;
    height: 100%;
    max-height: 90%;
    max-width: 90%;
    margin: auto;
}

.financeDashboard-header {
    margin: 0;
    font-size: 30px;
    font-weight: 300;
    padding: 0;
    font-variant: all-petite-caps;
    color: #ffffff;
    text-align: center;
    margin-top: 20px;
}

.financeDashboard-moreButton {
    width: 100px;
    margin-left: auto;
    text-align: center;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    margin-top: -20px;
    transition: 0.5s;
}

.financeDashboard-moreButton:hover {
    transform: scale(1.05);
}

/* finance overview */

/* Finanzübersicht Styling */
.finance-overview {
    font-family: Arial, sans-serif;
    border-radius: 12px;
    padding: 30px;
    color: #0f172a;
    margin: 0 auto;
}

.finance-section {
    background-color: white;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    position: relative;
}


/* edit single value without slider*/

/* Inline Edit Styles */
.inline-edit-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: -20px;
}

.inline-edit-value {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.inline-edit-value:hover {
    background-color: rgba(92, 92, 92, 0.08);
}

.inline-edit-input {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    width: 70px;
    text-align: right;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inline-edit-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(92, 92, 92, 0.15);
}

.inline-edit-icon {
    cursor: pointer;
    width: 12px;
    height: 12px;
    opacity: 0.5;
    transition: opacity 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.inline-edit-icon:hover {
    opacity: 0.8;
}

.inline-edit-icon.edit-icon {
    color: #666;
}

.inline-edit-icon.save-icon {
    color: var(--secondary-color);
    opacity: 0.7;
}

.inline-edit-icon.save-icon:hover {
    opacity: 1;
}


/* Responsive Anpassungen */
@media (max-width: 768px) {
    .inline-edit-input {
        width: 60px;
        font-size: 14px;
    }

    .inline-edit-icon {
        width: 14px;
        height: 14px;
    }
}




/* finance-section loading*/

/* Loading States */
.financeLoading.financeLoading-active {
    pointer-events: none;
    user-select: none;
    position: relative;
}

.financeLoading.financeLoading-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    animation: financeLoading-fadeInOverlay 0.4s ease-out forwards;
    background: inherit;
}

/* Moderner rotierender und pulsierender Ring */
.financeLoading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    animation: financeLoading-fadeInSpinner 0.4s ease-out 0.2s forwards;
}

.financeLoading-modernRing {
    width: 60px;
    height: 60px;
    position: absolute;
    animation: financeLoading-breathingPulse 4s ease-in-out infinite;
}

.financeLoading-ringElement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: financeLoading-breathingRotate 3s linear infinite;
}

/* Beruhigender Asteroid-Ring mit Schweif */
.financeLoading-ringElement::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(43, 62, 75, 0.1) 80deg,
            rgba(63, 161, 77, 0.4) 120deg,
            rgb(63, 161, 77) 150deg,
            rgb(63, 161, 77) 180deg,
            rgb(63, 161, 77) 210deg,
            rgba(63, 161, 77, 0.6) 240deg,
            rgba(63, 161, 77, 0.3) 280deg,
            rgba(43, 62, 75, 0.1) 320deg,
            transparent 360deg
    );
    mask: radial-gradient(circle, transparent 58%, black 62%);
    -webkit-mask: radial-gradient(circle, transparent 58%, black 62%);
    animation: financeLoading-breathingColorShift 4s ease-in-out infinite;
}

/* Sanft pulsierende Kugel */
.financeLoading-ringElement::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(63, 161, 77, 1) 0%, rgb(160 161 162) 100%);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(63, 161, 77, 0.6);
    animation:
            financeLoading-gentleMove 3s linear infinite,
            financeLoading-gentleKugelPulse 4s ease-in-out infinite;
}

/* Beruhigende Atem-Animationen */
@keyframes financeLoading-breathingRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes financeLoading-breathingPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 8px rgba(63, 161, 77, 0.3));
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
        filter: drop-shadow(0 0 16px rgba(63, 161, 77, 0.5));
    }
}

@keyframes financeLoading-breathingColorShift {
    0%, 100% {
        filter: hue-rotate(0deg) saturate(1) brightness(1);
    }
    25% {
        filter: hue-rotate(15deg) saturate(1.1) brightness(1.05);
    }
    50% {
        filter: hue-rotate(0deg) saturate(0.9) brightness(0.95);
    }
    75% {
        filter: hue-rotate(-15deg) saturate(1.1) brightness(1.05);
    }
}

@keyframes financeLoading-gentleMove {
    0% {
        transform: rotate(0deg) translateX(25px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(25px) rotate(-360deg);
    }
}

@keyframes financeLoading-gentleKugelPulse {
    0%, 100% {
        transform: rotate(0deg) translateX(25px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: rotate(180deg) translateX(25px) rotate(-180deg) scale(1.2);
        opacity: 1;
    }
}

@keyframes financeLoading-fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

@keyframes financeLoading-fadeInSpinner {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes financeLoading-fadeOutSpinner {
    from {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}



.finance-section-header {
    margin-bottom: 20px;
    position: relative;
    padding-left: 18px;
}

.finance-section-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
    border-radius: 4px;
}

.finance-section-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    color: #0f172a;
    padding: 0px;
}

.finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(400px, calc((100% / 2)) - 20px), 1fr));
    gap: 20px;
}





/* finance Hardware*/

.financeMainCategory-main-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(170px, calc((100% / 4)) - 60px), 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.financeMainCategory-main-category {
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.financeMainCategory-main-category:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.financeMainCategory-main-category.active {
    border-color: #4caf50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

.financeMainCategory-category-indicator {
    text-align: center;
}

.financeMainCategory-indicator-icon {
    display: inline-block;
    font-size: 14px;
    color: #b4b4b4;
    transition: transform 0.3s ease;
}

.financeMainCategory-indicator-icon.active {
    color: var(--secondary-color);
}

/* Animation für ausklappbare Inhalte */
#financeMainCategory-details-container {
    transition: max-height 0.4s ease-in-out;
    overflow: hidden;
}



/* Kachel-Raster */
.financeMainCategory-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

/* Einzelne Kachel */
.financeMainCategory-tile {
    background-color: rgb(0, 9, 18);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.financeMainCategory-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Kachel-Header */
.financeMainCategory-tile-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 9, 18, 1) 50%, rgba(0, 9, 18, 0) 100%);
    width: 100%;
    color: white;
    font-weight: 600;
    justify-content: center;
    font-size: 18px;
}


/* Titel in der Kachel */
.financeMainCategory-tile-header .financeHardware-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    text-align: left;
    color: #212529;
}

/* Bild-Container */
.financeMainCategory-image-bg {
    width: 100%;
    height: 250px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.3s ease; /* Optional: für Hover-Effekte */
}



/* Kachel-Inhalt */
.financeMainCategory-tile-content {
    padding: 1rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%);
    padding-bottom: 5px;
}

/* Spezifikationen */
.financeMainCategory-specs {
    display: grid;
    gap: 0.8rem;
}

.financeMainCategory-spec-item {
    display: flex;
    flex-direction: column;
    color: white;
}

.financeMainCategory-spec-value {
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}




/* Hauptstil für die Finance Hardware Komponente */
.finance-hardware {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #212529;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: #00182c;
    padding: 20px;
    border-radius: 20px;
}

/* Kachel-Raster */
.financeHardware-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
}

/* Einzelne Kachel */
.financeHardware-tile {
    background-color: rgb(244, 242, 238);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.financeHardware-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Kachel-Header */
.financeHardware-tile-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    position: absolute;
    background: linear-gradient(180deg, rgba(244, 242, 238, 1) 50%, rgba(244, 242, 238, 0) 100%);
    width: 100%;
    justify-content: center;
}

/* Logo */
.financeHardware-logo {
    width: 40px;
    height: 40px;
    margin-right: 0.8rem;
    display: flex
;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Titel in der Kachel */
.financeHardware-tile-header .financeHardware-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    text-align: left;
    color: #212529;
}

/* Bild-Container */
.financeHardware-image-bg {
    width: 100%;
    height: 250px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease; /* Optional: für Hover-Effekte */
}



/* Kachel-Inhalt */
.financeHardware-tile-content {
    padding: 1rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%);
}

/* Spezifikationen */
.financeHardware-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.financeHardware-spec-item {
    display: flex;
    flex-direction: column;
}

.financeHardware-spec-label {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.2rem;
    text-align: center;
}

.financeHardware-spec-value {
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}

/* Editierbare Felder */
/*.financeHardware-editable {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

.financeHardware-price-input {
    width: calc(100% - 30px);
    padding: 0.25rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
}


.financeHardware-edit-btn, .financeHardware-save-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    margin-left: 10px;
}

.financeHardware-edit-btn:hover,
.financeHardware-save-btn:hover {
    background-color: #f1f3f5;
}


.financeHardware-edit-icon,
.financeHardware-save-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.financeHardware-edit-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
}

.financeHardware-save-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d6efd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'%3E%3C/path%3E%3Cpolyline points='17 21 17 13 7 13 7 21'%3E%3C/polyline%3E%3Cpolyline points='7 3 7 8 15 8'%3E%3C/polyline%3E%3C/svg%3E");
}


/* slider*/

/* Styles für den Slider */
.financeHardware-slider-container {
    width: calc(100% - 2rem);
    margin: 8px 0;
    padding: 5px 0;
    position: absolute;
    bottom: 40px;
}

.financeHardware-slider-track {
    height: 4px;
    background-color: rgba(200, 200, 200, 0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.financeHardware-slider-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, #4fb34f, #81d281);
    border-radius: 2px;
    width: 50%; /* Wird per JavaScript aktualisiert */
}

.financeHardware-slider-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%; /* Wird per JavaScript aktualisiert */
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
}

.financeHardware-slider-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.financeHardware-slider-handle:active {
    transform: translate(-50%, -50%) scale(1.3);
}

/* Gesamtpreis-Bereich */
.financeHardware-price-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
}

.financeHardware-total-value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--secondary-color);
}



/* Wirtschaftlichkeits-Metriken */
/* Scrollbarer Container für Finance-Bereich */
.finance-overview {
    position: relative;
    overflow: visible;
}

/* Metrics layout */
.finance-key-metrics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5%;
    width: calc(100% + 100px);
    margin-bottom: 30px;
    margin-top: -50px;
    margin-left: -50px;
    padding: 0 5%;
}

.metric-card {
    flex: 1;
    background: rgb(0 9 18 / 85%);
    border-radius: 12px;
    padding: 10px 24px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    animation-delay: calc(var(--i) * 0.1s);
    width: 144px;
    height: 200px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.3);
}

.metric-ring-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
}

.metric-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.metric-ring-bg {
    border: 6px solid rgba(50, 50, 50, 0.4);
}

.metric-ring-progress {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    color: transparent; /* Wird von conic-gradient als Farbe verwendet */
}

/* Farben für die verschiedenen Metriken */
.metric-roi .metric-ring-progress {
    color: #30d158; /* Grün für ROI */
}

.metric-irr .metric-ring-progress {
    color: #0a84ff; /* Blau für IRR */
}

.metric-amort .metric-ring-progress {
    color: #ff9f0a; /* Orange für Amortisation */
}

.metric-lcoe .metric-ring-progress {
    color: #5e5ce6; /* Lila für LCOE */
}

.metric-value-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgb(0,9,18);
    border-radius: 50%;
    margin: 5%;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 20px;
}

.metric-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.metric-trend {
    font-size: 13px;
    margin-top: 5px;
    height: 13px;
}

.trend-up {
    color: #30d158;
}

.trend-down {
    color: #ff9f0a;
}

/* Mini header */
.finance-mini-header {
    position: sticky;
    top: 1px;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(0,9,18,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    visibility: hidden;
    width: calc(100% + 102px);
    margin-left: -50px;
}

.finance-mini-header.visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mini-metrics-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ändere gap zu space-between */
    width: 100%; /* Volle Breite nutzen */
    max-width: 1200px; /* Optional: Maximale Breite beschränken */
    padding: 0 70px; /* Padding links und rechts für Abstand zum Rand */
}

/* Mini-Metrik - kein fester Gap mehr nötig */
.mini-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Entferne feste Breite oder flex-basis, um natürliche Verteilung zu ermöglichen */
}

.mini-ring-container {
    position: relative;
    width: 36px;
    height: 36px;
}

.mini-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.mini-ring-bg {
    border: 3px solid rgba(50, 50, 50, 0.4);
}

.mini-ring-progress {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    color: transparent; /* Für conic-gradient */
}

.mini-ring-center-bg {
    width: 80%;
    height: 80%;
    background-color: rgb(37 44 53);
    border-radius: 50%;
    margin: 10%;
}

/* Farben für die Mini-Versionen */
.mini-roi .mini-ring-progress {
    color: #30d158;
}

.mini-irr .mini-ring-progress {
    color: #0a84ff;
}

.mini-amort .mini-ring-progress {
    color: #ff9f0a;
}

.mini-lcoe .mini-ring-progress {
    color: #5e5ce6;
}

.mini-value-container {
    display: flex;
    flex-direction: column;
}

.mini-value {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    transition: 0.5s;
}

.mini-value.blurred{
    filter: blur(3px);
}

.mini-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .finance-key-metrics {
        flex-wrap: wrap;
        gap: 12px;
    }

    .metric-card {
        flex: 1 0 calc(50% - 12px);
        padding: 16px;
    }

    .metric-ring-container {
        width: 90px;
        height: 90px;
    }

    .metric-value {
        font-size: 20px;
    }

    .mini-metrics-container {
        overflow-x: auto;
        width: 100%;
        justify-content: flex-start;
        padding: 0 16px;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .metric-card {
        flex: 1 0 100%;
    }
}




/* Info-Zeilen */
.finance-info-row {
    border-bottom: 1px solid #ffffff54;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: auto;
    margin-bottom: 10px;
}

.finance-info-label {
    font-size: 16px;
    color: #64748b;
}

.finance-info-label-bold {
    font-weight: bold;
}

.finance-info-value {
    font-size: 16px;
    color: #0f172a;
    text-align: right;
}

.finance-info-value-bold {
    font-weight: bold;
}

/* Eingabegruppen */
.finance-input-group {
    display: flex;
    min-width: 100%;
    justify-content: space-between;
    position: relative;
}

.finance-input-group-wide {
    flex: 1;
}

.finance-input-group-full {
    grid-column: 1 / span 2;
}

.finance-edit-button {
    width: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #64748b;
    font-size: 18px;
    position: absolute;
    right: -5px;
    top: 5px;
}

/* Header mit Button */
.finance-header-with-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Annuitäten-Bereich */
.finance-annuity-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(400px, calc((100% / 2)) - 20px), 1fr));
    gap: 20px;
}

.finance-annuity-left {
    flex: 1;
    margin-right: 10px;
    margin-left: 10px;
}

.finance-annuity-sum {
    margin-top: 30px;
    margin-right: 10px;
    margin-left: 10px;
}

.finance-financing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}


/* slider*/

.financeCapitalSlider-container {
    width: 100%;
    padding: 0px;
    position: relative;
}

.financeCapitalSlider-track {
    height: 8px;
    border-radius: 4px;
    position: relative;
    margin: 20px 0 20px;
    background-color: #eaeaea;
}

.financeCapitalSlider-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    width: 51%;
}

.financeCapitalSlider-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--secondary-color);
    border-radius: 50%;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 0 15px var(--secondary-color-50);
    z-index: 2;
}

.financeCapitalSlider-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.financeCapitalSlider-caption {
    position: absolute;
    top: -30px;
    font-size: 16px;
    white-space: nowrap;
    width: auto;
    text-align: center;
}




.finance-bar {
    height: 40px;
    border-radius: 6px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.finance-bar-segment {
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 25px;
}

.finance-bar-interest {
    background-color: var(--primary-color-70);
    border-radius: 6px 0 0 6px;
    left: 0;
}

.finance-bar-repayment {
    background-color: var(--primary-color);
    border-radius: 0 6px 6px 0;
}

.finance-bar-interest-other {
    background-color: #008000a1;
    border-radius: 6px 0 0 6px;
    left: 0;
}

.finance-bar-repayment-other {
    background-color: green;
    border-radius: 0 6px 6px 0;
}

.finance-bar-label {
    left: 5px;
    top: -50px;
    color: black;
    font-size: 14px;
    z-index: 1;
}

/* Pop-up Dialog */
/* Styles für den Investitionskosten-Dialog */
.finance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.finance-dialog {
    background-color: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}


.finance-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.finance-dialog-button {
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.finance-dialog-button.cancel {
    border: 1px solid #ffffff54;
    background-color: white;
    color: #64748b;
}

.finance-dialog-button.cancel:hover {
    background-color: #f1f5f9;
}

.finance-dialog-button.save {
    border: none;
    background-color: var(--primary-color);
    color: white;
}

.finance-dialog-button.save:hover {
    background-color: var(--primary-color);
}

.finance-dialog-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ffffff54;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    margin-bottom: 24px;
}

.finance-dialog h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #1e293b;
    font-family: Arial, sans-serif;
    font-size: 20px;
}

/* Header für die Investitionsdetails */
.investment-details-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.5fr 0.5fr;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.header-cell {
    font-size: 14px;
    color: #64748b;
    padding-left: 10px;
}

/* Zusätzliche Styles für die Investitionsdetails */
.investment-details-dialog {
    width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.investment-details-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.investment-detail-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.5fr 0.5fr;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.investment-detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 14px;
    color: #ebebeb;
    padding: 10px 15px;
    min-width: 200px;
}

.detail-value {
    font-size: 14px;
    color: var(--header-color-light);
    text-align: right;
    padding: 10px;
    min-width: calc(100% - 200px);
}

.detail-edit {
    color: #64748b;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
}

.detail-edit:hover {
    color: var(--primary-color);
}

.total-row {
    background-color: rgba(59, 130, 246, 0.08);
    font-weight: bold;
    border-radius: 6px;
}

.total-row .detail-label,
.total-row .detail-value {
    font-weight: bold;
}

/* Styles für den 'Anschaffungskosten anzeigen' Button */
.finance-detail-button {
    background-color: #f1f5f9;
    border: 1px solid #ffffff54;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.finance-detail-button:hover {
    background-color: #e2e8f0;
}

.finance-detail-button svg {
    margin-right: 5px;
    height: 16px;
    width: 16px;
}

/* finance user Content*/

.tabUserContent {
    color: #333;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.financial-summary {
    margin-bottom: 15px;
    border-bottom: 1px solid #d3d3d3;
}


.summary-details {
    padding: 0;
}


.documents-header {
    padding: 10px 15px;
    background-color: var(--header-color-light);
    color: #000000;
    font-size: 18px;
    font-weight: 500;
}


.documents-list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.document-item {
    flex: 1 0 calc(50% - 10px);
    min-width: 120px;
    border: 1px solid #ffffff54;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.document-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.document-preview {
    height: 70px;
    background-color: #00000075;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ffffff54;
}

.document-preview svg {
    width: 40px;
    height: 40px;
}

.document-info {
    padding: 8px;
}

.document-name {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--header-color-light);
}

.document-type {
    font-size: 11px;
    color: #e3e3e3
}

.empty-state {
    padding: 15px;
    text-align: center;
    color: #e3e3e3
}

.document-download {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


/* Tab Left Dashboard Styles */
.tabLeftDashboard-wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: auto;
}

.tabLeftDashboard-headline {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 16px 0;
    color: #333;
}

.tabLeftDashboard-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.tabLeftDashboard-label {
    flex: 0 0 60%;
    font-weight: bold;
    color: #555;
}

.tabLeftDashboard-value {
    flex: 0 0 40%;
    text-align: right;
    color: #333;
}






/* table popup
 */

.side-panel {
    position: fixed;
    left: -390px;
    top: 120px;
    width: 390px;
    height: calc(100% - 170px);
    z-index: 1000;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.configurationPanel-container {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    margin-right: 30px;
    border-radius: 20px;
    padding-top: 0px;
    height: calc(100% - 80px);
    margin-top: 95px;
}

.side-panel.open {
    left: 30px;
}

.side-panel.collapsed {
    left: -360px;
}

.panel-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
    border-left: none;
    font-size: 25px;
}

.panel-content {
    height: 100%;
}

.plantGapLayoutContainer{
    position: relative;
    height: 400px;
    background: #fcfcfcad;
    border-radius: 20px;
}

.plantTableImage {
    background-image: url(/wp-content/plugins/energyExperts/assets/media/solarTable.png);
    width: 50px;
    height: 95px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}
/*
.plantGapOverlay {
    position: absolute;
    width: 330px;
    height: 400px;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 90%), linear-gradient(to bottom, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 95%);
    z-index: 1;
    pointer-events: none;
}*/

.plantGapContainerInner {
    position: absolute;
}

.plantGapContainerInner.left .plantTableImage {
    background-size: contain;
    background-repeat: no-repeat;
}

.plantGapContainerInner.right .plantTableImage {
    background-size: contain;
    background-repeat: no-repeat;
}

.plantGapContainerInner.middle .plantTableImage {
    background:url(/wp-content/plugins/energyExperts/assets/media/solarTable.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.plantTableMoveRow {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    border-radius: 50%;
    cursor: pointer;
    transition: .5s;
}

#plantTableMoveRowLeft, #plantTableMoveRowRight{
    background: #fff url(/wp-content/plugins/energyExperts/assets/media/drag-left-right.svg) center no-repeat;
    background-size: 25px;
}

#plantTableMoveRowUp, #plantTableMoveRowDown{
    background: #fff url(/wp-content/plugins/energyExperts/assets/media/drag-up-down.svg) center no-repeat;
    background-size: 25px;
}

.plantTableMoveRow:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.plantGapContainerInner.left {
    left: 90px;
    transform: translate(-50%, -50%);
    top: 50%;
}

.plantGapContainerInner.middle {
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

#plantTableImageMiddleTop {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, -50%);
}

#plantTableImageMiddleMiddle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#plantTableImageMiddleBottom {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.plantGapContainerInner.right {
    transform: translate(-50%, -50%);
    top: 50%;
    right: 40px;
}

#plantTableLeftRowTop, #plantTableLeftRowBottom, #plantTableRightRowTop, #plantTableRightRowBottom{
    margin-top: 5px;
    margin-bottom: 5px;
}

.meterDisplay {
    position: absolute;
    background-color: #00000080;
    width: 50px;
    color: white;
    font-size: 12px;
    text-align: center;
    margin-left: 1px;
    z-index: 2;
    border-radius: 5px;
}

#meterDisplay_up {
    transform: translate(-50%, 0px);
    left: 50%;
    top: 10px;
}

#meterDisplay_down {
    transform: translate(-50%, 0px);
    left: 50%;
    bottom: 10px;
}

#meterDisplay_right {
    transform: translate(0px, -50%);
    top: 50%;
    right: -10px;
}

#meterDisplay_left {
    transform: translate(0px, -50%);
    top: 50%;
    left: -10px;
}


/*sidepanel Health*/

.constructionHealthPanel-container {
    position: absolute;
    top: 0;
    width: calc(100% - 30px);
    left: 0;
    z-index: 9;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

/* KPI Dashboard Styles - Option B: Integrated Minimalism */
.constructionHealthPanel-kpi-integrated {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    padding: 20px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}

.constructionHealthPanel-kpi-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.constructionHealthPanel-kpi-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.constructionHealthPanel-kpi-circle svg {
    width: 32px;
    height: 32px;
    transform: rotate(-90deg);
}

.constructionHealthPanel-kpi-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 3;
}

.constructionHealthPanel-kpi-circle-progress {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.8s ease;
}

.constructionHealthPanel-kpi-text {
    min-width: 0;
    flex: 1;
}

.constructionHealthPanel-kpi-value {
    font-size: 12px;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.constructionHealthPanel-kpi-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* KWh Mini Pill */
.constructionHealthPanel-kwh-mini {
    background: rgba(255, 255, 255, 0.3);
    padding: 8px 10px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    flex-shrink: 0;
}

.constructionHealthPanel-kwh-value {
    font-size: 11px;
    font-weight: 600;
    color: white;
    display: block;
    line-height: 1;
    margin-bottom: 1px;
}

.constructionHealthPanel-kwh-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
    line-height: 1;
}

/* Farbschema für die verschiedenen KPIs */
.constructionHealthPanel-kpi-item.constructionHealthPanel-roi .constructionHealthPanel-kpi-circle-progress {
    stroke: #34c759;
}

.constructionHealthPanel-kpi-item.constructionHealthPanel-mwp .constructionHealthPanel-kpi-circle-progress {
    stroke: #007aff;
}

.constructionHealthPanel-kpi-item.constructionHealthPanel-ha .constructionHealthPanel-kpi-circle-progress {
    stroke: #ff9500;
}

/* Responsive adjustments */
@media (max-width: 380px) {
    .constructionHealthPanel-kpi-value {
        font-size: 12px;
    }
    .constructionHealthPanel-kpi-label {
        font-size: 9px;
    }
    .constructionHealthPanel-kpi-circle {
        width: 28px;
        height: 28px;
    }
    .constructionHealthPanel-kpi-circle svg {
        width: 28px;
        height: 28px;
    }
    .constructionHealthPanel-kwh-value {
        font-size: 10px;
    }
    .constructionHealthPanel-kwh-label {
        font-size: 7px;
    }
}



.panel-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    margin-top: 20px;
}

.panel-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.plantGapLayoutNorthArrow {
    position: absolute;
    width: 30px;
    height: 30px;
    right: calc(10% + 10px);
    z-index: 1;
    top: 65px;
}

.panel-section h3 {
    font-size: 16px;
    margin: 0 0 15px 5%;
    color: var(--header-color-light);
    padding: 0px;
    width: 90%;
}

.panel-section h4 {
    font-size: 12px;
    margin: 0 0 8px 0;
    color: #0f172a;
    padding: 0px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-left: 5%;
}

.info-item span {
    font-size: 12px;
    color: var(--header-color-light);
    margin-bottom: 3px;
}

.info-item strong {
    font-size: 14px;
    color: var(--header-color-light);
}

.panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-Background{
    background: #fcfcfcad;
    border-radius: 20px;
    border: 0.5px solid #00000012;
    width: 90%;
    margin: auto;
}

.panel-actions button {
    flex: 1;
    min-width: 120px;
    padding: 8px 12px;
    background-color: #353f98;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s;
}

.panel-actions button:hover {
    background-color: #2a317c;
}

.headland-visual {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.headland-outer {
    width: 180px;
    height: 180px;
    background-color: #6a4a3499;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.headland-inner {
    background-color: #fafafa;
    background-image: url(/wp-content/plugins/energyExperts/assets/media/solarTables.png);
    transition: all 0.3s ease, transform 0.3s ease;
    position: absolute;
    border-radius: 20px;
    background-size: contain;
}

.headland-controls {
    text-align: center;
}

.headland-slider-container {
    width: 90%;
    padding: 0 5%;
}

.headland-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    outline: none;
    opacity: 0.8;
    transition: opacity 0.2s;
    cursor: pointer;
}

.headland-slider:hover {
    opacity: 1;
}

.headland-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
}

.headland-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: none;
}

.headland-value {
    margin-top: 10px;
    font-weight: bold;
    color: var(--header-color-light);
}

/*polygone drawing*/


:root {
    --polygoneDraw-primary: var(--primary-color);
    --polygoneDraw-primary-dark: var(--primary-color);
    --polygoneDraw-success: #28a745;
    --polygoneDraw-success-dark: #218838;
    --polygoneDraw-danger: #dc3545;
    --polygoneDraw-danger-dark: #c82333;
    --polygoneDraw-warning: #ffc107;
    --polygoneDraw-info: #17a2b8;
    --polygoneDraw-secondary: #6c757d;
    --polygoneDraw-light: #f8f9fa;
    --polygoneDraw-dark: #343a40;

    --polygoneDraw-border: #e1e5e9;
    --polygoneDraw-border-hover: var(--secondary-color);
    --polygoneDraw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --polygoneDraw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --polygoneDraw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);

    --polygoneDraw-radius-sm: 4px;
    --polygoneDraw-radius-md: 8px;
    --polygoneDraw-radius-lg: 12px;

    --polygoneDraw-transition: all 0.2s ease;
    --polygoneDraw-transition-fast: all 0.1s ease;
}


.polygoneDraw-types-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.polygoneDraw-type-section {

    padding: 15px;
}


.polygoneDraw-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.polygoneDraw-type-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--header-color-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.polygoneDraw-type-header h4::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--polygoneDraw-primary), var(--polygoneDraw-info));
    border-radius: 1px;
}

.polygoneDraw-add-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--polygoneDraw-primary), var(--polygoneDraw-primary-dark));
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--polygoneDraw-transition);
    box-shadow: var(--polygoneDraw-shadow-sm);
    position: relative;
    overflow: hidden;
}

.polygoneDraw-add-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.polygoneDraw-add-btn:hover {
    background: linear-gradient(135deg, var(--polygoneDraw-primary-dark), var(--secondary-color));
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px var(--secondary-color-50);
}

.polygoneDraw-add-btn:hover::before {
    left: 100%;
}

.polygoneDraw-add-btn:active {
    transform: translateY(0) scale(1);
    box-shadow: var(--polygoneDraw-shadow-sm);
}




/* ============================================================================
   POLYGON TILES
   ============================================================================ */

.polygoneDraw-tiles {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 50px;
    max-height: none;
    overflow-y: auto;
    padding: 0px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.polygoneDraw-tiles::-webkit-scrollbar {
    width: 4px;
}

.polygoneDraw-tiles::-webkit-scrollbar-track {
    background: transparent;
}

.polygoneDraw-tiles::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.polygoneDraw-empty-state {
    padding: 40px 20px;
    text-align: center;
    font-size: 15px;
    color: #86868b;
    font-weight: 400;
}

/* ============================================================================
   POLYGON CARD - REFINED
   ============================================================================ */

.polygon-card {
    background: rgb(224 224 224 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
}

.polygon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--polygon-color, #d1d1d6);
    opacity: 0.8;
}

.polygon-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* ============================================================================
   HEADER SECTION
   ============================================================================ */

.polygon-header {
    padding: 16px 16px 12px 16px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.color-picker {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    background: transparent;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.color-picker:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
    border-radius: 50%;
}

.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.title-edit {
    border: none!important;
    background: transparent!important;
    font-size: 17px;
    font-weight: 600;
    color: #ededed !important;
    letter-spacing: -0.022em;
    width: calc(100% - 32px);
    padding: 0!important;
    outline: none;
    font-family: inherit;
    line-height: 1.3;
}

.title-edit:focus {
    background: rgba(0, 122, 255, 0.04);
    border-radius: 6px;
    padding: 4px 6px;
}

/* ============================================================================
   SPECS SECTION
   ============================================================================ */

.polygon-specs {
    padding: 0 16px 16px 16px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    min-height: 32px;
}

.spec-label {
    font-size: 15px;
    font-weight: 400;
    color: #e0e0e0;
    flex: 1;
}

.spec-value {
    font-size: 15px;
    font-weight: 500;
    color: #e0e0e0;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
    width: 60px;
    padding: 0px 6px;
}

.spec-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.spec-input {
    border: none;
    background: rgba(0, 0, 0, 0.2);
    font-size: 15px;
    font-weight: 500;
    color: #e0e0e0;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
    width: 60px;
    text-align: left;
    outline: none;
    font-family: inherit;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.spec-input:focus {
    background: rgba(0, 122, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.2);
}

.spec-unit {
    font-size: 15px;
    font-weight: 400;
    color: #cfcfcf;
    min-width: 40px;
}

/* ============================================================================
   HARDWARE SECTION - KOMPAKT
   ============================================================================ */

.hardware-section {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background: rgba(0, 0, 0, 0.015);
}

.hardware-compact {
    display: flex;
    padding: 12px 16px;
    gap: 16px;
}

.hardware-item {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.hardware-item:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 122, 255, 0.2);
    transform: translateY(-1px);
}

.hardware-icon {
    font-size: 16px;
    margin-bottom: 2px;
}

.hardware-value {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    font-feature-settings: 'tnum';
    line-height: 1;
    margin-bottom: 2px;
}

.hardware-text {
    font-size: 11px;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.expand-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.expand-toggle:hover {
    background: rgba(0, 0, 0, 0.02);
}

.expand-text {
    font-size: 13px;
    font-weight: 500;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.expand-icon {
    margin-left: 6px;
    font-size: 10px;
    color: #e0e0e0;
    transition: transform 0.2s ease;
}

.expanded .expand-icon {
    transform: rotate(180deg);
}

.hardware-expandable {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.hardware-expandable.expanded {
    max-height: 200px;
}

.hardware-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 16px;
}

/* ============================================================================
   ACTION BUTTONS - MINIMAL
   ============================================================================ */

.polygon-actions {
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    gap: 8px;
}

.btn-edit,
.btn-delete {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: -0.01em;
}

.btn-edit {
    background: #1d1d1f;
    color: #ffffff;
}

.btn-edit:hover {
    background: #2c2c2e;
    transform: translateY(-1px);
}

.btn-delete {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.btn-delete:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}


.btn-save {
    background-color: #28a745 !important; /* Grün */
    color: white !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 400px) {
    .polygon-card {
        border-radius: 10px;
    }

    .polygon-header,
    .polygon-specs,
    .polygon-actions {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hardware-compact,
    .hardware-grid {
        padding-left: 12px;
        padding-right: 12px;
    }
}
















/* ============================================================================
   POPUP OVERLAY & MODAL
   ============================================================================ */
.polygoneDraw-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(8px);
    animation: polygoneDraw-fadeIn 0.3s ease;
}

@keyframes polygoneDraw-fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

.polygoneDraw-popup-content {
    background: white;
    border-radius: var(--polygoneDraw-radius-lg);
    width: 450px;
    max-width: 95vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--polygoneDraw-shadow-lg);
    animation: polygoneDraw-slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid var(--polygoneDraw-primary);
}

@keyframes polygoneDraw-slideIn {
    from {
        transform: translateY(-50px) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.polygoneDraw-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 2px solid var(--polygoneDraw-border);
    background: linear-gradient(135deg, var(--polygoneDraw-light), #e9ecef);
}

.polygoneDraw-popup-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--polygoneDraw-dark);
    display: flex;
    align-items: center;
}

.polygoneDraw-popup-header h3::before {
    content: '✏️';
    margin-right: 10px;
    font-size: 18px;
}

.polygoneDraw-popup-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--polygoneDraw-secondary);
    padding: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--polygoneDraw-transition);
}

.polygoneDraw-popup-close:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--polygoneDraw-danger);
    transform: rotate(180deg) scale(1.1);
}

.polygoneDraw-popup-body {
    padding: 25px;
    max-height: 60vh;
    overflow-y: auto;
}

/* ============================================================================
   FORM ELEMENTS
   ============================================================================ */
.polygoneDraw-form-group {
    margin-bottom: 20px;
    position: relative;
}

.polygoneDraw-form-group:last-child {
    margin-bottom: 0;
}

.polygoneDraw-form-group label,
.polygoneDraw-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--polygoneDraw-dark);
    font-size: 14px;
    position: relative;
}

.polygoneDraw-form-group input,
.polygoneDraw-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--polygoneDraw-border);
    border-radius: var(--polygoneDraw-radius-md);
    font-size: 14px;
    box-sizing: border-box;
    transition: var(--polygoneDraw-transition);
    background: white;
    font-family: inherit;
}

.polygoneDraw-form-group input:focus,
.polygoneDraw-input:focus {
    outline: none;
    border-color: var(--polygoneDraw-primary);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #f0f8ff);
    transform: translateY(-1px);
}

.polygoneDraw-form-group input:hover:not(:focus),
.polygoneDraw-input:hover:not(:focus) {
    border-color: var(--polygoneDraw-border-hover);
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-form-group input[type="color"] {
    height: 50px;
    padding: 5px;
    cursor: pointer;
}

.polygoneDraw-form-group input[type="number"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a.5.5 0 0 1 .5.5v7H14a.5.5 0 0 1 0 1H8.5v7a.5.5 0 0 1-1 0V8.5H1a.5.5 0 0 1 0-1h6.5V.5A.5.5 0 0 1 8 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

#polygoneDraw-type-display,
.polygoneDraw-type-display {
    font-weight: 700;
    color: var(--polygoneDraw-primary);
    padding: 14px 18px;
    background: linear-gradient(135deg, #e7f3ff, #cce7ff);
    border-radius: var(--polygoneDraw-radius-md);
    display: inline-block;
    border: 2px solid var(--polygoneDraw-border-hover);
    font-size: 14px;
    min-width: 80px;
    text-align: center;
    box-shadow: inset 0 1px 3px rgba(0, 123, 255, 0.1);
}

/* ============================================================================
   POPUP FOOTER & BUTTONS
   ============================================================================ */
.polygoneDraw-popup-footer {
    padding: 20px 25px;
    border-top: 2px solid var(--polygoneDraw-border);
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.polygoneDraw-draw-button,
.polygoneDraw-cancel-button {
    border: none;
    padding: 12px 24px;
    border-radius: var(--polygoneDraw-radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--polygoneDraw-transition);
    min-width: 120px;
    position: relative;
    overflow: hidden;
}

.polygoneDraw-draw-button {
    background: linear-gradient(135deg, var(--polygoneDraw-success), #20c997);
    color: white;
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-draw-button:hover {
    background: linear-gradient(135deg, var(--polygoneDraw-success-dark), #1e7e34);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.polygoneDraw-cancel-button {
    background: linear-gradient(135deg, var(--polygoneDraw-secondary), #5a6268);
    color: white;
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-cancel-button:hover {
    background: linear-gradient(135deg, #5a6268, #495057);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

.polygoneDraw-draw-button:active,
.polygoneDraw-cancel-button:active {
    transform: translateY(0);
    box-shadow: var(--polygoneDraw-shadow-sm);
}

/* ============================================================================
   INFO PANELS
   ============================================================================ */
.polygoneDraw-drawing-info,
.polygoneDraw-editing-info {
    position: fixed;
    top: 20px;
    background: white;
    border-radius: var(--polygoneDraw-radius-lg);
    padding: 20px;
    box-shadow: var(--polygoneDraw-shadow-lg);
    z-index: 9999;
    min-width: 300px;
    max-width: 400px;
    border: 3px solid var(--polygoneDraw-primary);
}

.polygoneDraw-drawing-info {
    right: 20px;
    border-color: var(--polygoneDraw-primary);
    animation: polygoneDraw-slideInRight 0.4s ease;
}

.polygoneDraw-editing-info {
    left: 20px;
    border-color: var(--polygoneDraw-success);
    animation: polygoneDraw-slideInLeft 0.4s ease;
}

@keyframes polygoneDraw-slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes polygoneDraw-slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.polygoneDraw-drawing-info-content,
.polygoneDraw-editing-info-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}

.polygoneDraw-drawing-info-content > div:first-child,
.polygoneDraw-editing-info-content > div:first-child {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 16px;
    text-align: center;
    padding: 10px;
    border-radius: var(--polygoneDraw-radius-md);
}

.polygoneDraw-drawing-info-content > div:first-child {
    color: var(--polygoneDraw-primary);
    background: linear-gradient(135deg, #e7f3ff, #cce7ff);
}

.polygoneDraw-editing-info-content > div:first-child {
    color: var(--polygoneDraw-success);
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
}

.polygoneDraw-drawing-info-content > div,
.polygoneDraw-editing-info-content > div {
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.polygoneDraw-cancel-draw-btn,
.polygoneDraw-stop-edit-btn {
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--polygoneDraw-radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: var(--polygoneDraw-transition);
    width: 100%;
}

.polygoneDraw-cancel-draw-btn {
    background: linear-gradient(135deg, var(--polygoneDraw-danger), #e85d75);
    color: white;
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-cancel-draw-btn:hover {
    background: linear-gradient(135deg, var(--polygoneDraw-danger-dark), #a71e2a);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.polygoneDraw-stop-edit-btn {
    background: linear-gradient(135deg, var(--polygoneDraw-success), #20c997);
    color: white;
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-stop-edit-btn:hover {
    background: linear-gradient(135deg, var(--polygoneDraw-success-dark), #1e7e34);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}


/* ============================================================================
   LOADING & STATES
   ============================================================================ */
.polygoneDraw-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.polygoneDraw-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--polygoneDraw-light);
    border-top: 3px solid var(--polygoneDraw-primary);
    border-radius: 50%;
    animation: polygoneDraw-spin 1s linear infinite;
    z-index: 10;
}

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

.polygoneDraw-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.polygoneDraw-error {
    border-color: var(--polygoneDraw-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

.polygoneDraw-success {
    border-color: var(--polygoneDraw-success) !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1) !important;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
.polygoneDraw-hidden {
    display: none !important;
}

.polygoneDraw-invisible {
    visibility: hidden;
}

.polygoneDraw-no-scroll {
    overflow: hidden;
}

.polygoneDraw-text-center {
    text-align: center;
}

.polygoneDraw-text-left {
    text-align: left;
}

.polygoneDraw-text-right {
    text-align: right;
}

.polygoneDraw-mb-0 { margin-bottom: 0 !important; }
.polygoneDraw-mb-1 { margin-bottom: 5px !important; }
.polygoneDraw-mb-2 { margin-bottom: 10px !important; }
.polygoneDraw-mb-3 { margin-bottom: 15px !important; }

.polygoneDraw-mt-0 { margin-top: 0 !important; }
.polygoneDraw-mt-1 { margin-top: 5px !important; }
.polygoneDraw-mt-2 { margin-top: 10px !important; }
.polygoneDraw-mt-3 { margin-top: 15px !important; }

/* ============================================================================
   ANIMATIONS & KEYFRAMES
   ============================================================================ */
@keyframes polygoneDraw-bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -15px, 0);
    }
    70% {
        transform: translate3d(0, -8px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes polygoneDraw-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes polygoneDraw-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.polygoneDraw-bounce {
    animation: polygoneDraw-bounce 1s ease-in-out;
}

.polygoneDraw-pulse {
    animation: polygoneDraw-pulse 2s infinite;
}

.polygoneDraw-shake {
    animation: polygoneDraw-shake 0.5s ease-in-out;
}



/* ============================================================================
   CUSTOM SCROLLBARS FOR ALL ELEMENTS
   ============================================================================ */
.polygoneDraw-popup-body::-webkit-scrollbar,
.polygoneDraw-tiles::-webkit-scrollbar {
    width: 8px;
}

.polygoneDraw-popup-body::-webkit-scrollbar-track,
.polygoneDraw-tiles::-webkit-scrollbar-track {
    background: var(--polygoneDraw-light);
    border-radius: 4px;
}

.polygoneDraw-popup-body::-webkit-scrollbar-thumb,
.polygoneDraw-tiles::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--polygoneDraw-primary), var(--polygoneDraw-primary-dark));
    border-radius: 4px;
    border: 1px solid var(--polygoneDraw-border);
}

.polygoneDraw-popup-body::-webkit-scrollbar-thumb:hover,
.polygoneDraw-tiles::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--polygoneDraw-primary-dark), #004085);
}

/* ============================================================================
   FINAL POLISH & MICRO-INTERACTIONS
   ============================================================================ */
.polygoneDraw-tile-name-input:invalid {
    border-color: var(--polygoneDraw-danger);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.polygoneDraw-tile-name-input:valid {
    border-color: var(--polygoneDraw-success);
}

.polygoneDraw-form-group input:required:invalid {
    border-color: var(--polygoneDraw-danger);
}

.polygoneDraw-form-group input:required:valid {
    border-color: var(--polygoneDraw-success);
}


/* Enhanced focus indicators for better accessibility */
.polygoneDraw-tile:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
    border-color: var(--polygoneDraw-primary);
}

/* Smooth transitions for all interactive elements */
* {
    -webkit-tap-highlight-color: transparent;
}

.polygoneDraw-tile *,
.polygoneDraw-popup *,
.polygoneDraw-add-btn,
.polygoneDraw-drawing-info *,
.polygoneDraw-editing-info * {
    transition: var(--polygoneDraw-transition);
}


.drawing-info-panel, .editing-info-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border: 2px solid var(--primary-color, #007bff);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-width: 300px;
    font-family: inherit;
}

.drawing-info-panel .info-content h3,
.editing-info-panel .info-content h3 {
    margin: 0 0 10px 0;
    color: var(--primary-color, #007bff);
    font-size: 16px;
}

.drawing-info-panel .info-content p,
.editing-info-panel .info-content p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.4;
}

.drawing-info-panel button,
.editing-info-panel button {
    background: var(--primary-color, #007bff);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
}

.drawing-info-panel button:hover,
.editing-info-panel button:hover {
    opacity: 0.9;
}
/* Basis Polygon Tile */
.polygon-tile {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 0.5px solid #00000012;
}

/* Hauptbereich des Tiles */
.polygon-tile .tile-main {
    margin-bottom: 10px;
}

/* Container für Name und Farbe nebeneinander */
.polygon-tile .tile-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Name Input */
.polygon-tile .polygon-name {
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 600;
}

.polygon-tile .polygon-name:focus {
    outline: none;
    border-bottom: 1px solid #6e6e6e;
}

/* Farb-Input */


.polygon-color {
    width: 15px;
    height: 15px;

    /* Rund machen */
    border-radius: 50%;

    /* Kein sichtbarer Rahmen */
    border: none;
    outline: none;

    /* Optional: Schatten für bessere Sichtbarkeit */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 0;

    /* Entfernt den Standard-Hintergrund auf manchen Browsern */
    background: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Speziell für Webkit-Browser (Chrome, Safari) */
.polygon-color::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}
.polygon-color::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

/* Für Firefox */
.polygon-color::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}


/* Info-Bereich */
.polygon-tile .tile-info {
    flex: 1;
}

/* Meta-Informationen untereinander */
.polygon-tile .tile-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #666;
}

/* Höhe-Container mit Input */
.polygon-tile .tile-height-container {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.polygon-tile .polygon-height {
    width: 50px;
    padding: 0px;
    border: none;
    background: none;
}

.polygon-tile .polygon-height:focus {
        outline: none;
        border-bottom: 1px solid #6e6e6e;
}

.polygon-tile .polygon-maxmwp{
    width: 50px;
    padding: 0px;
    border: none;
    background: none;
}

.polygon-tile .polygon-maxmwp:focus {
    outline: none;
    border-bottom: 1px solid #6e6e6e;
}

/* Dimensionen Info */
.polygon-tile .tile-dimensions {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}


/* Action Buttons */
.polygon-tile .tile-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

    .polygon-tile .tile-actions button {
        padding: 5px 20px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.8);
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.2s ease;
        color: #e9e5e5;
        border: none;
    }

button.polygoneDraw-tile-delete {
    background-color: #c6c6c6 !important;
    color: black !important;
}


.polygon-tile .polygoneDraw-tile-edit:hover {
    transform: scale(1.05);
}

.polygon-tile .polygoneDraw-tile-delete:hover {
    transform: scale(1.05);
}

/* Dashboard ansicht */

/* Solar Dashboard CSS - Complete */
#heroViewPdf{
    padding-bottom: 0px;
}

/* PDF Button */
.dashboardPdf-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(100% + 44px);
    height: 48px;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--header-color-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: none;
    overflow: hidden;
    outline: none;
    margin-left: -22px;
    margin-bottom: -2px;
}


.dashboardPdf-button:active {
    transform: translateY(-1px);
    transition: all 0.1s ease;
}

/* Verstärkter Lade-Zustand */
.dashboardPdf-button.processing {
    cursor: not-allowed;
}


.dashboardPdf-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.dashboardPdf-content:hover {
    transform: scale(1.05);
}

.dashboardPdf-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.dashboardPdf-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.3s ease;
}

/* Minimal progress circle */
.dashboardPdf-progress-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    margin-left: -9px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboardPdf-progress-circle.visible {
    opacity: 1;
}

.dashboardPdf-progress-circle svg {
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
}

.dashboardPdf-progress-circle-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 2;
}

.dashboardPdf-progress-circle-fill {
    fill: none;
    stroke: #3fa14d;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 50.27;
    stroke-dashoffset: 50.27;
    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prominenter Fortschrittsbalken */
.dashboardPdf-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #3fa14d, #00d4aa);
    width: 0%;
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    box-shadow: 0 0 8px rgba(63, 161, 77, 0.3);
    border-radius: 0px 0px 50px 50px;
}

.dashboardPdf-progress-bar.visible {
    opacity: 1;
}

/* Animierter Glanz-Effekt auf dem Fortschrittsbalken */
.dashboardPdf-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%);
    animation: progress-shine 2s ease-in-out infinite;
    border-radius: inherit;
}

@keyframes progress-shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Detaillierte Fortschrittsphasen mit 2s Mindestdauer */
.dashboardPdf-button.phase-1 .dashboardPdf-content {
    opacity: 0.7;
}

.dashboardPdf-button.phase-2 .dashboardPdf-content {
    opacity: 0.7;
}

.dashboardPdf-button.phase-3 .dashboardPdf-content {
    opacity: 0.7;
}

.dashboardPdf-button.phase-4 .dashboardPdf-content {
    opacity: 0.7;
}

/* Präziser Fortschrittsbalken - jede Phase 2s */
.dashboardPdf-button.phase-1 .dashboardPdf-progress-bar {
    width: 25%;
}

.dashboardPdf-button.phase-2 .dashboardPdf-progress-bar {
    width: 50%;
}

.dashboardPdf-button.phase-3 .dashboardPdf-progress-bar {
    width: 75%;
}

.dashboardPdf-button.phase-4 .dashboardPdf-progress-bar {
    width: 95%;
}

/* Präziser Progress Circle - synchron mit Balken */
.dashboardPdf-button.phase-1 .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 37.7; /* 25% */
}

.dashboardPdf-button.phase-2 .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 25.1; /* 50% */
}

.dashboardPdf-button.phase-3 .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 12.6; /* 75% */
}

.dashboardPdf-button.phase-4 .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 2.5; /* 95% */
}

/* Success state */
.dashboardPdf-button.success {
    color: var(--header-color-light);
}


.dashboardPdf-button.success .dashboardPdf-content {
    opacity: 1;
}

.dashboardPdf-button.success .dashboardPdf-progress-bar {
    opacity: 0;
    width: 100%;
}

.dashboardPdf-button.success .dashboardPdf-progress-circle {
    opacity: 0;
}

.dashboardPdf-button.success .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 0;
}

.dashboardPdf-button.success .dashboardPdf-icon {
    opacity: 1;
}












.dashboardView-container {
    width: 100vw;
    height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #fff;
    overflow: hidden;
    position: relative;
    font-weight: 300;
    letter-spacing: -0.4px;
    pointer-events: none;
}

.dashboardView-content {
    position: relative;
    z-index: 10;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2%;
    box-sizing: border-box;
    padding-top:120px;
    pointer-events: none;
    padding-bottom: 0px;
}


@keyframes dashboardView-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

.dashboardView-main {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 2fr minmax(250px, 1fr);
    grid-template-areas: "left center right";
    gap: 40px;
    flex: 1;
    align-items: start;
    min-height: 0;
    overflow: scroll;
}

.dashboardView-left-panel {
    grid-area: left;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    min-height: 100%;
    justify-content: center;
}

.dashboardView-center-panel {
    grid-area: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 60px;
    position: relative;
    min-height: 100%;
}

.dashboardView-right-panel {
    grid-area: right;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    min-height: 100%;
    justify-content: center;
}

.dashboardView-metrics-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dashboardView-metric {
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    padding: 10px 25px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.dashboardView-metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #007AFF, #30D158, #FF9500);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.dashboardView-metric:hover {
    transform: scale(1.05);
    background: rgb(0 9 18 / 85%);
}

.dashboardView-metric:hover::before {
    opacity: 1;
}

.dashboardView-metric-label {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.dashboardView-metric-value {
    font-size: 36px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.8px;
    transition: all 0.3s ease;
}

.dashboardView-metric-unit {
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    font-weight: 300;
    margin-left: 5px;
}

.dashboardView-metric-change {
    font-size: 13px;
    color: #30D158;
    margin-top: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.dashboardView-metric.financial .dashboardView-metric-value {
    color: #30D158;
}

.dashboardView-metric.performance .dashboardView-metric-value {
    color: #09e3ff;
}

.dashboardView-metric.efficiency .dashboardView-metric-value {
    color: #FF9500;
}

.dashboardView-panel {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 32px 28px;
    transition: all 0.4s ease;
}

.dashboardView-panel:hover {
    transform: scale(1.05);
    background: rgb(0 9 18 / 85%);
}

.dashboardView-panel-title {
    font-size: 20px;
    color: #fff;
    margin-bottom: 24px;
    font-weight: 500;
    letter-spacing: -0.4px;
}

.dashboardView-system-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dashboardView-system-row:last-child {
    border-bottom: none;
}

.dashboardView-system-label {
    font-size: 15px;
    color: rgba(255,255,255,0.9);
    font-weight: 400;
}

.dashboardView-system-value {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: right;
}

.dashboardView-center-info {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 32px;
    text-align: center;
    max-width: 400px;
    margin-bottom: 50px;
}

.dashboardView-plant-status {
    font-size: 16px;
    color: #30D158;
    margin-bottom: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.dashboardView-plant-name {
    font-size: 24px;
    color: #fff;
    margin-bottom: 16px;
    font-weight: 300;
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
    min-width: 300px;
}

.dashboardView-coordinates {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    font-family: 'SF Mono', Monaco, monospace;
    letter-spacing: 0.2px;
    transition: all 0.3s ease;
}

.dashboardView-large-metric {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 20px 32px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dashboardView-large-metric:hover {
    transform: scale(1.05);
    background: rgb(0 9 18 / 85%);
}

.dashboardView-large-metric-value {
    font-size: 44px;
    font-weight: 100;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1.6px;
    transition: all 0.3s ease;
}

.dashboardView-large-metric-label {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    font-weight: 400;
    letter-spacing: -0.2px;
}

.dashboardView-fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: dashboardView-fadeIn 0.8s ease forwards;
    background: rgb(0 9 18 / 60%);
    /*pointer-events: all;*/
}

#heroViewPdf{
    pointer-events: all;
}

@keyframes dashboardView-fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Value Update Animation */
.dashboardView-value-updating {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.dashboardView-value-updated {
    transform: scale(1);
    transition: transform 0.2s ease;
}

/* Slider Styles - Integration mit bestehenden Slidern */
.slider-container {
    position: relative;
    z-index: 15;
    margin-top: 40px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 24px;
}

.timeMonthLabel {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    font-weight: 500;
    margin-top: 12px;
    display: block;
    text-align: center;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .dashboardView-main {
        grid-template-columns: minmax(250px, 1fr) 1.5fr minmax(250px, 1fr);
        gap: 32px;
    }

}

@media (max-width: 1000px) {
    .dashboardView-main {
        grid-template-columns: minmax(250px, 1fr) 1fr minmax(250px, 1fr);
        gap: 32px;
    }

}

@media (max-width: 980px) {
    .dashboardView-main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "center"
            "left"
            "right";
        gap: 32px;
    }

    .dashboardView-metrics-column {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 24px;
    }

    .dashboardView-center-info {
        margin-bottom: 0px;
    }

    .dashboardView-center-panel {
        padding-bottom: 0px;
        flex-direction: row;
        justify-content: center;
        gap: 24px;
        min-height: auto;
    }

    .dashboardView-large-metric{
        min-width: 350px;
    }
    .dashboardView-panel {
        min-width: 350px;
    }

    .dashboardView-left-panel, .dashboardView-right-panel {
        flex-direction: row;
        height: max-content;

    }
}

@media (max-width: 768px) {


    .dashboardView-metrics-column {
        grid-template-columns: 1fr;
    }

    .dashboardView-main {
        gap: 24px;
    }

    .dashboardView-large-metric-value {
        font-size: 48px;
    }
}

@media (max-width: 480px) {

    .dashboardView-metric {
        padding: 24px 20px;
    }

    .dashboardView-panel {
        padding: 24px 20px;
    }

    .dashboardView-large-metric-value {
        font-size: 40px;
    }

    .dashboardView-metric-value {
        font-size: 28px;
    }
}