/* ============================================================
   GLOBAL & RESET
   ============================================================ */
* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(to right, grey, lightgray);
    min-height: 100vh;
}

/* 3-Spalten-Struktur */
.app-row { display: flex; width: 100%; min-height: 100vh; }
.side-spacer { flex: 1; }
.center-core { width: 700px; flex-shrink: 0; display: flex; flex-direction: column; padding: 20px 0; }

/* Navigation (96px Buttons) */
#divNav { width: 700px; margin-bottom: 15px; font-size: 0; background: transparent; border: none; }
.nav-button { display: inline-block; width: 96px; height: 45px; margin-left: 4px; cursor: pointer; font-size: 13px; vertical-align: top; background: #eee; /* Standardfarbe */
  transition: background 0.3s; /* Macht den Übergang weicher */ }

/* Mouseover: Effekt beim Drüberfahren */
.nav-button:hover {
  background-color: #e0e0e0; /* Hellgrau beim Hover */
  border: 1px solid #999;
}

/* Selected: Design für den gerade aktiven Button */
.nav-button.selected {
  background-color: #007bff; /* Blau als Beispiel */
  color: white;
  border: 1px solid #0056b3;
  font-weight: bold;
}

/* Selected (Aktiv/Ausgewählt) */
.nav-button.selected {
  /*background-color: #333;    /* Beispielfarbe für aktiv */
  color: white;
	border: 2px;
  cursor: default;           /* Zeiger bei ausgewähltem Button deaktivieren */
}

#btnStart { margin-left: 0; }

/* Plot-Fenster (Das weiße Haupt-Div) */
.divPlot {
    width: 100%; background: #ffffff; border: 1px solid #ccc;
    border-radius: 5px; padding: 20px; min-height: 600px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* versteckte divs */
.hidden { display: none; }

/* ============================================================
   GEMEINSAME APP-ELEMENTE (aus deinen Files extrahiert)
   ============================================================ */
/* Felder überall */
.fields {  background: lightgrey; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 15px; box-sizing: border-box; width: 100%;}

.row-main { display: flex; gap: 15px; margin-bottom: 15px; align-items: flex-end; }
.row-main div.type-select { flex: 1; } 
.row-main div.formula-preview { flex: 2; text-align: center; padding-bottom: 5px; }

label { font-size: 10px; font-weight: bold; margin-bottom: 4px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
input[type="number"], select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; width: 100%; box-sizing: border-box; background: #fff; }

#formulaDisplay { font-family: 'serif'; font-style: italic; font-size: 16px; color: #333; min-height: 24px; }

.btn-plot { background: #28a745; color: white; border: none; padding: 0 25px; border-radius: 4px; cursor: pointer; font-weight: bold; height: 38px; transition: background 0.2s; }
.btn-plot:hover { background: #218838; }

.row-limits { display: flex; gap: 10px; margin-bottom: 15px; padding-top: 15px; border-top: 1px solid #f0f0f0; }
.row-limits div { flex: 1; display: flex; flex-direction: column; }

.slider-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 15px; border-top: 1px solid #eee; }
.slider-card { background: #fafafa; padding: 10px; border-radius: 6px; border: 1px solid #eee; text-align: center; }
.slider-card span { font-size: 13px; font-weight: bold; color: #007bff; }
input[type="range"] { width: 100%; margin-top: 8px; cursor: pointer; }

.plot { width: 620px; height: 450px; background: white; border-radius: 8px; border: 1px solid #ddd; }


.input-card { background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.row-multi { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.flex-grow { flex-grow: 1; }
.btn-add { background: #28a745; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-clear { background: #dc3545; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; }