/* Grundlegendes Styling */
body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    padding: 20px;
    height: 100%;
    margin: 0;
}
h1, h2 {
    color: #333;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    background: #fff;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
}

.abstand-rechts {
    margin-right: 20px; /* Fügt 20 Pixel Abstand rechts neben dem Bild hinzu */
} 


/* Zeilen für Lang- und Kurzbetrieb */
.jalousie-row {
    display: flex-flow;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Icons */
.jalousie-container img {
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.plan-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; // nur Icons aktivieren, nicht den Hintergrund 
}


/* Neue Seite */

/*  Etage +2 */
.lamp-plus2-emmy-1                    { top: 30.0%; left: 35.0%; }
.jalousie-plus2-emmy-1                { top: 15.0%; left: 40.0%; }
.temp-plus2-emmy-1                    { top: 45.0%; left: 40.0%; }
.temp-plus2-leini-1                   { top: 40.0%; left: 60.0%; }
.jalousie-plus2-leini-1               { top: 10.0%; left: 60.0%; }
.lamp-plus2-leini-1                   { top: 30.0%; left: 60.0%; }
.lamp-plus2-bad-1                     { top: 50.0%; left: 25.0%; }
.temp-plus2-bad-1                     { top: 45.0%; left: 40.0%; }
.jalousie-plus2-bad-1                 { top: 50.0%; left: 15.0%; }
.jalousie-plus2-diele-1               { top: 50.0%; left: 85.0%; }
.lamp-plus2-diele-1                   { top: 50.0%; left: 60.0%; }
.lamp-plus2-diele-2                   { top: 50.0%; left: 45.0%; }
.motion-plus2-diele-1                 { top: 45.0%; left: 60.0%; }
.jalousie-plus2-bureau-1              { top: 85.0%; left: 30.0%; }
.lamp-plus2-bureau-1                  { top: 70.0%; left: 35.0%; }
.temp-plus2-bureau-1                  { top: 60.0%; left: 40.0%; }
.temp-plus2-hobby-kind-1              { top: 60.0%; left: 50.0%; }
.jalousie-plus2-hobby-kind-1          { top: 85.0%; left: 75.0%; }
.lamp-plus2-hobby-kind-1              { top: 70.0%; left: 65.0%; }


/*  Etage +1 */
.lamp-plus1-eltern-1                  { top: 25.0%; left: 75.0%; }
.lamp-plus1-eltern-2                  { top: 35.0%; left: 70.0%; }
.jalousie-plus1-eltern-1              { top: 10.0%; left: 80.0%; }
.jalousie-plus1-eltern-2              { top: 20.0%; left: 90.0%; }
.lamp-plus1-abstellraum-1             { top: 40.0%; left: 80.0%; }
.jalousie-plus1-diele-1               { top: 50.0%; left: 90.0%; }
.lamp-plus1-diele-1                   { top: 50.0%; left: 55.0%; }
.motion-plus1-diele-1                 { top: 50.0%; left: 75.0%; }
.motion-plus1-diele-2                 { top: 50.0%; left: 40.0%; }
.lamp-plus1-luftloch-1                { top: 65.0%; left: 75.0%; }
.lamp-plus1-luftloch-2                { top: 80.0%; left: 75.0%; }
.jalousie-plus1-luftloch-1            { top: 80.0%; left: 90.0%; }
.jalousie-plus1-luftloch-2            { top: 90.0%; left: 75.0%; }
.temp-plus1-luftloch-1                { top: 60.0%; left: 55.0%; }
.temp-plus1-eltern-1                  { top: 30.0%; left: 60.0%; }
.temp-plus1-wohnen-1                  { top: 85.0%; left: 50.0%; }
.lamp-plus1-wohnen-1                  { top: 55.0%; left: 25.0%; }
.lamp-plus1-wohnen-2                  { top: 60.0%; left: 25.0%; }
.lamp-plus1-wohnen-3                  { top: 70.0%; left: 25.0%; }
.lamp-plus1-wohnen-4                  { top: 70.0%; left: 25.0%; }
.jalousie-plus1-wohnen-1              { top: 90.0%; left: 30.0%; }
.jalousie-plus1-wohnen-2              { top: 55.0%; left: 5.0%; }
.jalousie-plus1-wc-1                  { top: 50.0%; left: 5.0%; }
.lamp-plus1-wc-1                      { top: 50.0%; left: 20.0%; }
.lamp-plus1-bad-1                     { top: 35.0%; left: 25.0%; }
.lamp-plus1-bad-2                     { top: 40.0%; left: 35.0%; }
.lamp-plus1-bad-3                     { top: 30.0%; left: 35.0%; }
.jalousie-plus1-bad-1                 { top: 40.0%; left: 5.0%; }
.temp-plus1-bad-1                     { top: 30.0%; left: 40.0%; }
.temp-plus1-wc-1                      { top: 45.0%; left: 25.0%; }
.temp-plus1-ankleide-1                { top: 30.0%; left: 55.0%; }
.lamp-plus1-ankleide-1                { top: 30.0%; left: 50.0%; }
.lamp-plus1-ankleide-2                { top: 20.0%; left: 35.0%; }
.jalousie-plus1-ankleide-1            { top: 10.0%; left: 20.0%; }
.jalousie-plus1-ankleide-2            { top: 10.0%; left: 45.0%; }

/*  Etage +0 */
.jalousie-plus0-diele-1               { top: 25.0%; left: 90.0%; }
.jalousie-plus0-diele-2               { top: 40.0%; left: 90.0%; }
.lamp-plus0-diele-1                   { top: 20.0%; left: 75.0%; }
.lamp-plus0-diele-2                   { top: 30.0%; left: 80.0%; }
.lamp-plus0-diele-3                   { top: 35.0%; left: 85.0%; }
.lamp-plus0-wc-1                      { top: 30.0%; left: 70.0%; }
.lamp-plus0-wc-2                      { top: 35.0%; left: 70.0%; }
.lamp-plus0-ankleide-1                { top: 40.0%; left: 65.0%; }
.motion-plus0-ankleide-1              { top: 40.0%; left: 70.0%; }
.lamp-plus0-essen-1                   { top: 75.0%; left: 60.0%; }
.lamp-plus0-essen-2                   { top: 65.0%; left: 60.0%; }
.jalousie-plus0-essen-1               { top: 55.0%; left: 90.0%; }
.jalousie-plus0-essen-2               { top: 80.0%; left: 90.0%; }
.jalousie-plus0-essen-3               { top: 85.0%; left: 75.0%; }
.jalousie-plus0-kueche-1              { top: 85.0%; left: 30.0%; }
.lamp-plus0-kueche-1                  { top: 75.0%; left: 35.0%; }
.lamp-plus0-kueche-2                  { top: 70.0%; left: 20.0%; }
.lamp-plus0-abstellraum-1             { top: 55.0%; left: 25.0%; }
.lamp-plus0-garage-1                  { top: 30.0%; left: 35.0%; }
.lamp-plus0-garage-2                  { top: 25.0%; left: 60.0%; }
.tor-plus0-garage-1                   { top: 15.0%; left: 35.0%; }

/*  Etage -1 */
.lamp-plus1-bad-1                     { top: 20.0%; left: 75.0%; }
.temp-plus1-bad-1                     { top: 20.0%; left: 65.0%; }
.lamp-plus1-technikraum-1             { top: 35.0%; left: 75.0%; }
.lamp-plus1-diele-1                   { top: 50.0%; left: 60.0%; }
.motion-plus1-diele-1                 { top: 50.0%; left: 80.0%; }
.motion-plus1-diele-2                 { top: 50.0%; left: 40.0%; }
.lamp-plus1-abstellraum-1             { top: 75.0%; left: 80.0%; }
.temp-plus1-abstellraum-1             { top: 60.0%; left: 75.0%; }
.temp-plus1-hobby-mann-1              { top: 60.0%; left: 35.0%; }
.lamp-plus1-hobby-mann-1              { top: 70.0%; left: 40.0%; }
.lamp-plus1-waschen-1                 { top: 50.0%; left: 20.0%; }
.temp-plus1-waschen-1                 { top: 55.0%; left: 35.0%; }
.temp-plus1-hobby-frau-1              { top: 40.0%; left: 35.0%; }
.lamp-plus1-hobby-frau-1              { top: 20.0%; left: 40.0%; }
.lamp-plus1-hobby-frau-2              { top: 35.0%; left: 40.0%; }


/* Andere Elemente der Seite */
.floorplan-wrapper {
    width: 100%;
    height: 100vh; /* 🔁 gesamte Bildschirmhöhe */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
}

.plan-image-container {
    position: relative;
    height: 100%;
    display: inline-block;
}

.floorplan-image {
    height: 100%;  /* 🔁 passt sich der Bildschirmhöhe an */
    width: auto;   /* Proportionen erhalten */
    display: block;
}

.plan-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.device-button {
    position: absolute;
    width: 32px;
    height: 32px;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    pointer-events: auto;
}