/* ============================================================
   WinForms-Optik (System.Windows.Forms unter Windows 10).
   Alle Controls werden absolut positioniert - genau wie im
   Designer-Code der Originalanwendung.
   ============================================================ */

.wf {
  position: absolute;
  inset: 0;
  background: #f0f0f0;
  font-family: "Microsoft Sans Serif", Tahoma, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  color: #000;
  overflow: hidden;
}

.wf.scrollable { overflow: auto; }

/* Container fuer absolut positionierte Controls */
.wf-abs { position: absolute; }

/* ---------- Label ---------- */

.wf-label {
  position: absolute;
  white-space: pre;
  line-height: 13px;
  cursor: default;
}
.wf-label.bold { font-weight: 700; }
.wf-label.title { font-size: 15px; font-weight: 700; line-height: 20px; }
.wf-label.dim { color: #6d6d6d; }
.wf-label.warn { color: #b00000; }
.wf-label.ok { color: #0b7a20; }
.wf-label.wrap { white-space: pre-wrap; }

/* ---------- Button ---------- */

.wf-button {
  position: absolute;
  background: #e1e1e1;
  border: 1px solid #adadad;
  color: #000;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.2;
  padding: 1px 4px;
  cursor: default;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.wf-button.wrap { white-space: normal; }

/* Button.Image / Button.BackgroundImage aus WinForms.
   ImageAlign MiddleLeft + TextAlign MiddleRight = Icon links, Text rechts. */
.wf-button.has-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 6px;
}
.wf-button.has-icon .wf-btn-icon { flex: 0 0 auto; }
.wf-button.has-icon .wf-btn-text { flex: 1 1 auto; text-align: right; }
.wf-button.icon-left { justify-content: space-between; }
.wf-button.icon-center { justify-content: center; }
.wf-button.icon-top { flex-direction: column; justify-content: flex-start; padding-top: 4px; }
.wf-button.icon-top .wf-btn-text { flex: 0 0 auto; text-align: center; }
.wf-button:disabled .wf-btn-icon { opacity: .4; }

/* BackgroundImage mit ImageLayout.Stretch */
.wf-button.bg-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.wf-button.bg-image:hover:not(:disabled) { background-color: #e5f1fb; }
.wf-button.bg-image:disabled { opacity: .45; }
.wf-button:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d7; }
.wf-button:active:not(:disabled) { background: #cce4f7; border-color: #005499; }
.wf-button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.wf-button:disabled { background: #efefef; border-color: #d0d0d0; color: #8f8f8f; }
.wf-button.default { border-color: #0078d7; }
.wf-button.small { font-size: 10px; }

/* ---------- TextBox ---------- */

.wf-text {
  position: absolute;
  background: #fff;
  border: 1px solid #7a7a7a;
  font-family: inherit;
  font-size: 11px;
  color: #000;
  padding: 1px 2px;
  height: 20px;
}
.wf-text:focus { outline: none; border-color: #0078d7; }
.wf-text:disabled, .wf-text[readonly] { background: #f0f0f0; color: #6d6d6d; }
.wf-text.multiline {
  height: auto;
  resize: none;
  line-height: 1.35;
  overflow-y: auto;
  white-space: pre-wrap;
  padding: 2px 3px;
}
.wf-text.readonly-log {
  background: #f0f0f0;
  color: #000;
  font-family: "Microsoft Sans Serif", Tahoma, sans-serif;
}

/* ---------- ComboBox ---------- */

.wf-combo {
  position: absolute;
  height: 21px;
  background: #fff;
  border: 1px solid #7a7a7a;
  font-family: inherit;
  font-size: 11px;
  color: #000;
  padding: 1px 2px;
  cursor: default;
  -webkit-appearance: menulist;
  appearance: menulist;
}
.wf-combo:disabled { background: #f0f0f0; color: #6d6d6d; }
.wf-combo:focus { outline: none; }

/* ---------- CheckBox / RadioButton ---------- */

.wf-check {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 17px;
  cursor: default;
  white-space: nowrap;
}
.wf-check input { margin: 0; width: 13px; height: 13px; flex: 0 0 13px; cursor: default; }
.wf-check span { line-height: 13px; }
.wf-check.disabled { color: #8f8f8f; }
.wf-check.strike span { text-decoration: line-through; }

/* ---------- GroupBox ---------- */

.wf-group {
  position: absolute;
  border: 1px solid #d5d5d5;
  border-radius: 0;
}
.wf-group > .wf-group-title {
  position: absolute;
  top: -7px;
  left: 8px;
  background: #f0f0f0;
  padding: 0 3px;
  font-size: 11px;
  line-height: 13px;
  color: #000;
  white-space: nowrap;
}

/* ---------- Panel ---------- */

.wf-panel { position: absolute; background: #f0f0f0; }
.wf-panel.sunken { border: 1px solid #a0a0a0; background: #fff; }
.wf-panel.white { background: #fff; }

.wf-pic { position: absolute; }
.wf-pic img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- MenuStrip ---------- */

.wf-menustrip {
  position: absolute;
  left: 0;
  top: 0;
  height: 24px;
  background: #f0f0f0;
  display: flex;
  align-items: stretch;
  z-index: 30;
  border-bottom: 1px solid #f0f0f0;
}

.wf-menu-root {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: #000;
  padding: 0 8px;
  cursor: default;
  white-space: nowrap;
}
.wf-menu-root:hover, .wf-menu-root.open { background: #cce8ff; }

.wf-dropdown {
  position: absolute;
  z-index: 80;
  background: #f1f1f1;
  border: 1px solid #a0a0a0;
  padding: 2px 0;
  min-width: 200px;
  box-shadow: 2px 2px 4px rgba(0,0,0,.22);
}

.wf-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: #000;
  text-align: left;
  padding: 4px 18px 4px 26px;
  cursor: default;
  white-space: nowrap;
  position: relative;
}
.wf-menu-item:hover { background: #91c9f7; }
.wf-menu-item.checked::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 9px;
  height: 5px;
  margin-top: -4px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
}
.wf-menu-item.strike { text-decoration: line-through; color: #6d6d6d; }
.wf-menu-sep { border: 0; border-top: 1px solid #d7d7d7; margin: 3px 1px; }

/* ---------- TabControl ---------- */

.wf-tabs {
  position: absolute;
  display: flex;
  align-items: flex-end;
  height: 21px;
  z-index: 3;
}
.wf-tab {
  border: 1px solid #d5d5d5;
  border-bottom: 0;
  background: #f0f0f0;
  font-family: inherit;
  font-size: 11px;
  color: #6d6d6d;
  padding: 3px 9px 3px;
  cursor: default;
  margin-right: 1px;
}
.wf-tab.active { background: #fff; color: #000; }

/* ---------- ListView (ObjectListView) ---------- */

.wf-listview {
  position: absolute;
  background: #fff;
  border: 1px solid #a0a0a0;
  overflow: auto;
  font-size: 11px;
}

.wf-listview table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.wf-listview thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(#ffffff, #f3f3f3 45%, #ebebeb 46%, #e2e2e2);
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d0d0d0;
  font-weight: 400;
  font-size: 11px;
  text-align: left;
  padding: 4px 6px;
  color: #000;
  white-space: nowrap;
  cursor: default;
}

.wf-listview tbody td {
  border-right: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  height: 25px;
  vertical-align: middle;
}

.wf-listview tbody tr.selected td { background: #cbe8f6; }
.wf-listview tbody tr:hover td { background: #eaf6fd; }
.wf-listview tbody tr.selected:hover td { background: #c0e3f5; }

.wf-listview tbody td.cell-ok { color: #0b7a20; }
.wf-listview tbody td.cell-err { color: #b00000; }
.wf-listview tbody td.cell-wait { color: #a06000; }

.wf-listview .empty-note {
  padding: 12px;
  color: #8f8f8f;
}

/* Buttons innerhalb von ListView-Zellen (ObjectListView Button-Renderer) */
.lv-btn {
  display: inline-block;
  width: 100%;
  min-width: 84px;
  background: #e1e1e1;
  border: 1px solid #adadad;
  font-family: inherit;
  font-size: 11px;
  padding: 2px 4px;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-btn:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d7; }
.lv-btn:active:not(:disabled) { background: #cce4f7; }
.lv-btn:disabled { background: #efefef; border-color: #d5d5d5; color: #9a9a9a; }

/* ---------- NumericUpDown / Zeit-Eingabe ---------- */

.wf-spin { position: absolute; display: flex; height: 20px; }
.wf-spin input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #7a7a7a;
  border-right: 0;
  background: #fff;
  font-family: inherit;
  font-size: 11px;
  padding: 1px 3px;
}
.wf-spin input:disabled { background: #f0f0f0; color: #6d6d6d; }
.wf-spin .spin-btns { display: flex; flex-direction: column; width: 17px; flex: 0 0 17px; }
.wf-spin .spin-btns button {
  flex: 1 1 50%;
  border: 1px solid #7a7a7a;
  background: #f0f0f0;
  padding: 0;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.wf-spin .spin-btns button:first-child { border-bottom: 0; }
.wf-spin .spin-btns button:hover { background: #dcecfc; }
.wf-spin .spin-btns svg { width: 7px; height: 4px; }

/* ---------- MessageBox ---------- */

.msgbox-body {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 12px;
  color: #000;
}
.msgbox-main { flex: 1 1 auto; display: flex; gap: 14px; padding: 18px 18px 10px; }
.msgbox-icon { flex: 0 0 32px; }
.msgbox-text { flex: 1 1 auto; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.msgbox-buttons {
  flex: 0 0 auto;
  background: #f0f0f0;
  border-top: 1px solid #dfdfdf;
  padding: 10px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.msgbox-buttons button {
  min-width: 88px;
  height: 24px;
  background: #e1e1e1;
  border: 1px solid #adadad;
  font-family: inherit;
  font-size: 12px;
  cursor: default;
  padding: 0 10px;
}
.msgbox-buttons button:hover { background: #e5f1fb; border-color: #0078d7; }
.msgbox-buttons button.default { border-color: #0078d7; }

/* ---------- Editor-Listen (HMAC-PID-Verwaltung, Proxies, Profile) ---------- */

.wf-list {
  position: absolute;
  background: #fff;
  border: 1px solid #7a7a7a;
  overflow: auto;
  font-size: 11px;
}
.wf-list-row {
  padding: 3px 6px;
  cursor: default;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-list-row:hover { background: #eaf6fd; }
.wf-list-row.selected { background: #0078d7; color: #fff; }
.wf-list-row .badge {
  margin-left: auto;
  font-size: 10px;
  color: #6d6d6d;
}
.wf-list-row.selected .badge { color: #dbeeff; }

/* ---------- simuliertes Browser-Fenster (CefSharp im Original) ---------- */

.fakebrowser { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }

.fb-bar {
  flex: 0 0 34px;
  background: #f2f2f2;
  border-bottom: 1px solid #d6d6d6;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-family: "Segoe UI", Tahoma, sans-serif;
}
.fb-nav {
  width: 24px; height: 22px;
  border: 1px solid #cfcfcf; background: #fafafa;
  cursor: default; font-size: 12px; line-height: 1; padding: 0;
}
.fb-url {
  flex: 1 1 auto;
  height: 22px;
  border: 1px solid #cfcfcf;
  background: #fff;
  font-size: 11px;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: #333;
  padding: 0 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-page {
  flex: 1 1 auto;
  overflow: auto;
  background: #fff;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #000;
  font-size: 13px;
}

/* Die Buttonleiste unten am Fenster gehoerte zum Bot, nicht zur Seite
   (ppButton / ccButton / cartButton / closeButton in BrowserForm). */
.fb-actions {
  flex: 0 0 auto;
  background: #f0f0f0;
  border-top: 1px solid #dcdcdc;
  padding: 5px 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.fb-actions button {
  width: 75px; height: 23px;
  background: #e1e1e1;
  border: 1px solid #adadad;
  font-family: "Microsoft Sans Serif", Tahoma, sans-serif;
  font-size: 11px;
  cursor: default;
  padding: 0;
}
.fb-actions button:hover { background: #e5f1fb; border-color: #0078d7; }
.fb-actions button.default { border-color: #0078d7; }

/* ---------- adidas Shop: gemeinsame Elemente ---------- */

.adi { min-height: 100%; background: #f4f4f4; }

.adi-utility {
  background: #000;
  color: #d2d2d2;
  font-size: 10px;
  letter-spacing: .04em;
  padding: 7px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  text-transform: uppercase;
}
.adi-utility span { cursor: default; }
.adi-utility span.strong { color: #fff; font-weight: 600; }

.adi-nav {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 22px;
}
.adi-logo { width: 58px; height: 38px; flex: 0 0 58px; }
.adi-nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.adi-nav-links .sep { width: 1px; height: 13px; background: #555; }
.adi-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: #767676;
  height: 30px;
  width: 170px;
  padding: 0 10px;
  font-size: 12px;
}
.adi-bag {
  width: 34px; height: 34px;
  background: #0071ae;
  display: flex; align-items: center; justify-content: center;
}

.adi-page { padding: 22px 26px 40px; }

/* Blaue adidas-Buttons */
.adi-btn-blue {
  display: block;
  width: 100%;
  background: #0071ae;
  color: #fff;
  border: 0;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: default;
  text-align: center;
}
.adi-btn-blue:hover { background: #005b8c; }
.adi-btn-blue:disabled { background: #7fb2cd; }
.adi-btn-blue .chev {
  display: inline-block;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  color: #0071ae;
  font-size: 9px;
  line-height: 15px;
  margin-left: 8px;
  vertical-align: -2px;
}

.adi-btn-pp {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #eee;
  border: 1px solid #d8d8d8;
  padding: 9px 16px;
  cursor: default;
  font-family: inherit;
}
.adi-btn-pp:hover { background: #e4e4e4; }
.adi-btn-pp .pp-label { font-size: 9px; line-height: 1.15; color: #333; text-align: right; }
.adi-btn-pp .pp-logo { font-size: 17px; font-weight: 700; font-style: italic; letter-spacing: -.02em; }
.adi-btn-pp .pp-logo i { color: #253b80; font-style: italic; }
.adi-btn-pp .pp-logo b { color: #179bd7; font-weight: 700; }

.adi-or { text-align: center; font-size: 11px; color: #767676; margin: 7px 0; letter-spacing: .04em; }

/* Bestellübersicht (rechte Spalte, beide Seiten) */
.adi-summary-title {
  font-size: 14px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; margin: 18px 0 8px;
}
.adi-summary-title span { font-weight: 400; }
.adi-summary {
  background: #fff;
  border: 1px solid #e3e3e3;
  padding: 14px 16px;
  font-size: 13px;
}
.adi-summary .row { display: flex; justify-content: space-between; padding: 5px 0; }
.adi-summary .row.muted { color: #767676; }
.adi-summary .row .free { color: #e4002b; font-weight: 700; }
.adi-summary .head { font-size: 12px; color: #767676; padding-bottom: 8px; }
.adi-summary .total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid #e3e3e3; margin-top: 10px; padding-top: 12px;
  font-weight: 700;
}
.adi-summary .total .amount { font-size: 19px; }
.adi-summary .tax { font-size: 11px; color: #767676; margin-top: 4px; }

.adi-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid #9a9a9a; color: #767676;
  font-size: 9px; margin-left: 5px; vertical-align: 1px;
}

/* ---------- Warenkorb ---------- */

.adi-cart { display: flex; gap: 26px; align-items: flex-start; }
.adi-cart-main { flex: 1 1 auto; min-width: 0; }
.adi-cart-side { flex: 0 0 232px; }

.adi-cart-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; }
.adi-cart-head h1 {
  font-size: 27px; font-weight: 700; margin: 0;
  text-transform: uppercase; letter-spacing: -.01em;
}
.adi-cart-head .count { font-size: 12px; color: #767676; text-transform: uppercase; }
.adi-cart-head .cont { margin-left: auto; font-size: 13px; color: #0071ae; cursor: default; }

.adi-line { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 24px; }
.adi-line .thumb {
  width: 128px; height: 108px; flex: 0 0 128px;
  background: #ece9e2;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.adi-line .thumb img { width: 100%; height: 100%; object-fit: contain; }
.adi-line .thumb .noimg { font-size: 10px; color: #9a9a9a; }
.adi-line .info { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.75; }
.adi-line .info .name { font-size: 13px; font-weight: 700; text-transform: uppercase; }
.adi-line .info .pid { color: #767676; margin-bottom: 6px; }
.adi-line .info b { font-weight: 700; }
.adi-line .info .instock { color: #3f9b35; margin-left: 10px; }
.adi-line .info .del { color: #0071ae; cursor: default; display: inline-block; margin-top: 4px; }
.adi-line .qty { flex: 0 0 auto; }
.adi-line .qty select {
  width: 56px; height: 34px; border: 1px solid #b5b5b5;
  font-family: inherit; font-size: 13px; padding: 0 6px; background: #fff;
}
.adi-line .price { flex: 0 0 auto; font-size: 15px; font-weight: 700; padding-top: 6px; }

.adi-cart-cta { display: flex; align-items: center; gap: 14px; margin: 6px 0 30px; }
.adi-cart-cta .adi-btn-blue { width: 168px; }
.adi-cart-cta .adi-btn-pp { width: 168px; }
.adi-cart-cta .or { font-size: 11px; color: #767676; }

.adi-usp { display: flex; gap: 34px; font-size: 11px; font-weight: 700; }
.adi-usp div { display: flex; align-items: center; gap: 9px; }
.adi-usp .ico {
  width: 27px; height: 27px; border-radius: 50%; background: #000;
  display: flex; align-items: center; justify-content: center; flex: 0 0 27px;
}

/* ---------- Bestellbestätigung ---------- */

.adi-conf { display: flex; gap: 30px; align-items: flex-start; }
.adi-conf-main { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.65; }
.adi-conf-side { flex: 0 0 268px; }

.adi-conf-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.adi-conf-head h1 {
  font-size: 25px; font-weight: 700; margin: 0;
  text-transform: uppercase; letter-spacing: -.01em;
}
.adi-conf-head .print { margin-left: auto; font-size: 12px; text-decoration: underline; cursor: default; }

.adi-conf-main h3 { font-size: 13px; font-weight: 700; margin: 22px 0 2px; }
.adi-conf-main p { margin: 0 0 6px; }
.adi-conf-main a { color: #000; text-decoration: underline; cursor: default; }
.adi-conf-main .ordernum { font-weight: 700; }
.adi-conf-main .closing { font-weight: 700; margin-top: 22px; }
.adi-conf-main .rule { border-top: 1px solid #dcdcdc; margin-top: 26px; }

.adi-conf-prod { border-top: 1px solid #e3e3e3; margin-top: 14px; padding-top: 14px; display: flex; gap: 12px; }
.adi-conf-prod .thumb {
  width: 78px; height: 78px; flex: 0 0 78px;
  background: #ece9e2; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.adi-conf-prod .thumb img { width: 100%; height: 100%; object-fit: contain; }
.adi-conf-prod .meta { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.65; color: #333; }
.adi-conf-prod .meta .name { font-weight: 700; color: #000; text-transform: uppercase; }
.adi-conf-prod .meta .amt { display: flex; justify-content: space-between; margin-top: 8px; }

.adi-chat {
  position: absolute; right: 0; bottom: 0;
  width: 44px; height: 44px; background: #000;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Zahlungsseiten ---------- */

.adi-pay { max-width: 620px; }
.adi-pay h2 {
  font-size: 20px; font-weight: 700; margin: 0 0 18px;
  text-transform: uppercase; letter-spacing: -.01em;
}
.adi-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 18px 0 22px; }
.adi-form label {
  display: block; font-size: 10px; color: #767676;
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em;
}
.adi-form input {
  width: 100%; height: 34px; border: 1px solid #b5b5b5; padding: 0 8px;
  font-family: inherit; font-size: 13px; background: #fff;
}
.adi-form .span2 { grid-column: 1 / -1; }
.adi-pay .adi-btn-blue { width: 220px; }

/* ---------- adidas Splash Page ----------
   Nachbau der echten Yeezy-Splash-Page von 2017.            */

.splashpage {
  min-height: 100%;
  background: #edece6;
  color: #1a1a1a;
  padding: 34px 40px 48px;
  font-family: "Bahnschrift Condensed", "Bahnschrift", "Franklin Gothic Medium Cond",
               "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "zero" 1;
  text-transform: uppercase;
  letter-spacing: .012em;
}

/* Der kleine Drei-Punkte-Loader oben links */
.splashpage .sp-loader {
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0 0 26px 4px;
  animation: sp-spin 1.4s linear infinite;
}
.splashpage .sp-loader i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a1a1a;
}
.splashpage .sp-loader i:nth-child(1) { top: 0;    left: 10px; opacity: 1; }
.splashpage .sp-loader i:nth-child(2) { top: 8px;  left: 20px; opacity: .55; }
.splashpage .sp-loader i:nth-child(3) { top: 17px; left: 4px;  opacity: .25; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.splashpage .sp-text { max-width: 680px; }
.splashpage .sp-text p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}
.splashpage .sp-text p + p { margin-top: 26px; }

.splashpage .sp-product {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 44px;
}
.splashpage .sp-product-name {
  flex: 0 0 210px;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 500;
}
.splashpage .sp-product-img {
  flex: 1 1 auto;
  max-width: 420px;
  background: #e6e5df;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.splashpage .sp-shoe { width: 100%; height: auto; display: block; }

/* Text-Viewer (readme.txt) */
.notepad {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; background: #fff; color: #000;
}
.notepad .np-menu {
  flex: 0 0 auto; background: #f0f0f0; border-bottom: 1px solid #e0e0e0;
  display: flex; font-size: 11px; font-family: "Segoe UI", Tahoma, sans-serif;
}
.notepad .np-menu span { padding: 4px 9px; cursor: default; }
.notepad .np-menu span:hover { background: #cce8ff; }
.notepad textarea {
  flex: 1 1 auto; border: 0; outline: none; resize: none;
  font-family: Consolas, "Lucida Console", monospace;
  font-size: 12px; line-height: 1.5; padding: 8px 10px; color: #000;
}