/* ========================================
   Allgemeine Einstellungen
======================================== */
body{
    background-color:#ffffff;
    color:#000000;
    font-family:"Segoe UI",sans-serif;
    margin:0;
    padding:0 0 0 0.5em;
}

/* Header */
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:1.2em;
    margin-bottom:0.3em;
    padding-bottom:0;
}
header h2{font-size:1.0em;color:#000;}
.time{font-size:1.2em;color:#000;}
.back-icon{font-size:1.5em;text-decoration:none;margin-left:.1em;color:inherit;}
.back-icon:hover{color:#cc0000;}

/* Navigation */
.nav-grid{
    display:flex;
    flex-direction:column;
    gap:0.7em;
    max-width:300px;
    margin:0;
}
.nav-item{
    display:block;
    text-align:center;
    font-size:1.2em;
    background:#b9a281;
    color:#000;
    text-decoration:none;
    border-radius:5px;
    min-width:200px;
    min-height:10px;
    padding:.1em 0;
    flex:1 1 calc(45% - 1em);
}
.nav-item:hover{ background:#B2955B; }

/* ========================================
   Formularraster
======================================== */
/* 2-Spalten-Standard: Prompt | Wert */
.parameter-grid{
    display:grid;
    grid-template-columns:40% 60%;
    row-gap:0;
    column-gap:0;
    font-size:1.2em;
    margin-top:0;
    padding-top:0;
}
.parameter-grid > div{ margin-bottom:.1em; }

/* 3-Spalten-Variante (falls genutzt) */
.parameter-grid-3col{
    display:grid;
    grid-template-columns:40% 30% 30%;
    font-size:1.2em;
    row-gap:.3em;
    column-gap:.2em;
    margin-top:0;
    padding-top:0;
}
.parameter-grid-3col > div{ margin-bottom:.2em; }

.param-name{ text-align:left; font-weight:500; }
.param-value{ text-align:left; }

/* Trenner zwischen Gruppen */
.group-separator{
    grid-column:1 / span 2;
    height:.2em;
    margin-top:.3em;
    margin-bottom:.1em;
}

/* ========================================
   Eingabe & Read-only
======================================== */
input.editable{
    width:20%;
    font-size:1em;
    padding:.3em;
    border:2px solid #000;
    background:#fff;
}
input.editable:focus{ outline:none; border-color:#000; }

.readonly{
    color:#000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.2;
}

/* ========================================
   Buttons
======================================== */
button{
    margin-top:1em;
    padding:.4em .6em;
    font-size:.8em;
    border:none;
    background:#b9a281;
    color:#000;
    cursor:pointer;
}
button:hover{ background:#B2955B; }

.back-button{
    margin-top:2em;
    padding:.7em 1.2em;
    font-size:1.5em;
    border:2px solid #b9a281;
    background:#fff;
    color:#000;
    text-decoration:none;
    display:pointer;
}

form{ margin-top:0; padding-top:0; }

/* ========================================
   Bilddarstellung (Windrose & Wetter)
======================================== */
/* Bild über beide Spalten (eigene Rasterzeile unter dem Wert) */
.full-span{ grid-column:1 / -1; }

/* Windrose zentriert darstellen */
.image-container{
    text-align:center;
    margin-top:0.25rem;
}
.image-container img{
    display:inline-block;
}

/* Sanfte Rotation für Windrose */
.rotatable-image{
    transition:transform .3s ease-in-out;
    max-width:none;
    height:auto;
}

/* Wert linksbündig (z. B. „221.9 °“) */
.value-text{
    display:block;
    text-align:left;
}

/* Wetter-Icons innerhalb der Wertzelle (bestehendes Verhalten) */
.value-image{
    display:block;
    text-align:center;
    margin-top:4px;
}
.value-image img{ display:inline-block; }