/* ============================================================
   QUELLE: 08_ui_redesign_steps_11_bis_22.css
   ============================================================ */

/* VERO UI REDESIGN SCHRITT 11
   dunkle felder in profilbereich und tausch
*/

body.uiRedesignStep2 .sidebar input,
body.uiRedesignStep2 .sidebar select,
body.uiRedesignStep2 .sidebar textarea {
  background: #05090d !important;
  color: #f2f1ea !important;
  border: 1px solid rgba(216,189,119,0.24) !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 .sidebar input::placeholder,
body.uiRedesignStep2 .sidebar textarea::placeholder {
  color: #9fa7ad !important;
}

body.uiRedesignStep2 .sidebar button,
body.uiRedesignStep2 .sidebar .button,
body.uiRedesignStep2 .sidebar .btn {
  background: #070b10 !important;
  color: #efe7d0 !important;
  border: 1px solid rgba(216,189,119,0.28) !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 .sidebar button:hover,
body.uiRedesignStep2 .sidebar .button:hover,
body.uiRedesignStep2 .sidebar .btn:hover {
  background: #0b1016 !important;
}

body.uiRedesignStep2 .sidebar [class*="konto"],
body.uiRedesignStep2 .sidebar [class*="profil"],
body.uiRedesignStep2 .sidebar [class*="user"] {
  color: #f2f1ea !important;
}

body.uiRedesignStep2 #view-tausch input,
body.uiRedesignStep2 #view-tausch select,
body.uiRedesignStep2 #view-tausch textarea {
  background: #060a0f !important;
  color: #f2f1ea !important;
  border: 1px solid rgba(216,189,119,0.24) !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 #view-tausch input::placeholder,
body.uiRedesignStep2 #view-tausch textarea::placeholder {
  color: #9fa7ad !important;
}

body.uiRedesignStep2 #view-tausch .input,
body.uiRedesignStep2 #view-tausch .inputWrap,
body.uiRedesignStep2 #view-tausch .field,
body.uiRedesignStep2 #view-tausch .entryField,
body.uiRedesignStep2 #view-tausch .amountField,
body.uiRedesignStep2 #view-tausch .amountInput,
body.uiRedesignStep2 #view-tausch .inputRow,
body.uiRedesignStep2 #view-tausch .amountRow {
  background: #060a0f !important;
  color: #f2f1ea !important;
  border-color: rgba(216,189,119,0.24) !important;
}

body.uiRedesignStep2 #view-tausch label,
body.uiRedesignStep2 #view-tausch .label,
body.uiRedesignStep2 #view-tausch .fieldLabel {
  color: #c9d0d5 !important;
}

body.uiRedesignStep2 #view-tausch .currency,
body.uiRedesignStep2 #view-tausch .currencyLabel,
body.uiRedesignStep2 #view-tausch .suffix,
body.uiRedesignStep2 #view-tausch .unit,
body.uiRedesignStep2 #view-tausch .amountSuffix {
  background: #060a0f !important;
  color: #efe7d0 !important;
  border-left: 1px solid rgba(216,189,119,0.18) !important;
}

body.uiRedesignStep2 #view-tausch button,
body.uiRedesignStep2 #view-tausch .button,
body.uiRedesignStep2 #view-tausch .btn,
body.uiRedesignStep2 #view-tausch .tabButton {
  box-shadow: none !important;
}


/* VERO UI REDESIGN SCHRITT 12
   konto-feld dunkel, währungs-badges dunkel, obere statusrahmen abdunkeln
*/

body.uiRedesignStep2 .step12AccountCardDark {
  background: #070b10 !important;
  color: #f2f1ea !important;
  border: 1px solid rgba(216,189,119,0.22) !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 .step12AccountCardDark * {
  background: transparent !important;
  color: inherit !important;
}

body.uiRedesignStep2 .step12FxBadgeDark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #0a0f14 !important;
  color: #efe7d0 !important;
  border: 1px solid rgba(216,189,119,0.22) !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 .step12FxBadgeDark * {
  background: transparent !important;
}

body.uiRedesignStep2 .step12TopStatCard {
  border: 1px solid rgba(216,189,119,0.22) !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 .step12TopStatCard::before,
body.uiRedesignStep2 .step12TopStatCard::after {
  border-color: rgba(216,189,119,0.22) !important;
}

body.uiRedesignStep2 .step12TopStatCard * {
  border-color: rgba(216,189,119,0.16) !important;
}



/* VERO UI REDESIGN SCHRITT 14
   Nur CSS. Direkte echte Selektoren. Kein JavaScript.
*/

body.uiRedesignStep2 .veroBanknoteCard {
  background: #05090d !important;
  border: 1px solid rgba(216,189,119,0.14) !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 .veroBanknoteImageWrap {
  background: #05090d !important;
  border: 1px solid rgba(18,26,30,0.98) !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 .veroBanknoteImage {
  border: 1px solid rgba(12,18,22,1) !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #05090d !important;
}

body.uiRedesignStep2 .topStats > div,
body.uiRedesignStep2 .topStats #kontoNamePill {
  background: #05090d !important;
  border: 1px solid rgba(216,189,119,0.16) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 .topStats > div + div,
body.uiRedesignStep2 .topStats #kontoNamePill {
  border-left: 1px solid rgba(216,189,119,0.16) !important;
}

body.uiRedesignStep2 #topSaldo,
body.uiRedesignStep2 #topEuro,
body.uiRedesignStep2 #kontoNamePill strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

body.uiRedesignStep2 #kontoNamePill em,
body.uiRedesignStep2 #topEuroEntwicklung {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body.uiRedesignStep2 #view-wertmeter .chartCard .cardHead .cardLabel {
  display: none !important;
}

body.uiRedesignStep2 .fxPill {
  background: #080d12 !important;
  border: 1px solid rgba(216,189,119,0.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 .fxPill b,
body.uiRedesignStep2 .fxPill em {
  background: transparent !important;
}

body.uiRedesignStep2 .fxPill.fxUsd {
  color: #8eb9a4 !important;
}

body.uiRedesignStep2 .fxPill.fxEur {
  color: #b5a7e0 !important;
}

body.uiRedesignStep2 .fxPill.fxChf {
  color: #d2a06a !important;
}



/* VERO UI REDESIGN SCHRITT 15
   Tausch Reiter dunkel
*/

body.uiRedesignStep2 #view-tausch .tradeMode,
body.uiRedesignStep2 #view-tausch button.tradeMode {
  background: #060a0f !important;
  color: #d8dee3 !important;
  border: 1px solid rgba(216,189,119,0.22) !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 #view-tausch .tradeMode:not(.active),
body.uiRedesignStep2 #view-tausch button.tradeMode:not(.active) {
  background: #070b10 !important;
  color: #aeb7bd !important;
  border-color: rgba(216,189,119,0.18) !important;
}

body.uiRedesignStep2 #view-tausch .tradeMode.active,
body.uiRedesignStep2 #view-tausch button.tradeMode.active {
  background: rgba(216,189,119,0.08) !important;
  color: #efe7d0 !important;
  border-color: rgba(216,189,119,0.40) !important;
}

body.uiRedesignStep2 #view-tausch .tradeMode:hover,
body.uiRedesignStep2 #view-tausch button.tradeMode:hover {
  background: #0b1016 !important;
  color: #efe7d0 !important;
}



/* VERO UI REDESIGN SCHRITT 16
   Tausch Vorschau dauerhaft dunkel, auch nach Reiterwechsel
*/

body.uiRedesignStep2 #view-tausch .previewBox,
body.uiRedesignStep2 #view-tausch .tradePreview,
body.uiRedesignStep2 #view-tausch .tradePreviewBox,
body.uiRedesignStep2 #view-tausch .quoteBox,
body.uiRedesignStep2 #view-tausch .resultBox,
body.uiRedesignStep2 #view-tausch [id*="preview"],
body.uiRedesignStep2 #view-tausch [id*="Preview"],
body.uiRedesignStep2 #view-tausch [class*="preview"],
body.uiRedesignStep2 #view-tausch [class*="Preview"] {
  background: #05090d !important;
  background-color: #05090d !important;
  color: #eef2f4 !important;
  border-color: rgba(216,189,119,0.22) !important;
  box-shadow: none !important;
}

body.uiRedesignStep2 #view-tausch .previewBox *,
body.uiRedesignStep2 #view-tausch .tradePreview *,
body.uiRedesignStep2 #view-tausch .tradePreviewBox *,
body.uiRedesignStep2 #view-tausch .quoteBox *,
body.uiRedesignStep2 #view-tausch .resultBox *,
body.uiRedesignStep2 #view-tausch [id*="preview"] *,
body.uiRedesignStep2 #view-tausch [id*="Preview"] *,
body.uiRedesignStep2 #view-tausch [class*="preview"] *,
body.uiRedesignStep2 #view-tausch [class*="Preview"] * {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

body.uiRedesignStep2 #view-tausch .previewBox strong,
body.uiRedesignStep2 #view-tausch .previewBox b,
body.uiRedesignStep2 #view-tausch .tradePreview strong,
body.uiRedesignStep2 #view-tausch .tradePreview b,
body.uiRedesignStep2 #view-tausch .tradePreviewBox strong,
body.uiRedesignStep2 #view-tausch .tradePreviewBox b,
body.uiRedesignStep2 #view-tausch .quoteBox strong,
body.uiRedesignStep2 #view-tausch .quoteBox b,
body.uiRedesignStep2 #view-tausch .resultBox strong,
body.uiRedesignStep2 #view-tausch .resultBox b,
body.uiRedesignStep2 #view-tausch [id*="preview"] strong,
body.uiRedesignStep2 #view-tausch [id*="Preview"] strong,
body.uiRedesignStep2 #view-tausch [class*="preview"] strong,
body.uiRedesignStep2 #view-tausch [class*="Preview"] strong {
  color: #efe7d0 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
}



/* VERO UI REDESIGN SCHRITT 17
   innere Rahmenlinie um die Banknote abdunkeln
*/

body.uiRedesignStep2 .veroBanknoteCard::after {
  border-color: rgba(10, 16, 20, 0.98) !important;
}

body.uiRedesignStep2 .veroBanknoteCard {
  border-color: rgba(18, 26, 30, 0.98) !important;
}

body.uiRedesignStep2 .veroBanknoteImageWrap {
  border-color: rgba(10, 16, 20, 0.98) !important;
}

body.uiRedesignStep2 .veroBanknoteImage {
  border-color: rgba(10, 16, 20, 0.98) !important;
}

/* VERO UI REDESIGN SCHRITT 18 CSS START */
body.uiRedesignStep2 .step18TresorRingHost {
  position: relative !important;
}

body.uiRedesignStep2 .step18TresorRingLabel {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  background: #060a0f !important;
  background-color: #060a0f !important;
  border: 1px solid rgba(10, 16, 20, 0.98) !important;
  color: #efe7d0 !important;
  padding: 5px 9px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  z-index: 8 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1 !important;
  min-width: 0 !important;
  letter-spacing: 0.02em !important;
}

body.uiRedesignStep2 .step18TresorRingLabel * {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
}
/* VERO UI REDESIGN SCHRITT 18 CSS END */

/* VERO UI REDESIGN SCHRITT 21
   Ringbeschriftung näher an den Kreis, dunkle Labelrahmen
*/

body.uiRedesignStep2 #view-tresor .ringSubLabel,
body.uiRedesignStep2 #view-tresor .step18TresorRingLabel {
  font-size: 12px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(8, 13, 17, 0.98) !important;
  background: #060a0f !important;
  color: #efe7d0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* VERO UI REDESIGN SCHRITT 22
   Wertsymbole als Bilddateien um den Deckungsring
*/

body.uiRedesignStep2 #view-tresor .deckung10Body {
  grid-template-columns: 460px 1fr !important;
}

body.uiRedesignStep2 #view-tresor .deckung10RingWrap.wertsymbolRingHost {
  width: 420px !important;
  height: 420px !important;
  overflow: visible !important;
}

body.uiRedesignStep2 #view-tresor .deckung10RingWrap.wertsymbolRingHost .deckung10Ring {
  inset: 54px !important;
}

body.uiRedesignStep2 #view-tresor .wertungRingSpacer {
  display: none !important;
}

body.uiRedesignStep2 #view-tresor .wertSymbolNode,
body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel {
  width: 82px !important;
  min-width: 82px !important;
  height: 88px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #efe7d0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  z-index: 12 !important;
  transform: translate(-50%, -50%) !important;
}

body.uiRedesignStep2 #view-tresor .wertSymbolNode .wertSymbolImg,
body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel .wertSymbolImg {
  width: 62px !important;
  height: 62px !important;
  display: block !important;
  object-fit: contain !important;
  opacity: .96 !important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.42)) sepia(.18) contrast(1.05) !important;
  background: transparent !important;
  border: 0 !important;
}

body.uiRedesignStep2 #view-tresor .wertSymbolNode span,
body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel span {
  display: block !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(216,189,119,.18) !important;
  background: rgba(4,8,12,.82) !important;
  color: #efe7d0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

@media (max-width: 1180px) {
  body.uiRedesignStep2 #view-tresor .deckung10Body {
    grid-template-columns: 1fr !important;
  }

  body.uiRedesignStep2 #view-tresor .deckung10RingWrap.wertsymbolRingHost {
    width: min(420px, 92vw) !important;
    height: min(420px, 92vw) !important;
  }

  body.uiRedesignStep2 #view-tresor .wertSymbolNode,
  body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel {
    width: 70px !important;
    min-width: 70px !important;
    height: 78px !important;
  }

  body.uiRedesignStep2 #view-tresor .wertSymbolNode .wertSymbolImg {
    width: 52px !important;
    height: 52px !important;
  }
}

/* VERO UI REDESIGN SCHRITT 22B
   Feintuning Symbolabstand und transparente Beschriftung
*/

body.uiRedesignStep2 #view-tresor .wertSymbolNode,
body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel {
  width: 88px !important;
  min-width: 88px !important;
  height: 94px !important;
  gap: 5px !important;
  pointer-events: none !important;
}

body.uiRedesignStep2 #view-tresor .wertSymbolNode .wertSymbolImg,
body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel .wertSymbolImg {
  width: 64px !important;
  height: 64px !important;
}

body.uiRedesignStep2 #view-tresor .wertSymbolNode span,
body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel span {
  padding: 2px 6px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(216,189,119,.18) !important;
  box-shadow: none !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.78) !important;
  letter-spacing: .05em !important;
}

@media (max-width: 1180px) {
  body.uiRedesignStep2 #view-tresor .wertSymbolNode,
  body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel {
    width: 76px !important;
    min-width: 76px !important;
    height: 84px !important;
  }

  body.uiRedesignStep2 #view-tresor .wertSymbolNode .wertSymbolImg,
  body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel .wertSymbolImg {
    width: 56px !important;
    height: 56px !important;
  }
}

/* VERO UI REDESIGN SCHRITT 22C
   Symbole weiter außen und Segmentlage im Uhrzeigersinn korrigiert
*/

body.uiRedesignStep2 #view-tresor .deckung10RingWrap.wertsymbolRingHost {
  width: 460px !important;
  height: 460px !important;
}

body.uiRedesignStep2 #view-tresor .deckung10RingWrap.wertsymbolRingHost .deckung10Ring {
  inset: 70px !important;
}

body.uiRedesignStep2 #view-tresor .wertSymbolNode,
body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel {
  width: 92px !important;
  min-width: 92px !important;
  height: 98px !important;
  gap: 6px !important;
}

body.uiRedesignStep2 #view-tresor .wertSymbolNode .wertSymbolImg,
body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel .wertSymbolImg {
  width: 66px !important;
  height: 66px !important;
}

body.uiRedesignStep2 #view-tresor .wertSymbolNode span,
body.uiRedesignStep2 #view-tresor .wertSymbolNode.step18TresorRingLabel span {
  background: rgba(4,8,12,.26) !important;
  background-color: rgba(4,8,12,.26) !important;
  backdrop-filter: blur(2px) !important;
  border: 1px solid rgba(216,189,119,.16) !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.92) !important;
}

@media (max-width: 1180px) {
  body.uiRedesignStep2 #view-tresor .deckung10RingWrap.wertsymbolRingHost {
    width: min(460px, 96vw) !important;
    height: min(460px, 96vw) !important;
  }
}