/* ============================================================
   QUELLE: 06_ui_redesign_steps_02_bis_05.css
   ============================================================ */

/* VERO UI REDESIGN SCHRITT 02
   Designhülle für bestehende Oberfläche.
   Alle alten IDs bleiben erhalten.
*/

body.uiRedesignStep2 {
  background:
    radial-gradient(circle at 78% 8%, rgba(188, 158, 88, 0.16), transparent 30%),
    radial-gradient(circle at 18% 84%, rgba(38, 75, 88, 0.28), transparent 36%),
    linear-gradient(135deg, #030506 0%, #071018 52%, #030506 100%);
  color: #e9edf0;
}

body.uiRedesignStep2 .appShell {
  background: transparent;
}

body.uiRedesignStep2 .sidebar {
  background: rgba(3, 7, 10, 0.82);
  border-right: 1px solid rgba(216, 189, 119, 0.22);
  box-shadow: 20px 0 60px rgba(0, 0, 0, 0.22);
}

body.uiRedesignStep2 .brandMark {
  border: 1px solid rgba(216, 189, 119, 0.48);
  color: #d8bd77;
  background: linear-gradient(145deg, rgba(216, 189, 119, 0.12), rgba(255, 255, 255, 0.02));
}

body.uiRedesignStep2 .brandName {
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.uiRedesignStep2 .navBtn,
body.uiRedesignStep2 .miniBtn,
body.uiRedesignStep2 .softBtn,
body.uiRedesignStep2 .rangeBtn,
body.uiRedesignStep2 .segBtn,
body.uiRedesignStep2 .tradeMode,
body.uiRedesignStep2 .payBtn,
body.uiRedesignStep2 .payoutBtn {
  border-color: rgba(216, 189, 119, 0.24);
}

body.uiRedesignStep2 .navBtn.active,
body.uiRedesignStep2 .rangeBtn.active,
body.uiRedesignStep2 .segBtn.active,
body.uiRedesignStep2 .tradeMode.active,
body.uiRedesignStep2 .payBtn.active,
body.uiRedesignStep2 .payoutBtn.active {
  color: #f1e2b6;
  border-color: rgba(216, 189, 119, 0.55);
  background: rgba(216, 189, 119, 0.08);
}

body.uiRedesignStep2 .content {
  background: transparent;
}

body.uiRedesignStep2 .topbar {
  border: 1px solid rgba(216, 189, 119, 0.18);
  background: rgba(7, 12, 17, 0.62);
  backdrop-filter: blur(12px);
}

body.uiRedesignStep2 .card {
  border: 1px solid rgba(216, 189, 119, 0.26);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)),
    rgba(10, 15, 20, 0.9);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

body.uiRedesignStep2 .cardLabel,
body.uiRedesignStep2 .eyebrow {
  color: #d8bd77;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.uiRedesignStep2 .bigValue {
  letter-spacing: -0.045em;
}

body.uiRedesignStep2 .chartBox {
  border: 1px solid rgba(126, 150, 160, 0.18);
  background:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px),
    rgba(3, 7, 10, 0.42);
  background-size: 100% 25%, 8.333% 100%, auto;
}

body.uiRedesignStep2 .primaryBtn {
  background: linear-gradient(135deg, #d8bd77, #8b6e35);
  color: #050506;
  border: 1px solid rgba(255, 238, 182, 0.42);
}

body.uiRedesignStep2 input {
  background: rgba(3, 7, 10, 0.74);
  border-color: rgba(216, 189, 119, 0.26);
  color: #e9edf0;
}

/* VERO UI REDESIGN SCHRITT 03
   Banknote als visuelle Ebene.
   Bestehende Funktionen bleiben erhalten.
*/

body.uiRedesignStep2 .veroBanknoteCard {
  padding: 20px;
  margin-bottom: 18px;
  overflow: hidden;
}

body.uiRedesignStep2 .veroBanknote {
  position: relative;
  min-height: 214px;
  color: #131714;
  border: 1px solid rgba(24, 28, 22, 0.88);
  background:
    radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0.18), transparent 28%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #e8dfbd 0%, #d7cfaa 44%, #eee4c4 100%);
  box-shadow:
    inset 0 0 0 7px rgba(5, 8, 6, 0.88),
    inset 0 0 0 10px rgba(216, 189, 119, 0.38),
    0 24px 70px rgba(0, 0, 0, 0.38);
  font-family: Georgia, "Times New Roman", serif;
  overflow: hidden;
}

body.uiRedesignStep2 .veroBanknote::before,
body.uiRedesignStep2 .veroBanknote::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(16, 22, 17, 0.72);
  pointer-events: none;
}

body.uiRedesignStep2 .veroBanknote::after {
  inset: 30px;
  border-color: rgba(16, 22, 17, 0.36);
}

body.uiRedesignStep2 .heroGrid {
  gap: 14px;
}

body.uiRedesignStep2 #view-wertmeter .heroGrid .heroCard {
  min-height: auto;
}

body.uiRedesignStep2 #view-wertmeter .heroGrid .heroCard .bigValue {
  font-size: clamp(28px, 4vw, 44px);
}

/* VERO UI REDESIGN SCHRITT 04
   stärker am Webseitenentwurf orientiert
   nur Design, keine Funktionsänderung
*/

body.uiRedesignStep2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em;
}

body.uiRedesignStep2 .appShell {
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
  gap: 0;
}

body.uiRedesignStep2 .sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: 10px 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background:
    linear-gradient(180deg, rgba(2,6,9,0.94) 0%, rgba(3,8,12,0.88) 100%);
  border-right: 1px solid rgba(216, 189, 119, 0.16);
  box-shadow: 24px 0 70px rgba(0,0,0,0.28);
}

body.uiRedesignStep2 .brand {
  padding: 18px 18px 16px;
  margin: 0 14px 12px;
  border: 1px solid rgba(216, 189, 119, 0.24);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background:
    radial-gradient(circle at 22% 18%, rgba(216,189,119,0.10), transparent 38%),
    rgba(255,255,255,0.015);
}

body.uiRedesignStep2 .brandMark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

body.uiRedesignStep2 .brandName {
  font-size: 18px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f2f3ee;
}

body.uiRedesignStep2 .muted,
body.uiRedesignStep2 #userStatus,
body.uiRedesignStep2 #systemZeile {
  color: #9aa4ad;
}

body.uiRedesignStep2 .userCard {
  margin: 0 14px 12px;
  padding: 12px;
  border: 1px solid rgba(216,189,119,0.12);
  background: rgba(255,255,255,0.02);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

body.uiRedesignStep2 .userRow {
  gap: 8px;
}

body.uiRedesignStep2 .userRow input,
body.uiRedesignStep2 .userRow button {
  min-height: 38px;
}

body.uiRedesignStep2 .navList {
  margin: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(216,189,119,0.12);
  border-bottom: 1px solid rgba(216,189,119,0.12);
}

body.uiRedesignStep2 .navBtn {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 17px 16px;
  border: 0;
  border-bottom: 1px solid rgba(216,189,119,0.10);
  border-radius: 0;
  background: transparent;
  color: #d3d8dd;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
}

body.uiRedesignStep2 .navBtn:last-child {
  border-bottom: 0;
}

body.uiRedesignStep2 .navBtn::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(216,189,119,0.35);
  font-size: 18px;
}

body.uiRedesignStep2 .navBtn.active {
  color: #fff6dc;
  background:
    linear-gradient(90deg, rgba(216,189,119,0.18), rgba(216,189,119,0.04) 60%, transparent 100%);
}

body.uiRedesignStep2 .navBtn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #d8bd77;
}

body.uiRedesignStep2 #marktStatus {
  margin: auto 14px 10px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(216,189,119,0.22);
  background: rgba(255,255,255,0.02);
  color: #d8bd77;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

body.uiRedesignStep2 .content {
  padding: 14px 18px 18px;
  background: transparent;
}

body.uiRedesignStep2 .topbar {
  min-height: 74px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 18px;
  margin-bottom: 16px;
  border: 1px solid rgba(216,189,119,0.14);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background:
    linear-gradient(180deg, rgba(8,12,17,0.85), rgba(5,8,12,0.78));
}

body.uiRedesignStep2 .topbar h1,
body.uiRedesignStep2 #viewTitle {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.uiRedesignStep2 .eyebrow {
  display: none;
}

body.uiRedesignStep2 .topStats {
  display: flex;
  gap: 0;
  align-items: stretch;
}

body.uiRedesignStep2 .topStats > div {
  min-width: 112px;
  padding: 10px 18px;
  border-left: 1px solid rgba(216,189,119,0.14);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.uiRedesignStep2 .topStats strong {
  font-size: 15px;
  font-weight: 500;
}

body.uiRedesignStep2 .topStats span {
  color: #9aa4ad;
  font-size: 12px;
}

body.uiRedesignStep2 .card {
  position: relative;
  border: 1px solid rgba(216,189,119,0.20);
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background:
    linear-gradient(180deg, rgba(6,10,14,0.92), rgba(4,8,12,0.96));
  box-shadow: 0 16px 50px rgba(0,0,0,0.22);
}

body.uiRedesignStep2 .card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(216,189,119,0.08);
  pointer-events: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

body.uiRedesignStep2 .cardHead {
  align-items: flex-start;
}

body.uiRedesignStep2 .cardLabel {
  color: #d9bf79;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.uiRedesignStep2 .bigValue {
  color: #efe2bf;
}

body.uiRedesignStep2 #view-wertmeter {
  display: grid;
  grid-template-columns: minmax(520px, 1.08fr) minmax(360px, 0.92fr);
  gap: 16px;
  align-items: stretch;
}

body.uiRedesignStep2 #view-wertmeter > .veroBanknoteCard {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

body.uiRedesignStep2 #view-wertmeter > .heroGrid {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
}

body.uiRedesignStep2 #view-wertmeter > .heroGrid .heroCard {
  min-height: 0;
  padding: 18px 18px 16px;
}

body.uiRedesignStep2 #view-wertmeter > .heroGrid .heroCard .bigValue {
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.02;
}

body.uiRedesignStep2 #view-wertmeter > .chartCard:nth-of-type(1) {
  grid-column: 2;
  grid-row: 2;
}

body.uiRedesignStep2 #view-wertmeter > .chartCard:nth-of-type(2) {
  grid-column: 1;
  grid-row: 2;
}

body.uiRedesignStep2 .chartCard {
  padding: 16px 18px 18px;
}

body.uiRedesignStep2 .chartHeadline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

body.uiRedesignStep2 .chartHeadline strong {
  font-size: 38px;
  font-weight: 500;
  color: #efe2bf;
}

body.uiRedesignStep2 .chartHeadline span {
  color: #83b07f;
}

body.uiRedesignStep2 .segmented,
body.uiRedesignStep2 .rangeRow {
  gap: 6px;
}

body.uiRedesignStep2 .segBtn,
body.uiRedesignStep2 .rangeBtn,
body.uiRedesignStep2 .softBtn {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(216,189,119,0.16);
  background: rgba(255,255,255,0.02);
  color: #d8dde2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

body.uiRedesignStep2 .rangeBtn.active,
body.uiRedesignStep2 .segBtn.active {
  color: #ffeec0;
  border-color: rgba(216,189,119,0.42);
  background: rgba(216,189,119,0.08);
}

body.uiRedesignStep2 .chartBox {
  min-height: 286px;
  border: 1px solid rgba(216,189,119,0.10);
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    rgba(2,6,9,0.42);
  background-size: 100% 24%, 10% 100%, auto;
}

body.uiRedesignStep2 .veroBanknoteCard {
  padding: 14px;
}

body.uiRedesignStep2 .veroBanknote {
  min-height: 248px;
  box-shadow:
    inset 0 0 0 7px rgba(5, 8, 6, 0.88),
    inset 0 0 0 10px rgba(216, 189, 119, 0.34),
    0 20px 60px rgba(0, 0, 0, 0.25);
}

body.uiRedesignStep2 .heroCard,
body.uiRedesignStep2 .chartCard {
  overflow: hidden;
}

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

  body.uiRedesignStep2 #view-wertmeter > .veroBanknoteCard,
  body.uiRedesignStep2 #view-wertmeter > .heroGrid,
  body.uiRedesignStep2 #view-wertmeter > .chartCard:nth-of-type(1),
  body.uiRedesignStep2 #view-wertmeter > .chartCard:nth-of-type(2) {
    grid-column: auto;
    grid-row: auto;
  }

  body.uiRedesignStep2 #view-wertmeter > .heroGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  body.uiRedesignStep2 .appShell {
    grid-template-columns: 1fr;
  }

  body.uiRedesignStep2 .sidebar {
    position: static;
    min-height: auto;
  }

  body.uiRedesignStep2 #view-wertmeter > .heroGrid {
    grid-template-columns: 1fr;
  }

  body.uiRedesignStep2 .topbar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  body.uiRedesignStep2 .topStats {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* VERO UI REDESIGN SCHRITT 05
   Views sauber trennen, scharfe Kanten, Banknote Bild, Tresor Deckung im Stichstil
*/

body.uiRedesignStep2,
body.uiRedesignStep2 * {
  border-radius: 0 !important;
}

body.uiRedesignStep2 .card,
body.uiRedesignStep2 .card::after,
body.uiRedesignStep2 .topbar,
body.uiRedesignStep2 .brand,
body.uiRedesignStep2 .userCard,
body.uiRedesignStep2 .navBtn,
body.uiRedesignStep2 .softBtn,
body.uiRedesignStep2 .segBtn,
body.uiRedesignStep2 .rangeBtn,
body.uiRedesignStep2 .primaryBtn,
body.uiRedesignStep2 .miniBtn,
body.uiRedesignStep2 .tradeMode,
body.uiRedesignStep2 .payBtn,
body.uiRedesignStep2 .payoutBtn,
body.uiRedesignStep2 input,
body.uiRedesignStep2 button,
body.uiRedesignStep2 .chartBox,
body.uiRedesignStep2 #marktStatus,
body.uiRedesignStep2 .topStats > div {
  clip-path: none !important;
}

body.uiRedesignStep2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.uiRedesignStep2 .brandName,
body.uiRedesignStep2 .navBtn,
body.uiRedesignStep2 .topbar h1,
body.uiRedesignStep2 #viewTitle,
body.uiRedesignStep2 .cardLabel,
body.uiRedesignStep2 .softBtn,
body.uiRedesignStep2 .segBtn,
body.uiRedesignStep2 .rangeBtn {
  letter-spacing: 0.08em;
}

body.uiRedesignStep2 .view {
  display: none !important;
}

body.uiRedesignStep2 .view.active {
  display: block !important;
}

body.uiRedesignStep2 #view-wertmeter.active {
  display: grid !important;
  grid-template-columns: minmax(520px, 1.06fr) minmax(360px, 0.94fr);
  gap: 16px;
  align-items: start;
}

body.uiRedesignStep2 #view-tausch.active,
body.uiRedesignStep2 #view-tresor.active,
body.uiRedesignStep2 #view-buch.active {
  display: block !important;
}

body.uiRedesignStep2 .veroBanknoteCard {
  grid-column: 1;
  grid-row: 1;
  padding: 14px;
  margin-bottom: 0;
  background:
    linear-gradient(180deg, rgba(6,10,14,0.92), rgba(4,8,12,0.96));
}

body.uiRedesignStep2 .veroBanknoteImageWrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.uiRedesignStep2 .veroBanknoteImage {
  display: block;
  width: min(100%, 760px);
  height: auto;
  border: 1px solid rgba(216,189,119,0.18);
  box-shadow: 0 14px 34px rgba(0,0,0,0.24);
}

body.uiRedesignStep2 .heroGrid {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
}

body.uiRedesignStep2 .heroGrid .heroCard {
  min-height: 0;
  padding: 16px 18px;
  background:
    linear-gradient(180deg, rgba(4,8,12,0.98), rgba(5,9,13,0.98));
}

body.uiRedesignStep2 .heroGrid .heroCard .bigValue {
  color: #efe7d0;
}

body.uiRedesignStep2 .heroGrid .heroCard .muted,
body.uiRedesignStep2 .heroGrid .heroCard .subValue,
body.uiRedesignStep2 .heroGrid .heroCard small {
  color: #cbd3d9;
}

body.uiRedesignStep2 .topStats > div {
  background: rgba(5,8,12,0.96);
  color: #f0f3f5;
  border-left: 1px solid rgba(216,189,119,0.14);
}

body.uiRedesignStep2 .topStats strong,
body.uiRedesignStep2 .topStats .bigValue {
  color: #f0f3f5;
}

body.uiRedesignStep2 .topStats span,
body.uiRedesignStep2 .topStats .muted {
  color: #c7d0d7;
}

body.uiRedesignStep2 .chartCard:nth-of-type(1) {
  grid-column: 2;
  grid-row: 2;
}

body.uiRedesignStep2 .chartCard:nth-of-type(2) {
  grid-column: 1;
  grid-row: 2;
}

body.uiRedesignStep2 .chartCard {
  padding: 16px 18px 18px;
}

body.uiRedesignStep2 .chartBox {
  min-height: 286px;
  border: 1px solid rgba(216,189,119,0.10);
  background:
    linear-gradient(rgba(255,255,255,0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.065) 1px, transparent 1px),
    rgba(5,8,12,0.54);
  background-size: 100% 24%, 10% 100%, auto;
}

body.uiRedesignStep2 .chartBox svg text,
body.uiRedesignStep2 .chartBox .tick text,
body.uiRedesignStep2 .chartBox .axis text {
  fill: rgba(227, 234, 240, 0.90) !important;
  color: rgba(227, 234, 240, 0.90) !important;
}

body.uiRedesignStep2 .chartBox .grid line,
body.uiRedesignStep2 .chartBox .tick line,
body.uiRedesignStep2 .chartBox line {
  stroke: rgba(235, 240, 245, 0.18) !important;
}

body.uiRedesignStep2 .legacyDeckungHidden {
  display: none !important;
}

body.uiRedesignStep2 .deckungStitchCard {
  margin-bottom: 16px;
  padding: 18px 18px 20px;
}

body.uiRedesignStep2 .deckungStitchHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

body.uiRedesignStep2 .deckungStitchTitle {
  color: #efe7d0;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.uiRedesignStep2 .deckungStitchSub {
  color: #c4ccd2;
  font-size: 13px;
}

body.uiRedesignStep2 .deckungStitchBody {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: center;
}

body.uiRedesignStep2 .deckungRing {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 6px auto;
  border: 1px solid rgba(216,189,119,0.16);
  background:
    conic-gradient(
    from -90deg,
    #4f744f 0deg 50.4deg,
    #6f8f55 50.4deg 100.8deg,
    #8aa56b 100.8deg 144deg,
    #4f6f8e 144deg 187.2deg,
    #6d89a3 187.2deg 223.2deg,
    #8ea2b6 223.2deg 252deg,
    #8b4d48 252deg 295.2deg,
    #a86159 295.2deg 331.2deg,
    #bf766a 331.2deg 360deg
  );
}

body.uiRedesignStep2 .deckungRing::before {
  content: "";
  position: absolute;
  inset: 26px;
  background: #070b0f;
  border: 1px solid rgba(216,189,119,0.30);
}

body.uiRedesignStep2 .deckungRing::after {
  content: "";
  position: absolute;
  inset: 72px;
  background:
    radial-gradient(circle at 46% 42%, rgba(77,96,72,0.70), transparent 28%),
    radial-gradient(circle at 58% 62%, rgba(42,64,77,0.78), transparent 30%),
    #080c10;
  border: 1px solid rgba(216,189,119,0.26);
}

body.uiRedesignStep2 .deckungCore {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  text-align: center;
}

body.uiRedesignStep2 .deckungCoreInner {
  color: #efe7d0;
}

body.uiRedesignStep2 .deckungCoreInner strong {
  display: block;
  font-size: 18px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

body.uiRedesignStep2 .deckungCoreInner span {
  display: block;
  margin-top: 6px;
  color: #c1c9cf;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.uiRedesignStep2 .deckungLegend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

body.uiRedesignStep2 .deckungItem {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(216,189,119,0.12);
  background: rgba(255,255,255,0.02);
}

body.uiRedesignStep2 .stitchGlyph {
  width: 44px;
  height: 44px;
  position: relative;
  border: 1px solid rgba(216,189,119,0.22);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.05), transparent 48%),
    rgba(255,255,255,0.01);
}

body.uiRedesignStep2 .stitchGlyph::before {
  content: "";
  position: absolute;
  inset: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body.uiRedesignStep2 .deckungLabel {
  color: #efe7d0;
  font-size: 14px;
  letter-spacing: 0.04em;
}

body.uiRedesignStep2 .deckungGroup {
  color: #aab4bc;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.uiRedesignStep2 .deckungPct {
  color: #d8bd77;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
  body.uiRedesignStep2 #view-wertmeter.active {
    grid-template-columns: 1fr;
  }

  body.uiRedesignStep2 .heroGrid,
  body.uiRedesignStep2 .chartCard:nth-of-type(1),
  body.uiRedesignStep2 .chartCard:nth-of-type(2) {
    grid-column: auto;
    grid-row: auto;
  }

  body.uiRedesignStep2 .deckungStitchBody {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  body.uiRedesignStep2 .deckungLegend {
    grid-template-columns: 1fr;
  }

  body.uiRedesignStep2 .deckungRing {
    width: 260px;
    height: 260px;
  }
}