/* ---------------------------------------------------------------------------
   BFSU-Refresh für CalcSS3 – rein additiv (überschreibt CalcSS3.css per Kaskade).
   CalcSS3.css unverändert; CalcSS3.js: 1 Zeile (externer Hilfe-Link entfernt).
   Zurücksetzen: die <link>-Zeile auf diese Datei in index.html entfernen.
   --------------------------------------------------------------------------- */

:root { --brand: #0070b4; }

/* ---------- Seite ---------- */
body { background: #f4f6f9 !important; margin: 0; }

/* ---------- Header: identisch zum Übersetzungstool -----------------------
   Gleiche Schriftgrösse, Schrift und Ausrichtung wie dort. Der innere Container
   bildet den Bootstrap-.container nach (gleiche Breite/Zentrierung je Breakpoint). */
.bfsu-header {
  background: var(--brand);
  padding: .5rem 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.bfsu-header .bfsu-inner {
  width: 100%; margin: 0 auto; padding: 0 15px;
  display: flex; align-items: center;
}
@media (min-width: 576px)  { .bfsu-header .bfsu-inner { max-width: 540px; } }
@media (min-width: 768px)  { .bfsu-header .bfsu-inner { max-width: 720px; } }
@media (min-width: 992px)  { .bfsu-header .bfsu-inner { max-width: 960px; } }
@media (min-width: 1200px) { .bfsu-header .bfsu-inner { max-width: 1140px; } }
.bfsu-header img { height: 46px; width: auto; margin-right: 1rem; }
.bfsu-header .t1 { font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: #fff; }
.bfsu-header .t2 { font-size: .875rem; line-height: 1.2; color: #ddd; }

.bfsu-footer {
  text-align: center; color: #8a9199;
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 4px 0 28px;
}

/* ---------- Gehäuse: helle Karte, feste Breite, zentriert ---------- */
.calc-main {
  position: relative !important; top: auto !important; left: auto !important;
  width: 480px !important;
  margin: 32px auto 18px !important;
  padding: 14px 12px 16px !important;
  background: #ffffff !important;
  border: 1px solid #e3e6ea !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10) !important;
}
.calc-main.calc-small { width: 260px !important; }

/* ---------- Display ---------- */
.calc-display {
  background: #f4f6f9 !important; border: 1px solid #e3e6ea !important;
  box-shadow: none !important; border-radius: 10px !important;
  color: #1d2125 !important; text-shadow: none !important;
}
.calc-hold { color: #9aa2ab !important; }
.calc-info { display: none !important; }   /* "?" (führte extern) entfernt */

/* Verstecktes Kopier-textarea: keinen Resize-Griff/-Cursor an der "="-Taste zeigen.
   focus()/select() (Kopierfunktion) bleiben funktionsfähig. */
.calc-main textarea {
  resize: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- Tasten: flach ---------- */
.calc-left > div, .calc-right > div {
  background-color: transparent !important; border: none !important; box-shadow: none !important;
}
.calc-left > div > div, .calc-right > div > div {
  border-radius: 10px !important;
  border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important;
  box-shadow: none !important; text-shadow: none !important;
}
/* Funktions-/Wissenschafts-/Speichertasten: mittleres Grau (einen Tick dunkler) */
.calc-left > div > div, .calc-right > div > div {
  background: #e2e7ee !important; color: #1d2125 !important; border: 1px solid #cdd4dc !important;
}
.calc-left > div > div:hover, .calc-right > div > div:hover {
  background: #d6dce4 !important;
}

/* Zifferntasten: hell getönt mit klarem Rand (jetzt gut sichtbar) */
.calc-right .calc-black, .calc-right .calc-black > div { background: #f4f7fa !important; }
.calc-right .calc-black > div { color: #1d2125 !important; border-color: #c6cfd9 !important; }
.calc-right .calc-black > div:hover { background: #e9eef4 !important; }

/* Operatoren / AC / +- : hellblau getönt */
.calc-right .calc-brown, .calc-right .calc-brown > div { background: #d6e4f2 !important; }
.calc-right .calc-brown > div { color: var(--brand) !important; border-color: #b6d0ea !important; }
.calc-right .calc-brown > div:hover { background: #c6dbef !important; }

/* 2nd-Taste (Shift): gelb hervorheben */
.calc-left > div:first-child > div {
  background: #ffd23f !important; color: #5a4600 !important; border-color: #e6b800 !important;
}
.calc-left > div:first-child > div:hover { background: #ffc814 !important; }

/* "="-Taste: Blau, füllt die volle Höhe, Zeichen mittig (Darstellungsfehler behoben) */
.calc-right .calc-eq { background: var(--brand) !important; border-radius: 10px !important; right: 8px !important; }
.calc-right .calc-eq > div {
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  height: auto !important; border-radius: 10px !important;
  background: var(--brand) !important; color: #fff !important; border: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.calc-right .calc-eq .calc-down { padding-top: 0 !important; }

/* 2nd-Modus aktiv */
.calc-left .calc-second { background: transparent !important; }
.calc-left .calc-second div { color: var(--brand) !important; text-shadow: none !important; }

/* gedrückter Zustand */
.calc-left > div:active > div, .calc-right > div:active > div,
.calc-left .calc-press > div, .calc-right .calc-press > div {
  filter: brightness(.94) !important; box-shadow: none !important;
}

/* Tastatur-Fokus (aktive Taste) */
.calc-left .calc-active, .calc-right .calc-active {
  box-shadow: 0 0 0 2px rgba(0, 112, 180, .55) !important; border-color: var(--brand) !important;
}