/* ============================================================
   rechner-base.css
   Gemeinsame Styles für alle Bauphysik-Rechner.
   Einbinden im Seiten-Template: <link rel="stylesheet" href="/css/rechner-base.css">
   ============================================================ */

/* Reset innerhalb jedes Widgets */
.rechner-widget *,
.rechner-widget *::before,
.rechner-widget *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Design-Tokens (CSS-Variablen) */
.rechner-widget {
  --panel:      #787878;
  --accent:     #ee9629;
  --text-light: #fff;
  --text-muted: #fff;
  --safe:       #3df188;
  --warn:       #d4a017;
  --danger:     #f54a4a;
}

/* Widget-Rahmen */
.rechner-widget .widget {
  background:  var(--panel);
  color:       var(--text-light);
  border-radius: 2px;
  width:       100%;
  max-width:   440px;
  overflow:    hidden;
  box-shadow:  8px 8px 0px var(--accent);
  margin:      2rem auto;
  /*font-family: 'sans serif', Courier, monospace;*/
}

/* Header */
.rechner-widget .widget-header {
  padding:       1.5rem 2rem 1rem;
  border-bottom: 1px solid #333;
}

.rechner-widget .widget-header h1 {
  /*font-family:    Georgia, 'Times New Roman', serif;*/
  font-size:      1.8rem;
  font-weight:    400;
  letter-spacing: -0.02em;
  color:          var(--text-light);
  margin-bottom:  0.3rem;
}

.rechner-widget .widget-header p {
  font-size:      1.1rem;
  color:          var(--text-muted);
  /*letter-spacing: 0.08em;*/
  /*text-transform: uppercase;*/
}

/* Eingabebereich */
.rechner-widget .inputs {
  padding:        1.5rem 2rem;
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.rechner-widget .field label {
  display:        block;
  font-size:      0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  0.4rem;
}

.rechner-widget .field-row {
  display:          flex;
  align-items:      center;
  background:       #5e5e5e;
  border:           1px solid #3a3a3a;
  border-radius:    2px;
  overflow:         hidden;
  transition:       border-color 0.2s;
}

.rechner-widget .field-row:focus-within {
  border-color: var(--accent);
}

.rechner-widget .field-row input {
  flex:        1;
  background:  transparent;
  border:      none;
  outline:     none;
  color:       var(--text-light);
  font-family: 'Courier New', Courier, monospace;
  font-size:   1.1rem;
  padding:     0.65rem 0.75rem;
}

.rechner-widget .field-row input[type=range] {
  padding:      0.75rem 0.75rem;
  accent-color: var(--accent);
  cursor:       pointer;
}

.rechner-widget .field-row .unit {
  padding:   0 0.75rem;
  color:     var(--text-muted);
  font-size: 0.75rem;
}

.rechner-widget .field-row .val-display {
  padding:    0.65rem 0.75rem 0.65rem 0;
  font-size:  1.1rem;
  min-width:  3rem;
  text-align: right;
}

/* Ergebnisbereich */
.rechner-widget .result-area {
  margin:        0 2rem 1.5rem;
  border:        1px solid #333;
  border-radius: 2px;
  overflow:      hidden;
}

.rechner-widget .result-label {
  background:     #5e5e5e;
  padding:        0.4rem 0.75rem;
  font-size:      1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
  border-bottom:  1px solid #333;
}

.rechner-widget .result-value {
  padding:     1rem 0.75rem 0.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size:   3rem;
  line-height: 1;
  transition:  color 0.4s;
}

.rechner-widget .result-value span.unit {
  font-family:  'Courier New', Courier, monospace;
  font-size:    1rem;
  color:        var(--text-muted);
  margin-left:  0.25rem;
}

/* Statuszeile */
.rechner-widget .status-bar {
  padding:     0.5rem 0.75rem;
  font-size:   1rem;
  border-top:  1px solid #333;
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.rechner-widget .status-dot {
  width:       8px;
  height:      8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Fußnote */
.rechner-widget .footer-note {
  padding:        0.75rem 2rem 1.25rem;
  font-size:      0.9rem;
  color:          #ffffff;
  line-height:    1.6;
  letter-spacing: 0.03em;
}

/* ============================================================
   Temperaturskala (optional — nur bei Rechnern mit Skala)
   ============================================================ */

.rechner-widget .scale-wrap {
  padding: 0.25rem 0.75rem 0.9rem;
}

.rechner-widget .scale-axis-labels {
  display:         flex;
  justify-content: space-between;
  font-size:       0.55rem;
  color:           var(--text-muted);
  letter-spacing:  0.06em;
  margin-bottom:   0.3rem;
}

.rechner-widget .scale-bar {
  position:     relative;
  height:       10px;
  border-radius: 2px;
  background:   linear-gradient(to right, #3a8c5c, #d4a017, #c85a2e);
}

.rechner-widget .scale-marker {
  position:      absolute;
  top:           -4px;
  width:         2px;
  height:        18px;
  background:    #f4f0e8;
  border-radius: 1px;
  transform:     translateX(-50%);
  transition:    left 0.3s ease;
}

.rechner-widget .scale-mold-zone {
  position:      absolute;
  top:           0;
  right:         0;
  height:        100%;
  background:    rgba(200, 90, 46, 0.35);
  border-radius: 0 2px 2px 0;
  transition:    width 0.3s ease;
}

.rechner-widget .scale-temp-label {
  position:   absolute;
  top:        16px;
  font-size:  0.6rem;
  color:      var(--text-light);
  transform:  translateX(-50%);
  white-space: nowrap;
  transition: left 0.3s ease;
}

/* ============================================================
   Responsive — Mobile
   ============================================================ */

@media (max-width: 480px) {

  .rechner-widget .widget {
    max-width:  100%;
    margin:     1rem 0;
    box-shadow: 4px 4px 0px var(--accent); /* kleinerer Schatten auf engen Screens */
  }

  .rechner-widget .widget-header {
    padding: 1.1rem 1.25rem 0.75rem;
  }

  .rechner-widget .widget-header h1 {
    font-size: 1.25rem;
  }

  .rechner-widget .inputs {
    padding: 1.1rem 1.25rem;
    gap:     1rem;
  }

  .rechner-widget .result-area {
    margin: 0 1.25rem 1.25rem;
  }

  .rechner-widget .result-value {
    font-size: 2.25rem;
  }

  .rechner-widget .footer-note {
    padding: 0.6rem 1.25rem 1rem;
  }

  /* Skala: Label-Text kürzen damit nichts überläuft */
  .rechner-widget .scale-axis-labels {
    font-size: 0.5rem;
  }

  .rechner-widget .scale-wrap {
    padding: 0.2rem 0.6rem 0.9rem;
  }
}