/* ===========================================
   AMV-Rechner – Punkfish Version
   =========================================== */

/* Äußerer Container – sitzt im pf-tool-frame */
.amv-container {
  font-family: inherit;
  text-align: center;

  width: 100%;
  max-width: 420px;

  margin: 0 auto;
  padding: 20px 16px;

  border: 1px solid #ddd;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

  box-sizing: border-box;
}

/* Überschriften */
.amv-container h1 {
  font-size: 1.4rem;
  margin: 0 0 10px 0;
  color: #3b22a3;
}

.amv-container h3 {
  font-size: 1.1rem;
  margin: 0 0 12px 0;
  color: #444;
}

.amv-container h4 {
  font-size: 0.95rem;
  margin: 12px 0 6px;
  color: #555;
}

/* Blöcke für Eingabegruppen */
.amv-container .block {
  padding: 14px 16px;
  margin: 14px 0;

  border: 1px solid rgba(235, 220, 140, 0.35); /* leicht goldig, unaufdringlich */
  border-radius: 10px;

  background: linear-gradient(
    135deg,
    rgba(255, 248, 220, 0.55) 0%,   /* warmes, sehr helles Gelb – pastellig */
    rgba(255, 252, 235, 0.75) 100%  /* warmes Off-White, fast cremefarben */
  );
}


/* Rechen-Symbole (×, =) */
.amv-container .symbol {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 6px 0;
  color: #3b22a3;
}

/* Labels */
.amv-container label {
  display: block;
  text-align: center;
  margin: 4px 0 4px;
  color: #444;
  font-size: 0.95rem;
}

/* ===========================================
   Eingabefelder – klein, hübsch, zentriert
   =========================================== */

.amv-container input {
  display: block;

  width: 100%;
  max-width: 220px;      /* kompakt, nicht zu breit */

  margin: 8px auto;
  padding: 8px 10px;

  font-size: 0.95rem;
  text-align: center;

  border: 1px solid #bbb;
  border-radius: 6px;
  background: #ffffff;
  color: #111;

  box-sizing: border-box;
  transition: 0.2s ease;
}

/* Fokus-Effekt */
.amv-container input:focus {
  border-color: #3b22a3;
  box-shadow: 0 0 0 2px rgba(59, 34, 163, 0.25);
  outline: none;
}

/* WICHTIG: Nummernfelder – Pfeile wieder aktivieren */
.amv-container input[type="number"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/* ===========================================
   Readonly-Feld für "Verbrauch (barl)"
   =========================================== */

.amv-container .readonly-field {
  background: #f0f0f0;
  color: #555;
  border: 1px solid #ccc;

  pointer-events: none;   /* nicht anklickbar */
}

/* Kein Fokusrahmen auf readonly */
.amv-container .readonly-field:focus {
  box-shadow: none;
  border-color: #ccc;
}

/* Pfeile NUR im readonly-Feld ausblenden */
.amv-container .readonly-field::-webkit-outer-spin-button,
.amv-container .readonly-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.amv-container .readonly-field[type="number"] {
  -moz-appearance: textfield;
}

/* ===========================================
   Button
   =========================================== */

.amv-container button {
  display: block;

  width: 100%;
  max-width: 220px;

  margin: 18px auto 20px;
  padding: 10px 14px;

  background: #3b22a3;
  color: #ffffff;

  border: none;
  border-radius: 24px;

  font-size: 1rem;
  font-weight: bold;

  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s ease, transform 0.1s ease;
}

.amv-container button:hover {
  background: #2c1b80;
  transform: translateY(-1px);
}

/* ===========================================
   Ergebnisanzeige
   =========================================== */

.amv-container h3 span#result {
  font-size: 1.5rem;
  font-weight: bold;
  color: #3b22a3;
}

/* ===========================================
   Responsive – sehr kleine Bildschirme
   =========================================== */

@media (max-width: 480px) {
  .amv-container {
    padding: 16px 10px;
    max-width: 100%;
  }

  .amv-container .block {
    padding: 12px;
  }

  .amv-container input,
  .amv-container button {
    max-width: 180px;   /* noch etwas kompakter auf Mini-Geräten */
  }
}