/* ---------- Grunddesign ---------- */
:root {
  --primary:#007acc;
  --primary-dark:#005f99;
  --bg:#f4f6f8;
  --panel:#ffffff;
  --ok:#e0ffe0;
  --warn:#fff4cc;
  --crit:#ffe0e0;
}

*{box-sizing:border-box}

body{
  font-family:"Segoe UI",Arial,sans-serif;
  margin:0;
  padding:20px;
  background:var(--bg);
  color:#333;
}
h1,h2{text-align:center;color:var(--primary)}

.container{max-width:1100px;margin:auto}

/* ---------- Panel-Look ---------- */
.panel{
  background:var(--panel);
  padding:24px 28px;
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  margin:40px 0;
}

label{display:block;margin-top:14px;font-weight:600}

input,select{
  width:100%;
  padding:10px 12px;
  margin-top:6px;
  font-size:1rem;
  border:1px solid #ccc;
  border-radius:8px;
}
input:focus,select:focus{outline:none;border-color:var(--primary)}

.row{display:flex;flex-wrap:wrap;gap:16px}
.row>div{flex:1 1 180px}

.btn{
  margin-top:26px;width:100%;padding:14px 0;
  background:var(--primary);color:#fff;border:none;border-radius:10px;
  font-size:1.05rem;cursor:pointer;transition:.2s
}
.btn:hover{background:var(--primary-dark)}

.output{
  margin-top:24px;padding:18px;border-radius:12px;
  background:#e8f4ff;font-weight:600;line-height:1.65
}
.ok{background:var(--ok);color:#006600}
.warning{background:var(--warn);color:#996600}
.critical{background:var(--crit);color:#b00020}

.info{font-size:.9em;color:#555;margin-top:14px}
ul{margin:6px 0 0 18px;padding:0}

/* ---------- Panels & Tools wie BMA-Loop ---------- */
.input-container{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.input-section,.result-section{
  flex:1 1 300px;padding:20px;background:#e0e0e0;border:1px solid #ccc;margin:10px;border-radius:12px
}
.input-section{min-width:260px}
.result-section{min-width:220px}

.final-results{
  background:#fffbcc;padding:20px;border:2px solid #ffcc00;
  margin-top:20px;font-size:18px;font-weight:bold;color:#cc0000;
  border-radius:12px;
}

/* Tabellen usw. bleiben */
table{width:100%;border-collapse:collapse;margin-top:20px}
table,th,td{border:1px solid #ccc;padding:10px}
th{background:#f2f2f2}th,td{text-align:center}

.inputGroup{display:none}
.intermediate-results{
  background:#fff;padding:10px;border:1px solid #007bff;margin-top:10px;color:#007bff;border-radius:8px
}
.intermediate-results .current-value{color:red}
.intermediate-results .voltage-value{color:blue}
.intermediate-results .resistance-value{color:green}
.intermediate-results .power-value{color:orange}

@media(max-width:768px){
  .input-container{flex-direction:column}
  .input-section,.result-section{margin:0 0 20px 0}
  .row{flex-direction:column}
}