html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#main-container {
margin: 0;
padding: 0;
overflow-x: hidden;
}

.theme-light body {
    background-color: #FFFFFF;
}

.theme-dark body {
    background-color: #1A202C;
}

#toggle-theme {
transition: transform 0.2s, background-color 0.2s;
}

#toggle-theme:hover {
transform: scale(1.1);
background-color: #6B7280 !important; /* Leicht helleres Grau */
}

.graph-shell {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    margin-top: 20px;
}

.graph-shell .js-plotly-plot,
.graph-shell .plot-container,
.dashboard-graph {
    height: 100vh;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    border: 2px solid var(--panel-border-color, #ccc);
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.map-shell-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.map-frame {
    width: 100%;
    height: 60vh;
    border: 2px solid var(--panel-border-color, #ccc);
    border-radius: 10px;
    display: block;
    box-sizing: border-box;
}

.content-shell {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    margin-top: 20px;
}

.content-text {
    text-align: center;
    font-size: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.content-text-spaced {
    margin-top: 20px;
    margin-bottom: 20px;
}

.status-text {
    text-align: center;
    font-size: 16px;
}

.info-panel {
    text-align: center;
    font-size: 16px;
    max-width: 800px;
    margin: 20px auto;
    border: 2px solid var(--panel-border-color, #ccc);
    border-radius: 10px;
    padding: 15px;
}

.logo-shell {
    text-align: center;
}

.app-logo {
    height: 120px;
    margin-bottom: 10px;
}

.page-title {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 100px;
}

.ampel-shell {
    margin-top: 20px;
}

.spacer-sm {
    height: 10px;
}

.spacer-md {
    height: 30px;
}

.spacer-lg {
    height: 50px;
}

.energy-flow-stage {
    position: relative;
    height: 200px;
}

.energy-flow-container {
    max-width: 400px;
    margin: 0 auto;
    padding-top: 35px;
    margin-top: 20px;
    border: 2px solid var(--panel-border-color, #ccc);
    border-radius: 10px;
}

.energy-line {
    position: absolute;
    border-top: 2px dashed #888;
    transform-origin: left center;
    z-index: 1;
}

.energy-line-pv-verbrauch {
    top: 20px;
    left: 50px;
    width: 172px;
    transform: rotate(54.46deg);
}

.energy-line-netz-verbrauch {
    top: 20px;
    left: 250px;
    width: 172px;
    transform: rotate(125.54deg);
}

.energy-line-pv-netz {
    top: 20px;
    left: 50px;
    width: 200px;
}

.section-divider {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 2px solid var(--panel-border-color, #ccc);
}

.section-header-instructions {
    text-align: center;
    margin-top: 40px;
}

.section-header-xl {
    text-align: center;
    margin-top: 80px;
}

.section-header-lg {
    text-align: center;
    margin-top: 60px;
}

.selector-shell {
    text-align: center;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.legend-chip {
    display: inline-block;
    width: 20px;
    height: 10px;
    margin-right: 10px;
}

.legend-chip-eigenverbrauch {
    background-color: rgba(0, 200, 0, 0.3);
}

.legend-chip-ueberschuss {
    background-color: rgba(255, 215, 0, 0.4);
}

.legend-chip-netzbezug {
    background-color: rgba(150, 150, 150, 0.4);
}

.footer-text {
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
}

.footer-text-primary {
    margin-bottom: 10px;
}

.admin-panel {
    max-width: 1200px;
}

.admin-login-row,
.admin-toolbar {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 15px;
}

.admin-input,
.admin-dropdown {
    min-width: 220px;
}

.admin-button {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--panel-border-color, #ccc);
    background: #0f653e;
    color: #fff;
    cursor: pointer;
}

.admin-button-secondary {
    background: #555;
}

.admin-message,
.admin-user-info {
    margin-top: 12px;
}

/* Zählpunkte */

.counter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin-top: -10px;*/
}

.counter-box {
    display: flex;
    align-items: center;
    font-size: 36px;
    margin: 10px 0;
}

.counter-number {
    color: #0f653e;
    font-size: 36px;
    margin-right: 10px;
}

.counter-label {
    font-size: 18px;
}

/* Animation */
.fluss-dreieck {
    position: relative;
    width: 300px;
    height: 180px;
    margin: 0 auto 30px auto;
}

.label {
    position: absolute;
    font-weight: bold;
    font-size: 16px;
}

.label.pv {
    top: -30px;
    left: 10px; /* Angepasst an die neue Position von PV (x=50) */
}

.label.netz {
    top: -30px;
    right: 30px; /* Angepasst an die neue Position von Netz (x=250) */
}

.label.verbrauch {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}

.kugel {
    width: 12px;
    height: 12px;
    background-color: #FFD700;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform: translate(-50%, -50%);
    display: none; /* unsichtbar beim ersten laden */
}

.kugel-pv-verbrauch {
    offset-path: path('M50,30 L148,167'); /* Angepasst an neue Koordinaten */
    animation: moveAlongPath 3s infinite;
}

.kugel-netz-verbrauch {
    offset-path: path('M238,26 L142,160'); /* Angepasst an neue Koordinaten */
    animation: moveAlongPath 3s infinite;
}

.kugel-pv-netz {
    offset-path: path('M55,26 L255,26'); /* Angepasst an neue Koordinaten */
    animation: moveAlongPath 3s infinite;
}

@keyframes moveAlongPath {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

.wert {
    position: absolute;
    font-size: 14px;
}

.pv-wert {
    top: -10px;
    left: 25px;
}

.netz-wert {
    top: -10px;
    right: 20px;
}

.verbrauch-wert {
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
}