/* Pumpen-Technik Tool Styleguide v1
   Schrift: Segoe UI / Tahoma, Eingaben 13px, Labels 14px, Ergebnis 13px, Hinweise 14px.
   Box: weiss, 12px Radius, leichter Schatten. Button: #159fe3. */
.gasstrom-rechner{
  font-family:"Segoe UI", Tahoma, sans-serif;
  background:#fff;
  max-width:520px;
  margin:1rem auto;
  padding:1.25rem 1.25rem 1.5rem;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
  color:#222 !important;
}
.gasstrom-rechner *{ box-sizing:border-box; }
.gasstrom-rechner .illustration{ text-align:center; margin-bottom:1rem; }
.gasstrom-rechner .illustration img{ max-width:420px; width:100%; height:auto; border-radius:6px; display:block; margin:0 auto; }
.gasstrom-rechner .gasstrom-form{ display:flex; flex-direction:column; gap:12px; }
.gasstrom-rechner .field{ display:flex; flex-direction:column; gap:6px; }
.gasstrom-rechner label{ font-weight:600; color:#222 !important; font-size:14px; line-height:1.25; }
.gasstrom-rechner input,
.gasstrom-rechner select{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
  padding:10px 12px !important;
  border:1px solid #d2d6dc !important;
  border-radius:6px !important;
  background:#fff !important;
  color:#222 !important;
  font-family:"Segoe UI", Tahoma, sans-serif !important;
  font-size:13px !important;
  line-height:1.25 !important;
  min-height:42px;
}
.gasstrom-rechner .inline-2{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.gasstrom-rechner .small-gap{ margin-top:6px; }
.gasstrom-rechner .gas-rows{ display:flex; flex-direction:column; gap:8px; }
.gasstrom-rechner .gas-row{ display:grid; grid-template-columns: minmax(0,1.25fr) minmax(72px,.65fr) 34px; gap:8px; align-items:center; }
.gasstrom-rechner .remove-gas{ min-height:42px; border:1px solid #d2d6dc; border-radius:6px; background:#f5f6f8; cursor:pointer; font-weight:700; color:#222 !important; font-family:"Segoe UI", Tahoma, sans-serif !important; }
.gasstrom-rechner .btn-primary{
  background:#159fe3;
  color:#fff !important;
  padding:12px 16px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  line-height:1.25;
  font-family:"Segoe UI", Tahoma, sans-serif !important;
}
.gasstrom-rechner .btn-primary:hover{ background:#0089c8; }
.gasstrom-rechner .btn-secondary{ background:#eef3f7; color:#003b71 !important; padding:10px 12px; border:1px solid #cbd5df; border-radius:6px; cursor:pointer; font-weight:600; text-align:left; font-family:"Segoe UI", Tahoma, sans-serif !important; font-size:13px; line-height:1.25; }
.gasstrom-rechner .result-block{
  margin-top:16px;
  border-top:1px solid #e5e7eb;
  padding-top:14px;
  color:#222 !important;
  font-family:"Segoe UI", Tahoma, sans-serif !important;
}
.gasstrom-rechner .result-title{
  font-size:15px;
  line-height:1.3;
  font-weight:700;
  margin:0 0 12px;
  color:#111 !important;
}
.gasstrom-rechner .result-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:7px 12px;
  font-size:13px;
  line-height:1.4;
  color:#222 !important;
}
.gasstrom-rechner .result-grid div:nth-child(odd){ color:#333 !important; font-weight:400; }
.gasstrom-rechner .result-grid div:nth-child(even){ text-align:right; font-weight:600; color:#111 !important; white-space:nowrap; }
.gasstrom-rechner .notice{
  margin-top:12px;
  padding:10px 12px;
  border-radius:6px;
  font-size:14px;
  line-height:1.45;
  font-weight:400;
  border:1px solid transparent;
}
.gasstrom-rechner .notice strong{ font-weight:700; }
.gasstrom-rechner .ok{ background:#ecfdf5; color:#065f46 !important; border-color:#a7f3d0; }
.gasstrom-rechner .hint{ background:#eff6ff; color:#1e3a8a !important; border-color:#bfdbfe; }
.gasstrom-rechner .notice:not(.ok):not(.hint):not(.error){ background:#fff7ed; color:#9a3412 !important; border-color:#fed7aa; }
.gasstrom-rechner .error{ background:#fef2f2; color:#991b1b !important; border-color:#fecaca; }
@media (max-width:520px){
  .gasstrom-rechner{ padding:1rem; }
  .gasstrom-rechner .inline-2{ grid-template-columns:1fr; }
  .gasstrom-rechner .gas-row{ grid-template-columns: 1fr 78px 34px; }
  .gasstrom-rechner .result-grid{ grid-template-columns:1fr; gap:4px; }
  .gasstrom-rechner .result-grid div:nth-child(even){ text-align:left; margin-bottom:4px; }
}