/* ==========================================================================================
 * css/taschenrechner.css -- Auftrag 268 (Fenster TC1, Beat 5.11.2026): DER EINGEBAUTE TASCHENRECHNER.
 * Eine Leiste UNTER der Aufgabe, im Fluss der Karte: verdeckt nie die Aufgabe, liegt im Kiosk von selbst richtig.
 * Tasten mindestens 44 px, Kontrast mindestens 4.5:1, keine Animation. Einhaengen: index.html nach css/uebungen.css (Larry).
 * ========================================================================================== */

/* Der Knopf: dieselbe Gestalt wie «💡 Hilfe» (.uebung-aufgabe__hilfe in css/uebungen.css). */
.tr-knopf[aria-expanded="true"],
.tr-knopf--offen { background: #f3f7fb; border-color: var(--farbe-akzent, #155e9e); }
@media (pointer: coarse) { .tr-knopf { min-height: 2.75rem; min-width: 2.75rem; } }

.tr {
  box-sizing: border-box;
  width: 100%;
  max-width: 40rem;
  margin: 0.6rem 0 0.4rem;
  padding: 0.5rem;
  border: 1px solid #8a97a6;
  border-radius: 10px;
  background: #eef2f6;
  color: #17212c;
}
.tr:focus { outline: 2px solid #155e9e; outline-offset: 1px; }
.tr *, .tr *::before, .tr *::after { box-sizing: border-box; }

.tr__anzeige {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  border: 1px solid #8a97a6;
  border-radius: 8px;
  background: #fff;
}
.tr__speicher-marke {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #155e9e;
}
.tr__speicher-marke[hidden] { display: none; }
.tr__zeilen { flex: 1 1 auto; min-width: 0; text-align: right; }
.tr__eingabe {
  min-height: 1.5rem;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 1.05rem;
  line-height: 1.5rem;
  color: #2c3a49;
  scrollbar-width: none;
}
.tr__ergebnis {
  min-height: 1.9rem;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 1.45rem;
  line-height: 1.9rem;
  font-weight: 700;
  color: #17212c;
  scrollbar-width: none;
}
.tr__zu {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #2c3a49;
  font-size: 1.05rem;
  cursor: pointer;
}
.tr__zu:hover { background: #e3e9f0; }

.tr__tasten { display: flex; flex-direction: column; gap: 0.3rem; }
.tr__block { display: grid; gap: 0.25rem; min-width: 0; }
.tr__block--funktion { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tr__block--zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tr__taste {
  min-width: 0;
  min-height: 44px;
  padding: 0 0.1rem;
  border: 1px solid #8a97a6;
  border-radius: 7px;
  background: #dfe6ee;
  color: #17212c;
  font-size: 1rem;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
}
.tr__taste:hover { background: #d0d9e3; }
.tr__taste--z { background: #fff; font-size: 1.15rem; }
.tr__taste--z:hover { background: #f3f5f8; }
.tr__taste--op { background: #cfdbe8; font-size: 1.15rem; }
.tr__taste--m { font-size: 0.9rem; }
.tr__taste--weg { background: #f4dcd6; color: #5a1a0c; }
.tr__taste--weg:hover { background: #eccdc5; }
.tr__taste--gleich { background: #155e9e; border-color: #155e9e; color: #fff; font-size: 1.2rem; font-weight: 700; }
.tr__taste--gleich:hover { background: #104c82; }
.tr__taste--breit { grid-column: span 1; }
.tr__taste:focus-visible,
.tr__zu:focus-visible { outline: 3px solid #155e9e; outline-offset: 1px; }
.tr__taste--gleich:focus-visible { outline-color: #17212c; }

/* Breit: Funktionen links, Zahlen rechts, damit die Leiste niedrig bleibt. */
@media (min-width: 640px) {
  .tr__tasten { flex-direction: row; gap: 0.5rem; }
  .tr__block { flex: 1 1 50%; }
  .tr__block--funktion { grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; grid-auto-rows: 44px; }
  .tr__taste--breit { grid-column: span 2; }
}

@media print { .tr, .tr-knopf { display: none !important; } }