/* ============================================================
   ETS in ONLINE PLUS — Prototype styles
   GC Gruppe / Cordes & Graefe Bremen chrome + ETS module
   Tokens come from ds/colors_and_type.css
   ============================================================ */

:root {
  --topbar-h: 35px;
  --header-h: 87px;
  --accent-stripe-h: 4px;
  --sidebar-w: 240px;
  --rail-w: 260px;
}

html, body { margin: 0; padding: 0; background: var(--gc-neutral-300); }
/* clip (not hidden) — hidden creates a scroll container that breaks
   position: sticky for descendants. */
html { scrollbar-gutter: stable; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  min-height: 100vh;
}

* { box-sizing: border-box; }
button { font: inherit; cursor: pointer; }

/* ---------- App shell ---------- */
.shell {
  min-height: 100vh;
  background: var(--gc-neutral-300);
}

.shell-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: 16px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 20px 80px;
  align-items: start;
}
/* On the Startseite the ad rail comes back as a third column. */
.shell-body.has-rail {
  grid-template-columns: var(--sidebar-w) 1fr var(--rail-w);
}

/* Chrome (topbar + header + accent + breadcrumb) follows the same 1600 max
   width so the whole layout lines up edge-to-edge. */
.topbar,
.header,
.accent-stripe {
  max-width: 1600px;
  margin: 0 auto;
}

/* ---------- Top black bar (Cordes & Graefe) ---------- */
.topbar {
  height: var(--topbar-h);
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  line-height: var(--topbar-h);
}
.topbar .firma {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .spacer { flex: 1; }
.topbar .lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.topbar .lang .flag {
  width: 16px;
  height: 11px;
  display: inline-flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.25);
}
.topbar .lang .flag span {
  flex: 1;
  display: block;
}

/* ---------- White header (sticky) ---------- */
.header {
  background: #fff;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  max-width: 1600px;
  margin: 0 auto;
}
.accent-stripe {
  position: sticky;
  top: var(--header-h);
  z-index: 49;
}
.header .header-inner {
  display: flex;
  align-items: center;
  padding: 20px 20px;
  width: 100%;
  gap: 16px;
}

.header .brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  padding-left: 0;
}
.header .brand .logo-img-red {
  width: 38px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header .brand .logo-img-red img { width: 100%; height: 100%; display: block; }
.header .brand .logo-img-gruppe {
  width: 40px;
  height: 40px;
  display: block;
}
.header .brand .brand-title {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
  color: #303030;
  letter-spacing: 0;
}
.header .brand .brand-title .h1 {
  font-family: "GC Klavika", "Saira Semi Condensed", sans-serif;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: 0;
  line-height: 1;
  color: #303030;
}
.header .brand .brand-title .h2 {
  font-family: "GC Klavika", "Saira Semi Condensed", sans-serif;
  font-weight: 400;
  font-size: 21px;
  margin-top: 2px;
  color: #303030;
  letter-spacing: 0;
  text-transform: uppercase;
}

.header .search {
  flex: 1;
  position: relative;
  margin-left: 24px;
}
.header .search input {
  width: 100%;
  height: 44px;
  font: inherit;
  font-size: 14px;
  padding: 0 48px 0 16px;
  border-radius: 5px;
  border: 1px solid var(--gc-neutral-400);
  background: var(--gc-neutral-300);
  color: var(--fg-1);
}
.header .search input::placeholder { color: var(--fg-3); }
.header .search input:focus { outline: none; border-color: var(--gc-red-500); box-shadow: var(--shadow-focus); }
.header .search .search-cancel {
  position: absolute; right: 48px; top: 50%; transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--gc-red-500);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  cursor: pointer;
}
.header .search .search-cancel:hover { color: var(--gc-red-700); }
.header .search .search-ico {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--fg-2);
  pointer-events: none;
}

/* Secondary button (per design system) — used for Ersatzteilfinder */
.header .btn-secondary.ets-trigger {
  background: #fff;
  color: var(--fg-2);
  border: 1px solid var(--gc-neutral-400);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 0 16px;
  height: 44px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.2,0,0,1), color 160ms, border-color 160ms;
  white-space: nowrap;
}
.header .btn-secondary.ets-trigger:hover {
  background: var(--gc-neutral-200);
  border-color: var(--gc-neutral-500);
  color: var(--fg-1);
}
.header .btn-secondary.ets-trigger.active {
  background: var(--gc-red-500);
  color: #fff;
  border-color: var(--gc-red-500);
}

.header .icon-btn {
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  color: var(--fg-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.header .icon-btn:hover { color: var(--gc-red-500); }

/* Labeled header icons (Ersatzteile · Vorgänge · Warenkörbe) */
.header .hdr-icons { display: flex; align-items: flex-start; gap: 26px; flex-shrink: 0; }
.header .hdr-item {
  background: transparent; border: 0; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--fg-1);
}
.header .hdr-ico { position: relative; width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; }
.header .hdr-label { font-size: 11px; font-weight: 400; color: var(--fg-2); white-space: nowrap; letter-spacing: 0; line-height: 1; }
.header .hdr-item:hover { color: var(--gc-red-500); }
.header .hdr-item:hover .hdr-label { color: var(--gc-red-500); }
.header .hdr-ico .ets-pipe-dot {
  position: absolute; top: -1px; right: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gc-red-500); border: 1.5px solid #fff;
}

.header .cart-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.header .cart-wrap .cart {
  background: transparent;
  color: var(--fg-1);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header .cart-wrap .cart:hover { background: transparent; color: var(--gc-red-500); }
.header .cart-wrap .cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: inline-flex;
  align-items: stretch;
  background: var(--gc-neutral-200);
  border: 1px solid var(--gc-neutral-400);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.header .cart-wrap .cart-badge-active,
.header .cart-wrap .cart-badge-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  min-width: 18px;
}
.header .cart-wrap .cart-badge-active {
  background: var(--gc-red-500);
  color: #fff;
}
.header .cart-wrap .cart-badge-total {
  background: var(--gc-neutral-200);
  color: var(--fg-2);
}

/* ---------- Yellow accent stripe (sticky alongside the header) ---------- */
.accent-stripe {
  height: var(--accent-stripe-h);
  background: var(--gc-yellow-500);
  position: sticky;
  top: var(--header-h);
  z-index: 49;
  max-width: 1600px;
  margin: 0 auto;
}

/* ---------- Breadcrumb row ---------- */
.crumb-row {
  background: var(--gc-neutral-300);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 1600px;
  margin: 0 auto;
}
.crumb-row a, .crumb-row .crumb-item {
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
}
.crumb-row .crumb-item.active { color: var(--fg-2); }
.crumb-row .sep { color: var(--gc-neutral-500); }

/* ---------- Sidebar (left) — sticky ---------- */
.sidebar {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: calc(var(--header-h) + var(--accent-stripe-h) + 16px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - var(--accent-stripe-h) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.user-card {
  background: #fff;
  padding: 0;
  border-bottom: 1px solid var(--gc-neutral-300);
}
.user-card .acct-row {
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--gc-neutral-300);
}
.user-card .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gc-neutral-200);
  color: var(--fg-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-body);
}
.user-card .acct-row .name {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.user-card .acct-row .chev { color: var(--fg-2); }
.user-card .acct-row.expanded { color: var(--gc-red-500); }
.user-card .acct-row.expanded .name { color: var(--gc-red-500); }
.user-card .acct-detail {
  padding: 14px 18px 8px;
  background: #fff;
  border-bottom: 1px solid var(--gc-neutral-300);
  position: relative;
}
.user-card .acct-detail .row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.user-card .acct-detail .row .full {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-1);
}
.user-card .acct-detail .row .close {
  width: 20px; height: 20px;
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-card .acct-detail .sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-1);
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.user-card .acct-detail .sub:hover { color: var(--gc-red-500); }
.user-card .acct-detail .logout-btn {
  display: block;
  width: 100%;
  background: #fff;
  color: var(--gc-red-500);
  border: 1px solid var(--gc-red-500);
  padding: 10px 0;
  margin: 8px 0 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.user-card .acct-detail .logout-btn:hover { background: var(--gc-red-500); color: #fff; }

.nav { background: #fff; padding: 0; }
.nav .nav-item {
  display: flex; align-items: center;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid var(--gc-neutral-300);
  transition: background 140ms, color 140ms;
  gap: 6px;
}
.nav .nav-item-wrap:last-child .nav-item { border-bottom: 0; }
.nav .nav-item:hover { background: var(--gc-neutral-200); color: var(--gc-red-500); }
.nav .nav-item:hover .chev { color: var(--gc-red-500); }
.nav .nav-item.active { background: #fff; color: var(--gc-red-500); }
.nav .nav-item.active .chev { color: var(--gc-red-500); }
.nav .nav-item .chev { margin-left: auto; color: var(--fg-3); }
.nav .nav-item .pct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  background: transparent;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.nav .nav-item .pct-badge svg { display: block; width: 100%; height: 100%; }
.nav .nav-item.ets-link { color: var(--gc-red-500); }
.nav .nav-item.ets-link.active { background: var(--gc-yellow-50); color: var(--gc-red-700); }

/* ---- Sidebar accordion submenu (e.g. Produktsuche → Ersatzteilservice…) ---- */
.nav-item-wrap { position: relative; }
.nav .nav-item.is-open {
  background: #fff;
  color: var(--gc-red-500);
  border-bottom-color: transparent;
}
.nav .nav-item.is-open .chev {
  color: var(--gc-red-500);
  transform: rotate(90deg);
}
.nav .nav-item .chev { transition: transform 160ms ease; }

.nav-sub {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--gc-neutral-200);
  border-bottom: 1px solid var(--gc-neutral-300);
}
.nav-sub-item {
  display: flex;
  align-items: center;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: rgb(48, 48, 48);
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms;
}
.nav-sub-item:hover { color: var(--gc-red-500); }
.nav-sub-item.active { color: var(--gc-red-500); }

.nav-sub-badge {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F8C8BA;
  color: #802B11;
  border: 1px solid #F08869;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
}

/* "Neu"-style circular badge — same visual treatment as the Sonderangebote
   pct-badge (peach circle, salmon ring, dark sparkle inside) so the two
   secondary indicators look like siblings. */
.nav-sub-badge-new {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nav-sub-badge-new svg { display: block; width: 100%; height: 100%; }

/* ---------- Right ad rail ---------- */
.ad-rail {
  display: flex; flex-direction: column;
  gap: 12px;
}
.ad-card {
  background: #fff;
  padding: 8px;
}
.ad-card .anz {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.ad-card .ad-body {
  height: 320px;
  display: flex; flex-direction: column;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.ad-card.conel .ad-body {
  background: linear-gradient(180deg, #ffffff 0%, #eaf3ff 100%);
}
.ad-card.conel .brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--bu-hydro-blue);
  letter-spacing: 0.04em;
}
.ad-card.conel .brand .small {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--bu-hydro-blue);
  margin-top: 2px;
}
.ad-card.conel .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--bu-hydro-blue);
  margin: 12px 0 2px;
  letter-spacing: -0.01em;
}
.ad-card.conel .desc {
  font-size: 12px;
  color: var(--fg-2);
}
.ad-card.conel .sticker {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--gc-red-500);
  color: var(--gc-yellow-500);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-12deg);
  padding: 6px;
}

.ad-card.maxiflex .ad-body {
  background: linear-gradient(135deg, var(--gc-red-500), var(--gc-red-700));
  color: #fff;
}
.ad-card.maxiflex .brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.ad-card.maxiflex .desc {
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.4;
}
.ad-card.maxiflex .glove {
  position: absolute;
  right: -20px; bottom: -10px;
  font-size: 100px;
  opacity: 0.4;
}

/* ---------- Main content surface ---------- */
.main {
  background: #fff;
  min-height: 700px;
  padding: 28px 36px 48px;
  position: relative;
  min-width: 0;
  overflow-x: clip;
}

/* ---------- Page heading ---------- */
.ets-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 8px;
  gap: 24px;
}
.ets-page-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-1);
  margin: 0 0 6px;
}
.ets-page-head .lede {
  font-size: 15px;
  color: var(--fg-2);
  max-width: 640px;
  line-height: 1.45;
}
.ets-page-head .help-link {
  font-size: 12px;
  color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
}
.ets-page-head .help-link:hover { color: var(--gc-red-500); }

/* Back link variant — sits above the page heading on the left. */
.ets-page-head .help-link.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

/* Page-head aside — stacked help links on the right of the page title. */
.ets-page-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.help-link-sub {
  font-size: 11px;
  color: var(--fg-3);
}
.help-link-sub:hover { color: var(--gc-red-500); }

/* ---------- 3-step strip ---------- */
.step-strip {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  align-items: center;
  margin: 24px 0 28px;
  background: var(--gc-neutral-200);
  border-left: 4px solid var(--gc-yellow-500);
  padding: 18px 24px;
  gap: 6px;
}
.step-strip .step {
  display: flex; align-items: center; gap: 14px;
}
.step-strip .step .num {
  width: 32px; height: 32px;
  background: var(--gc-red-500);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  border-radius: 50%;
}
.step-strip .step .txt .ttl {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
  letter-spacing: 0.02em;
}
.step-strip .step .txt .sub {
  font-size: 12px;
  color: var(--fg-3);
}
.step-strip .arrow {
  color: var(--gc-neutral-500);
  display: flex; justify-content: center;
}

/* ---------- Dual entry: photo + text ---------- */
.entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.entry-col h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.entry-col .help {
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.entry-col .or-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 4px;
}

.dropzone {
  background: var(--gc-neutral-100);
  border: 2px dashed var(--gc-neutral-400);
  padding: 28px 24px;
  text-align: center;
  min-height: 268px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  transition: all 160ms;
  cursor: pointer;
}
.dropzone:hover { border-color: var(--gc-red-500); background: var(--gc-red-50); }
.dropzone .icon-wrap {
  width: 64px; height: 64px;
  background: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gc-red-500);
  box-shadow: var(--shadow-xs);
}
.dropzone .dz-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--fg-1);
}
.dropzone .dz-sub {
  font-size: 13px;
  color: var(--fg-3);
}
.dropzone .dz-btns {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}
.dropzone .dz-btn {
  background: #fff;
  border: 1px solid var(--gc-neutral-400);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  display: inline-flex; align-items: center; gap: 6px;
}
.dropzone .dz-btn.primary { background: var(--gc-red-500); color: #fff; border-color: var(--gc-red-500); }
.dropzone .dz-btn.primary:hover { background: var(--gc-red-600); }
.dropzone .dz-btn:hover { border-color: var(--gc-red-500); color: var(--gc-red-500); }
.dropzone .dz-btn.primary:hover { color: #fff; }
.dropzone .dz-hint {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 4px;
}

.text-input-wrap {
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  padding: 16px;
  min-height: 268px;
  display: flex; flex-direction: column;
}
.text-input-wrap label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--fg-3);
  margin-bottom: 8px;
  display: block;
}
.text-input-wrap textarea {
  width: 100%;
  border: 1px solid var(--gc-neutral-300);
  background: #fff;
  font: inherit;
  font-size: 15px;
  padding: 14px 16px;
  resize: none;
  min-height: 110px;
  color: var(--fg-1);
  line-height: 1.45;
}
.text-input-wrap textarea:focus {
  outline: none;
  border-color: var(--gc-red-500);
  box-shadow: var(--shadow-focus);
}
.text-input-wrap .examples {
  margin-top: 12px;
  font-size: 12px;
  color: var(--fg-3);
}
.text-input-wrap .examples .pill {
  display: inline-block;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 9999px;
  margin: 4px 4px 0 0;
  cursor: pointer;
  font-size: 12px;
  color: var(--fg-2);
  transition: all 140ms;
}
.text-input-wrap .examples .pill:hover { border-color: var(--gc-red-500); color: var(--gc-red-500); }
.text-input-wrap .primary-cta {
  margin-top: auto;
  align-self: flex-end;
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.text-input-wrap .primary-cta:hover { background: var(--gc-red-600); }

/* ---------- Letzte Suchen ---------- */
.recent-block { margin-top: 28px; }
.recent-block h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 10px;
  letter-spacing: 0;
}
.recent-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.recent-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  cursor: pointer;
  transition: all 140ms;
}
.recent-item:hover {
  border-color: var(--gc-red-500);
  background: #fff;
}
.recent-item .thumb {
  width: 40px; height: 40px;
  background: var(--gc-neutral-300);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
}
.recent-item .body { flex: 1; min-width: 0; }
.recent-item .body .ttl {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-item .body .meta {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 1px;
}

/* ---------- Auftragstag ---------- */
.auftrag-row {
  display: flex; align-items: center;
  gap: 12px;
  margin-top: 28px;
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  padding: 12px 16px;
}
.auftrag-row .lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 6px;
}
.auftrag-row input {
  flex: 0 0 200px;
  border: 1px solid var(--gc-neutral-400);
  background: #fff;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
}
.auftrag-row .hint {
  font-size: 11px;
  color: var(--fg-muted);
}

/* ---------- Upload-state ---------- */
.upload-state {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}
.thumbs-card { background: var(--gc-neutral-100); border: 1px solid var(--gc-neutral-300); padding: 18px; }
.thumbs-card .head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.thumbs-card .head .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.thumbs-card .head .ttl .count {
  color: var(--fg-3);
  font-weight: 500;
  margin-left: 6px;
}
.thumbs-card .head .clear {
  font-size: 12px;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.thumbs-card .head .clear:hover { color: var(--gc-red-500); }
.thumbs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.thumb-cell {
  position: relative;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.thumb-cell img {
  width: 100%; height: 100%; object-fit: cover;
}
.thumb-cell.add {
  border-style: dashed;
  color: var(--fg-3);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
  background: transparent;
}
.thumb-cell.add:hover { color: var(--gc-red-500); border-color: var(--gc-red-500); }
.thumb-cell .badge {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 2px 6px;
}
.thumb-cell .del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.thumb-cell .del:hover { background: var(--gc-red-500); }
.thumb-cell .drag-hint {
  position: absolute; bottom: 6px; left: 6px;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 1px 5px;
}

.upload-side {
  display: flex; flex-direction: column; gap: 14px;
}
.upload-side .ctx-card {
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  padding: 16px;
}
.upload-side .ctx-card label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--fg-3);
  margin-bottom: 6px;
  display: block;
}
.upload-side .ctx-card .lbl-row { display: flex; align-items: center; justify-content: space-between; }
.upload-side .ctx-card .lbl-row .opt { font-size: 11px; color: var(--fg-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.upload-side .ctx-card input {
  width: 100%;
  border: 1px solid var(--gc-neutral-300);
  background: #fff;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
}
.upload-side .ctx-card input:focus { outline: none; border-color: var(--gc-red-500); box-shadow: var(--shadow-focus); }
.upload-side .ctx-card .hint {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 6px;
}
.upload-side .cta-primary {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  padding: 16px 22px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 140ms;
}
.upload-side .cta-primary:hover { background: var(--gc-red-600); }
.upload-side .cta-primary .sparkle { color: var(--gc-yellow-500); }
.upload-side .cta-secondary {
  background: #fff;
  color: var(--fg-3);
  border: 1px solid var(--gc-neutral-300);
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.upload-side .cta-secondary:hover { color: var(--gc-red-500); border-color: var(--gc-red-500); }

/* ---------- Loading ---------- */
.loading-card {
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  padding: 28px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
}
.loading-card .preview {
  position: relative;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.loading-card .preview img { width: 100%; height: 100%; object-fit: cover; }
.loading-card .preview .scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(180deg, transparent 0%, var(--gc-red-500) 50%, transparent 100%);
  opacity: 0.8;
  animation: scan 1.8s linear infinite;
}
.loading-card .preview .scan-overlay {
  position: absolute; inset: 0;
  border: 2px solid rgba(211,1,45,0.4);
  pointer-events: none;
}
@keyframes scan {
  0%   { top: 0%; }
  100% { top: 100%; }
}
.loading-card .preview .corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--gc-red-500);
}
.loading-card .preview .corner.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.loading-card .preview .corner.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.loading-card .preview .corner.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.loading-card .preview .corner.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.loading-card .stage { display: flex; flex-direction: column; gap: 14px; }
.loading-card .stage h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.loading-card .stage .sub { font-size: 13px; color: var(--fg-3); margin: 0 0 4px; }
.loading-card .stage .progress {
  height: 6px;
  background: var(--gc-neutral-300);
  position: relative;
  overflow: hidden;
}
.loading-card .stage .progress .bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--gc-red-500);
  width: 62%;
  transition: width 200ms;
}
.loading-card .progress-steps {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px;
}
.loading-card .progress-steps .step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--fg-2);
}
.loading-card .progress-steps .step .dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gc-neutral-300);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.loading-card .progress-steps .step.done .dot { background: var(--gc-success-500); }
.loading-card .progress-steps .step.active { color: var(--fg-1); font-weight: 600; }
.loading-card .progress-steps .step.active .dot {
  background: var(--gc-red-500);
  position: relative;
}
.loading-card .progress-steps .step.active .dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--gc-red-500);
  opacity: 0.5;
  animation: pulse 1.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}
.loading-card .progress-steps .step.pending .dot::after {
  content: "";
  width: 4px; height: 4px; border-radius: 50%; background: var(--gc-neutral-500);
}
.loading-card .pre-result {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
}
.loading-card .pre-result .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 600; }
.loading-card .pre-result .val { font-size: 15px; font-weight: 600; color: var(--fg-1); }
.loading-card .pre-result .conf { font-size: 11px; color: var(--gc-success-500); font-weight: 600; margin-left: auto; }

/* ============================================================
   PLP — tabular row layout
   Recreates the captured O+ Produktsuche-Ergebnis row shape:
   thumb | KBN | description | qty | add | price block (right)
   ============================================================ */

/* Picked-article banner above the table — shows the article the user
   selected on S2 so they don't lose visual context when scanning the
   spare-part hits below. */
.plp-picked {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
}
.plp-picked-img {
  width: 88px; height: 88px;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.plp-picked-img svg { width: 100%; height: 100%; }
.plp-picked-body { min-width: 0; }
.plp-picked-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--fg-3);
  margin-bottom: 2px;
}
.plp-picked-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
  line-height: 1.2;
}
.plp-picked-title .brand { font-weight: 800; }
.plp-picked-meta {
  display: flex; gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-3);
  flex-wrap: wrap;
}
.plp-picked-meta .kbn {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--fg-2);
}
.plp-picked-meta .dot { color: var(--gc-neutral-400); }
.plp-picked-change {
  background: #fff;
  border: 1px solid var(--gc-neutral-400);
  color: var(--fg-2);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 5px;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.plp-picked-change:hover {
  border-color: var(--gc-red-500);
  color: var(--gc-red-500);
  background: var(--gc-red-50);
}

.plp-table {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  margin-top: 16px;
}
.plp-table-head {
  display: grid;
  grid-template-columns: 64px 130px 1fr 90px 100px 160px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--gc-neutral-200);
  border-bottom: 1px solid var(--gc-neutral-300);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.plp-table-head .th-price { text-align: right; }
.plp-table-body {
  display: flex;
  flex-direction: column;
}

.plp-row {
  display: grid;
  grid-template-columns: 64px 130px 1fr 90px 100px 160px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gc-neutral-200);
  transition: background 120ms;
}
.plp-row:last-child { border-bottom: 0; }
.plp-row:hover { background: var(--gc-neutral-100); }

/* Thumbnail */
.plp-row-thumb {
  width: 56px; height: 56px;
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.plp-row-thumb svg { width: 100%; height: 100%; }

/* KBN */
.plp-row-kbn .kbn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  word-break: break-all;
}

/* Description */
.plp-row-desc {
  min-width: 0;
  font-size: 14px;
  color: var(--fg-1);
  line-height: 1.4;
}
.plp-row-desc .brand {
  font-weight: 700;
  color: var(--fg-1);
}
.plp-row-desc .title { color: var(--fg-2); }
.plp-row-desc .conf-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 5px;
  margin-left: 8px;
  vertical-align: 1px;
  white-space: nowrap;
}
.plp-row-desc .conf-inline.high {
  background: var(--gc-success-50);
  color: var(--gc-success-700);
}
.plp-row-desc .conf-inline.med {
  background: var(--gc-warning-50);
  color: var(--gc-warning-700);
}
.plp-row-warn {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  background: var(--gc-warning-50);
  border-left: 3px solid var(--gc-warning-500);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.4;
}
.plp-row-warn svg {
  color: var(--gc-warning-700);
  flex-shrink: 0;
  margin-top: 2px;
}
.plp-row-warn b {
  color: var(--gc-warning-700);
  font-weight: 700;
}
.plp-row.is-warned .plp-row-thumb {
  border-color: var(--gc-warning-500);
}

/* Quantity input */
.plp-row-qty input {
  width: 100%;
  height: 32px;
  font: inherit;
  font-size: 13px;
  padding: 0 10px;
  border: 1px solid var(--gc-neutral-400);
  background: #fff;
  color: var(--fg-1);
  border-radius: 5px;
  text-align: right;
}
.plp-row-qty input::placeholder { color: var(--fg-muted); }
.plp-row-qty input:focus {
  outline: none;
  border-color: var(--gc-red-500);
  box-shadow: var(--shadow-focus);
}

/* Add-to-cart split button */
.plp-row-add {
  display: inline-flex;
  align-items: stretch;
  width: max-content;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--gc-neutral-400);
}
.plp-row-add .add-btn,
.plp-row-add .add-more {
  background: var(--gc-neutral-200);
  border: 0;
  color: var(--fg-1);
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.plp-row-add .add-btn {
  padding: 0 12px;
  border-right: 1px solid var(--gc-neutral-400);
}
.plp-row-add .add-more { padding: 0 6px; }
.plp-row-add .add-btn:hover,
.plp-row-add .add-more:hover {
  background: var(--gc-red-500);
  color: #fff;
}

/* Price block (right column) */
.plp-row-price {
  text-align: right;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.plp-row-price .badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  background: var(--gc-red-500);
  color: #fff;
  padding: 3px 8px;
  margin-bottom: 4px;
  line-height: 1.15;
}
.plp-row-price .badge .lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plp-row-price .badge .pct {
  font-size: 11px;
  font-weight: 500;
}
.plp-row-price .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.plp-row-price .unit {
  font-size: 11px;
  color: var(--fg-3);
}
.plp-row-price .listprice {
  font-size: 11px;
  color: var(--fg-3);
  text-decoration: line-through;
}

/* ---------- end PLP table ---------- */

/* ---------- PLP (legacy card layout, retained for non-default modes) ---------- */
.plp-toolbar {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 18px;
  padding: 14px 18px;
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
}
.plp-toolbar .summary {
  font-size: 13px;
  color: var(--fg-2);
}
.plp-toolbar .summary .count {
  font-weight: 700;
  color: var(--fg-1);
}
.plp-toolbar .summary .term {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
}
.plp-toolbar .summary .term .x { cursor: pointer; color: var(--fg-3); }
.plp-toolbar .summary .term .x:hover { color: var(--gc-red-500); }
.plp-toolbar .filters { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.plp-toolbar .filter-pill {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.plp-toolbar .filter-pill .chev { color: var(--fg-3); }
.plp-toolbar .filter-pill:hover { border-color: var(--gc-red-500); color: var(--gc-red-500); }
.plp-toolbar .new-search {
  margin-left: 4px;
  border: 0;
  background: transparent;
  color: var(--gc-red-500);
  font-weight: 600;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.confidence-section { margin: 20px 0 6px; }
.confidence-section .head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.confidence-section .head .bar {
  flex: 1;
  height: 2px;
  background: var(--gc-neutral-300);
}
.confidence-section .head.high .pip { color: var(--gc-success-500); }
.confidence-section .head.med .pip  { color: var(--gc-warning-500); }

.plp-results { display: flex; flex-direction: column; gap: 12px; }
.plp-card {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  display: grid;
  grid-template-columns: 128px 1fr 220px;
  gap: 18px;
  padding: 16px 18px;
  align-items: stretch;
  position: relative;
}
.plp-card.warned { border-left: 4px solid var(--gc-warning-500); }
.plp-card .image-stack {
  position: relative;
  width: 128px;
  align-self: start;
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.plp-card .image-stack img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 8px;
}
.plp-card .image-stack .toggle {
  position: absolute; bottom: 4px; right: 4px;
  display: flex; gap: 2px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--gc-neutral-300);
  padding: 2px;
}
.plp-card .image-stack .toggle .tg {
  background: transparent;
  border: 0;
  font-size: 10px;
  padding: 3px 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.plp-card .image-stack .toggle .tg.active {
  background: var(--gc-red-500); color: #fff;
}

.plp-card .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plp-card .body .meta-line {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  display: flex; gap: 8px; align-items: center;
}
.plp-card .body .meta-line .conf {
  font-weight: 700;
  color: var(--gc-success-500);
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.plp-card .body .meta-line .conf.med { color: var(--gc-warning-700); }
.plp-card .body .meta-line .kbn { font-family: var(--font-mono); color: var(--fg-1); font-weight: 700; letter-spacing: 0; }
.plp-card .body .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--fg-1);
}
.plp-card .body .specs { font-size: 13px; color: var(--fg-3); margin: 0; }
.plp-card .body .warn-banner {
  background: var(--gc-warning-50);
  border-left: 3px solid var(--gc-warning-500);
  padding: 8px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-1);
  display: flex; gap: 8px;
}
.plp-card .body .warn-banner .ico { color: var(--gc-warning-700); flex-shrink: 0; margin-top: 1px; }
.plp-card .body .warn-banner b { color: var(--gc-warning-700); }
.plp-card .body .warn-banner .small { display: block; color: var(--fg-3); margin-top: 2px; }

.plp-card .body .av {
  display: flex; gap: 16px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-2);
}
.plp-card .body .av .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gc-success-500);
  display: inline-block;
  margin-right: 6px;
}
.plp-card .body .av .dot.low { background: var(--gc-warning-500); }
.plp-card .body .av .dot.no { background: var(--gc-neutral-400); }

.plp-card .actions-col {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  border-left: 1px solid var(--gc-neutral-300);
  padding-left: 18px;
}
.plp-card .actions-col .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}
.plp-card .actions-col .price .unit { font-size: 12px; color: var(--fg-3); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.plp-card .actions-col .listprice {
  font-size: 11px;
  color: var(--fg-muted);
  text-decoration: line-through;
}
.plp-card .actions-col .qty-row {
  display: flex; align-items: stretch; gap: 0;
  margin-top: 2px;
  width: 100%;
}
.plp-card .actions-col .qty-row input {
  flex: 1;
  border: 1px solid var(--gc-neutral-300);
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  text-align: center;
  width: 60px;
}
.plp-card .actions-col .qty-row .add {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 6px;
  flex: 2;
  justify-content: center;
}
.plp-card .actions-col .qty-row .add:hover { background: var(--gc-red-600); }
.plp-card .actions-col .details {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  padding: 4px 0;
}
.plp-card .actions-col .details:hover { color: var(--gc-red-500); }

/* ---------- No-result ---------- */
.no-result {
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  padding: 28px 32px;
}
.no-result h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.no-result .lede { font-size: 14px; color: var(--fg-2); margin-bottom: 22px; max-width: 580px; }
.no-result .tip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.no-result .tip {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.no-result .tip .vis {
  height: 110px;
  background: var(--gc-neutral-200);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.no-result .tip h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0;
}
.no-result .tip p { font-size: 12px; color: var(--fg-3); margin: 0; line-height: 1.4; }
.no-result .tip .num {
  position: absolute; top: 6px; left: 6px;
  background: var(--gc-red-500);
  color: #fff;
  width: 22px; height: 22px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.no-result .cta-row {
  display: flex; align-items: center; gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gc-neutral-300);
}
.no-result .cta-row .primary {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.no-result .cta-row .primary:hover { background: var(--gc-red-600); }
.no-result .cta-row .secondary {
  background: transparent;
  border: 1px solid var(--gc-neutral-400);
  color: var(--fg-2);
  padding: 12px 20px;
  font-weight: 500;
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.no-result .cta-row .secondary:hover { border-color: var(--gc-red-500); color: var(--gc-red-500); }
.no-result .cta-row .or { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); }

/* tip visualization atoms */
.tip-vis-front,
.tip-vis-ruler,
.tip-vis-cover,
.tip-vis-stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tip-vis-front svg { color: var(--gc-red-500); }

/* ---------- Experten-Übergabe (S6) ---------- */
.expert {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
}
.expert .summary-card {
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  padding: 22px 24px;
}
.expert .summary-card h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.expert .summary-card .lede { font-size: 13px; color: var(--fg-3); margin: 0 0 18px; }
.expert .summary-card .block { margin-bottom: 18px; }
.expert .summary-card .block .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.expert .summary-card .block .lbl .check { color: var(--gc-success-500); }
.expert .summary-card .pics {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.expert .summary-card .pic {
  width: 84px; height: 84px;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  overflow: hidden;
}
.expert .summary-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.expert .summary-card .ctx-pill {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.expert .summary-card textarea {
  width: 100%;
  border: 1px solid var(--gc-neutral-300);
  background: #fff;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  min-height: 92px;
  resize: vertical;
}
.expert .summary-card textarea:focus { outline: none; border-color: var(--gc-red-500); box-shadow: var(--shadow-focus); }
.expert .submit-row {
  display: flex; gap: 14px; align-items: center;
  margin-top: 8px;
  border-top: 1px solid var(--gc-neutral-300);
  padding-top: 18px;
}
.expert .submit-row .send {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 5px;
  display: inline-flex; align-items: center; gap: 10px;
}
.expert .submit-row .send:hover { background: var(--gc-red-600); }
.expert .submit-row .cancel {
  background: transparent;
  border: 0;
  color: var(--gc-red-500);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 140ms, color 140ms;
}
.expert .submit-row .cancel:hover {
  background: var(--gc-red-50);
  color: var(--gc-red-700);
}

.expert .info-card {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  height: fit-content;
}
.expert .info-card .row { display: flex; gap: 10px; align-items: flex-start; }
.expert .info-card .row .ic {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gc-neutral-200);
  color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.expert .info-card .row h4 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin: 0 0 2px; letter-spacing: 0; }
.expert .info-card .row p { font-size: 12px; color: var(--fg-3); margin: 0; line-height: 1.4; }

/* ---------- Screen jumper (demo nav) ---------- */
/* Pinned to the very bottom-right corner (no margin) so it stays out of
   the way. Collapsed by default into a small tab. */
.jumper {
  position: fixed;
  right: 0;
  bottom: 0;
  background: var(--gc-neutral-900);
  color: #fff;
  border: 0;
  padding: 0;
  border-radius: 5px 0 0 0;
  font-family: var(--font-body);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  overflow: hidden;
  max-height: 100vh;
  transition: width 180ms cubic-bezier(0.2,0,0,1);
}
.jumper.is-collapsed { width: auto; }
.jumper.is-open { width: 320px; }
.jumper .title {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.06);
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gc-yellow-500);
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  user-select: none;
  width: 100%;
  font-family: inherit;
  white-space: nowrap;
}
.jumper .title:hover { background: rgba(255,255,255,0.12); }
.jumper .title > span:first-child { flex: 1; text-align: left; }
.jumper .title .meta {
  color: var(--gc-neutral-500);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 10px;
}
.jumper .jumper-current {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gc-red-500);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.jumper-scroll {
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}

.jumper .jumper-group {
  border-top: 1px solid rgba(255,255,255,0.10);
}
.jumper .jumper-group:first-of-type { border-top: 0; }
.jumper .jumper-phase {
  padding: 10px 14px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gc-yellow-500);
  opacity: 0.85;
  background: rgba(0,0,0,0.18);
}
.jumper .row {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 12px 14px;
  text-align: left;
  font-size: 13px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  cursor: pointer;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-transform: none;
  width: 100%;
  font-family: inherit;
}
.jumper .jumper-group > .row:first-of-type { border-top: 0; }
.jumper .row .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--gc-yellow-500);
  letter-spacing: 0.04em;
  align-self: center;
}
.jumper .row .name {
  font-weight: 600;
  line-height: 1.25;
  grid-column: 2;
}
.jumper .row .ctx {
  color: var(--gc-neutral-500);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  grid-column: 2;
}
.jumper .row.active { background: rgba(211,1,45,0.22); }
.jumper .row.active .name { color: var(--gc-yellow-500); }
.jumper .row:hover { background: rgba(255,255,255,0.08); }
.jumper .row.active:hover { background: rgba(211,1,45,0.28); }

/* ---------- Tiny helpers ---------- */
.row { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

/* ============================================================
   ETS Overlay — popover anchored under the Ersatzteilfinder button
   in the header. Behaves like a rich tooltip, not a full modal:
   click outside or press Esc to close.
   ============================================================ */
.ets-overlay {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 1200;
  width: 420px;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  box-shadow: 0 22px 48px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.08);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: ets-pop-in 160ms cubic-bezier(0.2,0,0,1);
}
@keyframes ets-pop-in {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.ets-overlay-arrow {
  position: absolute;
  top: -8px;
  right: 50px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid var(--gc-neutral-300);
  border-top: 1px solid var(--gc-neutral-300);
  transform: rotate(45deg);
}

/* Wrap around the Ersatzteilfinder button so the overlay sits absolutely
   inside the sticky header and follows the button down-page. */
.header .ets-trigger-wrap {
  position: relative;
  display: inline-flex;
}

.ets-overlay-head { display: flex; flex-direction: column; gap: 4px; }
.ets-overlay-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ets-overlay-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gc-red-500);
  font-weight: 600;
}
.ets-overlay-close {
  background: transparent;
  border: 0;
  width: 28px; height: 28px;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
}
.ets-overlay-close:hover {
  background: var(--gc-neutral-200);
  color: var(--gc-red-500);
}
.ets-overlay-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
  line-height: 1.05;
}
.ets-overlay-lede {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.45;
}

/* Dropzone */
.ets-overlay-drop {
  background: var(--gc-neutral-100);
  border: 2px dashed var(--gc-neutral-400);
  padding: 22px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: 140px;
  transition: all 140ms;
}
.ets-overlay-drop:hover { border-color: var(--gc-red-500); background: var(--gc-red-50); }
.ets-overlay-drop.is-dragging {
  border-color: var(--gc-red-500);
  background: var(--gc-red-50);
  border-style: solid;
}
.ets-overlay-drop.has-files {
  padding: 14px;
  border-style: solid;
  border-color: var(--gc-neutral-300);
  cursor: default;
  background: #fff;
}
.ets-overlay-drop-ico {
  width: 48px; height: 48px;
  background: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gc-red-500);
  box-shadow: var(--shadow-xs);
}
.ets-overlay-drop-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
}
.ets-overlay-drop-sub {
  font-size: 12px;
  color: var(--fg-3);
}

/* Thumbnail grid */
.ets-overlay-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}
.ets-overlay-thumb {
  position: relative;
  aspect-ratio: 1;
  background: var(--gc-neutral-200);
  border: 1px solid var(--gc-neutral-300);
  overflow: hidden;
}
.ets-overlay-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ets-overlay-thumb-x {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
}
.ets-overlay-thumb-x:hover { background: var(--gc-red-500); }
.ets-overlay-thumb-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
  color: #fff;
  font-size: 10px;
  padding: 8px 6px 3px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.ets-overlay-thumb-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--gc-neutral-400);
  background: transparent;
  color: var(--fg-3);
  font-size: 10px;
  cursor: pointer;
  text-align: center;
  padding: 4px;
}
.ets-overlay-thumb-add:hover {
  color: var(--gc-red-500);
  border-color: var(--gc-red-500);
}

/* "oder" separator between the upload zone and the description input */
.ets-overlay-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
}
.ets-overlay-or-rule {
  flex: 1;
  height: 1px;
  background: var(--gc-neutral-300);
}
.ets-overlay-or-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Text fallback */
.ets-overlay-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ets-overlay-text label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--fg-3);
}
.ets-overlay-text input {
  width: 100%;
  border: 1px solid var(--gc-neutral-300);
  background: #fff;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
}
.ets-overlay-text input:focus {
  outline: none;
  border-color: var(--gc-red-500);
  box-shadow: var(--shadow-focus);
}

/* Footer */
.ets-overlay-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--gc-neutral-300);
  margin-top: 2px;
  padding-top: 12px;
}
.ets-overlay-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-3);
  text-decoration: none;
}
.ets-overlay-info:hover { color: var(--gc-red-500); }
.ets-overlay-cta {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 140ms;
}
.ets-overlay-cta:hover { background: var(--gc-red-600); }
.ets-overlay-cta.disabled,
.ets-overlay-cta:disabled {
  background: var(--gc-neutral-400);
  color: var(--gc-neutral-600);
  cursor: not-allowed;
}

/* ============================================================
   S2 — Ähnliche Artikel (visual match grid)
   ============================================================ */
.similar { padding-bottom: 8px; }
.similar-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  margin-top: 32px;
  align-items: start;
}

.similar-ref-label {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--fg-3);
}

/* Sticky reference panel — uploaded image stays visible while user picks.
   Top border is reinforced with a box-shadow so it stays visible on every
   edge while the panel sits sticky against the (also sticky) header. */
.similar-ref {
  position: sticky;
  top: calc(var(--header-h) + var(--accent-stripe-h) + 24px);
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  box-shadow: 0 0 0 1px var(--gc-neutral-300);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.similar-ref-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.similar-ref-head .lbl {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--fg-3);
}
.similar-ref-head .meta {
  font-size: 11px;
  color: var(--fg-muted);
}
.similar-ref-img {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  aspect-ratio: 1;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.similar-ref-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.similar-ref-strip {
  display: flex; gap: 6px;
}
.similar-ref-thumb {
  flex: 1;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
}
.similar-ref-thumb img { width: 100%; height: 100%; object-fit: cover; }
.similar-ref-thumb.more {
  background: var(--gc-neutral-200);
}
.similar-ref-text {
  padding: 10px 0 0;
  border-top: 1px solid var(--gc-neutral-300);
}
.similar-ref-text .lbl {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.similar-ref-text p {
  margin: 0;
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.4;
}
.similar-ref-hint {
  background: var(--gc-yellow-50);
  border-left: 3px solid var(--gc-yellow-500);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-1);
  display: flex; align-items: center; gap: 6px;
}
.similar-ref-hint b { color: var(--fg-1); font-weight: 700; }

/* Grid of candidates */
.similar-grid-wrap { min-width: 0; }
.similar-grid-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.similar-grid-head .cnt {
  font-weight: 700;
  color: var(--fg-1);
}
.similar-grid-head .dot {
  width: 3px; height: 3px; border-radius: 50%; background: var(--gc-neutral-400);
}
.similar-grid-head .spc { flex: 1; }
.similar-grid-head .best b {
  color: var(--gc-success-700);
  font-variant-numeric: tabular-nums;
}

.similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Inline experten-fallback row inside the grid — spans the full row width.
   Sits between the top two rows of cards and the last row. */
.similar-expert-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gc-red-500);
  border: 1px solid var(--gc-red-500);
  padding: 14px 18px;
  font-size: 13px;
  color: #fff;
  line-height: 1.4;
}
.similar-expert-row .ico {
  color: rgba(255,255,255,0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.similar-expert-row .copy { flex: 1; }
.similar-expert-row .cta {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.similar-expert-row .cta:hover {
  background: #fff;
  color: var(--gc-red-700);
  border-color: #fff;
}

.similar-card {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms, z-index 0s linear 200ms;
}
.similar-card:hover {
  border-color: var(--gc-red-500);
  z-index: 100;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms, z-index 0s linear 0s;
}

/* Hover zoom — a larger, sharper copy of the card image floats above the
   card so the user can confirm the part visually before clicking. */
.similar-card-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%) scale(0.92);
  background: #fff;
  border: 1px solid var(--gc-neutral-400);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.08);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.2,0,0,1),
              transform 180ms cubic-bezier(0.2,0,0,1),
              visibility 0s linear 180ms;
  z-index: 110;
  overflow: hidden;
}
.similar-card-zoom svg {
  width: 100%;
  height: 100%;
  display: block;
}
.similar-card:hover .similar-card-zoom {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 180ms cubic-bezier(0.2,0,0,1),
              transform 180ms cubic-bezier(0.2,0,0,1);
}
.similar-card.is-best {
  border-color: var(--gc-success-500);
}
.similar-card.is-best:hover {
  border-color: var(--gc-success-700);
}

.similar-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--gc-neutral-100);
  overflow: hidden;
}
.similar-card-img svg { width: 100%; height: 100%; }

.similar-match {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-1);
  border-radius: 999px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.similar-match .bar {
  display: inline-block;
  width: 48px; height: 4px;
  background: var(--gc-neutral-300);
  border-radius: 999px;
  overflow: hidden;
}
.similar-match .bar .fill { display: block; height: 100%; }
.similar-match.high .bar .fill { background: var(--gc-success-500); }
.similar-match.med  .bar .fill { background: var(--gc-warning-500); }
.similar-match.low  .bar .fill { background: var(--gc-neutral-500); }
.similar-match b { font-weight: 700; }

.similar-best {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--gc-success-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
}

/* ============================================================
   STARTSEITE — Mehrwertpaket Klima & Lüftung
   ============================================================ */

.startseite { padding: 0; }

.similar-card-body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.similar-card-body .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--fg-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.similar-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--gc-neutral-300);
}
.similar-card-foot .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.similar-card-foot .primary {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.similar-card-foot .primary:hover { background: var(--gc-red-600); }
.similar-card.is-best .similar-card-foot .primary {
  background: var(--gc-success-500);
}
.similar-card.is-best .similar-card-foot .primary:hover {
  background: var(--gc-success-700);
}

/* ============================================================
   end of S2 styles
   ============================================================ */

.startseite { padding: 0; }
/* ---------- Mehrwertpaket promo ---------- */
.mw-promo {
  background: var(--gc-red-500);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 32px;
  padding: 36px 36px 36px 32px;
  position: relative;
  margin-bottom: 18px;
}
.mw-promo .dismiss {
  position: absolute; top: 14px; right: 14px;
  background: transparent;
  border: 0;
  color: #fff;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.85;
}
.mw-promo .dismiss:hover { opacity: 1; transform: scale(1.05); }

.mw-promo .mw-illu {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05));
  border: 1px dashed rgba(240,178,35,0.4);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  align-self: stretch;
  min-width: 0;
}

.mw-promo .mw-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mw-promo .mw-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.05;
  overflow-wrap: break-word;
}
.mw-promo .snowflake {
  display: inline-block;
  margin-left: 10px;
  color: #c8ecff;
  font-size: 24px;
  vertical-align: 2px;
}
.mw-promo .mw-lede {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
.mw-promo .mw-hinweis {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
  margin: 0;
  opacity: 0.92;
}
.mw-promo .mw-hinweis u { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mw-promo .mw-clock { display: flex; flex-wrap: nowrap; gap: 14px 22px; margin: 6px 0 4px; min-width: 0; }
.mw-promo .clk {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; flex: 0 1 auto;
}
.mw-promo .clk .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 36px);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mw-promo .clk .unit {
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 14px);
  color: var(--gc-yellow-500);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mw-promo .mw-cta {
  align-self: flex-start;
  background: var(--gc-yellow-500);
  color: var(--gc-red-700);
  border: 0;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}
.mw-promo .mw-cta:hover { background: var(--gc-yellow-300); }

/* Narrow container — stack the promo and drop the illustration so text never clips */
@container startseite (max-width: 720px) {
  .mw-promo { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
  .mw-promo .mw-illu { display: none; }
}
@media (max-width: 1180px) {
  .mw-promo { grid-template-columns: 1fr; gap: 18px; padding: 28px 28px 28px 28px; }
  .mw-promo .mw-illu { display: none; }
}

/* ---------- Mehrwertpaket — compact slim variant ---------- */
.mw-promo-compact {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--gc-yellow-500);
  color: var(--gc-red-950);
  padding: 12px 18px;
  margin-bottom: 18px;
  position: relative;
  border-left: 4px solid var(--gc-red-500);
}
.mw-promo-compact .mw-c-icon {
  color: var(--gc-red-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mw-promo-compact .mw-c-title {
  display: inline-flex; flex-direction: column; line-height: 1.25;
  flex: 1; min-width: 0;
}
.mw-promo-compact .mw-c-title b {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.mw-promo-compact .mw-c-title .mw-c-sub {
  font-size: 12px;
  color: var(--gc-red-700);
  font-weight: 500;
}
.mw-promo-compact .mw-c-clock {
  display: inline-flex; gap: 10px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--gc-red-700);
  font-weight: 600;
}
.mw-promo-compact .mw-c-clock b {
  font-size: 18px;
  color: var(--gc-red-950);
  letter-spacing: -0.02em;
  margin-right: 2px;
}
.mw-promo-compact .mw-c-cta {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mw-promo-compact .mw-c-cta:hover { background: var(--gc-red-600); }
.mw-promo-compact .mw-c-x {
  background: transparent;
  border: 0;
  color: var(--gc-red-700);
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.7;
}
.mw-promo-compact .mw-c-x:hover { opacity: 1; }

/* ---------- Filter & tabs ---------- */
.startseite .filter-row { margin: 12px 0; }
.startseite .filter-row input {
  width: 100%;
  background: var(--gc-neutral-200);
  border: 1px solid var(--gc-neutral-300);
  padding: 14px 18px;
  font: inherit;
  font-size: 14px;
  color: var(--fg-1);
}
.startseite .filter-row input::placeholder { color: var(--fg-3); }
.startseite .filter-row input:focus {
  outline: none;
  border-color: var(--gc-red-500);
  background: #fff;
  box-shadow: var(--shadow-focus);
}

.startseite .tab-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 12px 0 0;
}
.startseite .tab-row .tab {
  background: #fff;
  border: 1px solid var(--gc-red-500);
  color: var(--gc-red-500);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  padding: 14px 18px;
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  border-radius: 0;
  position: relative;
}
.startseite .tab-row .tab .ic { display: inline-flex; }
.startseite .tab-row .tab:first-child { border-right: 0; }
.startseite .tab-row .tab.active {
  background: var(--gc-red-500);
  color: #fff;
}
.startseite .tab-row .tab .cv {
  margin-left: 6px;
  opacity: 0.65;
}

/* ---------- Product table ---------- */
.startseite .table-head,
.startseite .prow {
  display: grid;
  grid-template-columns: 64px 110px 1fr 28px 160px 84px 110px 28px;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  min-width: 0;
}
.startseite .table-head {
  border-bottom: 1px solid var(--gc-neutral-300);
  padding-top: 22px;
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.startseite .table-head .th-price { text-align: right; }
.startseite .prows { display: flex; flex-direction: column; }

.startseite .prow {
  border-bottom: 1px solid var(--gc-neutral-300);
  transition: background 140ms;
}
.startseite .prow:hover { background: var(--gc-neutral-100); }
.startseite .prow-img {
  width: 64px; height: 48px;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.startseite .prow-kbn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gc-red-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  word-break: break-all;
}
.startseite .prow-desc { min-width: 0; overflow: hidden; }
.startseite .prow-desc .ttl {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  line-height: 1.3;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.startseite .prow-desc .sub {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.35;
}

.startseite .prow-share {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.startseite .prow-share:hover { color: var(--gc-red-500); }

.startseite .prow-qty {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 8px;
  align-items: center;
}
.startseite .prow-qty input {
  grid-column: 1;
  grid-row: 1;
  border: 1px solid var(--gc-neutral-400);
  background: #fff;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.startseite .prow-qty input:focus {
  outline: none;
  border-color: var(--gc-red-500);
  box-shadow: var(--shadow-focus);
}
.startseite .prow-qty .unit-lbl {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  color: var(--fg-2);
}
.startseite .prow-qty .min-lbl {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0;
}

.startseite .prow-actions {
  display: flex; gap: 0;
}
.startseite .prow-actions .add {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.startseite .prow-actions .add:hover { background: var(--gc-red-600); }
.startseite .prow-actions .more {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  border-left: 1px solid var(--gc-red-700);
  padding: 10px 8px;
}
.startseite .prow-actions .more:hover { background: var(--gc-red-600); }

.startseite .prow-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--fg-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.startseite .prow-menu {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.startseite .prow-menu:hover { color: var(--gc-red-500); }



/* ============================================================
   Produktsuche — sidebar entry-point overview
   Mirrors the O+ button style captured from gconlineplus.de:
   white background, dark-red 1px outline, dark-red bold label,
   icon left, label centered. 5px radius, ~44px tall.
   ============================================================ */
.produktsuche {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 980px;
  margin: 20px auto 8px;
}
.produktsuche-option {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--gc-red-500);
  color: var(--gc-red-500);
  padding: 0 14px;
  height: 44px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.produktsuche-option .label {
  color: var(--gc-red-500);
  font-size: 14px;
  text-align: center;
}
.produktsuche-option:hover {
  background: var(--gc-red-500);
  color: #fff;
}
.produktsuche-option:hover .label { color: #fff; }
.produktsuche-option .ic {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.produktsuche-option .label {
  text-align: center;
}


/* ============================================================
   Ersatzteilsuche — manufacturer picker (BEEM-style)
   ============================================================ */
.ersatzteilsuche {
  position: relative;
  margin: -28px -36px -48px;  /* let the page reach the .main edges */
  background: var(--gc-neutral-200);
  min-height: calc(100vh - var(--header-h) - var(--accent-stripe-h) - 100px);
  padding: 18px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Top search row */
.ets-search-row {
  display: grid;
  grid-template-columns: 1fr 56px 56px;
  gap: 12px;
  align-items: center;
  background: #fff;
  padding: 18px;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
}
.ets-search-input input {
  width: 100%;
  height: 44px;
  background: #fff;
  border: 1px solid var(--gc-neutral-400);
  border-radius: 5px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  color: var(--fg-1);
}
.ets-search-input input::placeholder { color: var(--fg-muted); }
.ets-search-input input:focus { outline: none; border-color: var(--gc-red-500); }
.ets-search-btn,
.ets-bookmark-btn {
  height: 44px;
  border-radius: 5px;
  border: 0;
  background: var(--gc-red-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.ets-search-btn:hover,
.ets-bookmark-btn:hover { background: var(--gc-red-600); }
.ets-bookmark-btn .badge {
  position: absolute;
  top: 4px; right: 6px;
  background: #fff;
  color: var(--gc-red-500);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 9999px;
  line-height: 1.2;
}

/* Layout: filters left, manufacturers right */
.ets-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
}

/* ---------- Filter panel ---------- */
.ets-filters {
  background: #fff;
  border-radius: 5px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
}
.ets-filters-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.ets-filters-close:hover { background: var(--gc-neutral-200); color: var(--fg-1); }
.ets-filters-head { display: flex; flex-direction: column; gap: 10px; }
.ets-filters-head-row {
  display: grid;
  grid-template-columns: auto 1fr 36px;
  gap: 8px;
  align-items: center;
}
.ets-filters-head-row .lbl {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: var(--fg-2);
  font-weight: 500;
  white-space: nowrap;
}
.ets-filters-head-row .filter-name {
  height: 32px;
  border: 1px solid var(--gc-neutral-400);
  border-radius: 5px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  color: var(--fg-1);
  background: #fff;
}
.ets-filters-head-row .filter-name::placeholder { color: var(--fg-muted); }
.ets-filters-head-row .trash {
  width: 32px; height: 32px;
  border: 0;
  border-radius: 5px;
  background: var(--gc-red-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ets-filters-head-row .trash:hover { background: var(--gc-red-600); }

.ets-filters-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-3);
  font-weight: 500;
}
.ets-filters-tabs .tab-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.ets-filters-tabs .tab {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.ets-filters-tabs .tab-pill {
  background: var(--gc-red-500);
  color: #fff;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
}
.ets-filters-tabs .tab-pill.active,
.ets-filters-tabs .tab-pill:hover { background: var(--gc-red-600); }
.ets-filters-tabs .tab-pill:nth-child(3) { background: transparent; color: var(--fg-2); }
.ets-filters-tabs .tab-pill:nth-child(3):hover { background: var(--gc-neutral-200); }
.ets-filters-tabs .tab-letter {
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 500;
  min-width: 14px;
  text-align: center;
}
.ets-filters-tabs .tab-letter:hover { color: var(--gc-red-500); }
.ets-filters-tabs .tab-sep { color: var(--gc-neutral-400); }

/* Filter cards (Archiviert, Hersteller) */
.filter-card {
  background: #fff;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
}
.filter-card .filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-1);
}
.filter-card .filter-head:hover { background: var(--gc-neutral-200); }
.filter-card .filter-body {
  padding: 10px 14px 14px;
  position: relative;
}

.filter-tab-row {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--gc-neutral-300);
}
.filter-tab-row.two-tabs .filter-tab { flex: 1; text-align: center; }
.filter-tab-row .filter-tab {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--fg-3);
  cursor: pointer;
  position: relative;
  margin-bottom: -1px;
}
.filter-tab-row .filter-tab.active {
  color: var(--gc-red-500);
  font-weight: 700;
  border-bottom: 2px solid var(--gc-red-500);
}

.filter-search {
  width: 100%;
  height: 32px;
  border: 1px solid var(--gc-neutral-400);
  border-radius: 5px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--fg-1);
  margin-bottom: 8px;
}
.filter-search:focus { outline: none; border-color: var(--gc-red-500); }

.filter-list {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.filter-opt {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-1);
}
.filter-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gc-red-500);
  cursor: pointer;
}
.filter-opt .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-opt .cnt {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.filter-clear {
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 10px;
}
.filter-clear:hover { background: var(--gc-red-600); }

/* ---------- Manufacturer grid ---------- */
.ets-manufacturers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.brand-card {
  background: #fff;
  border-radius: 5px;
  padding: 18px 18px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: box-shadow 140ms, transform 140ms;
}
.brand-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.brand-card-logo {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.brand-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--gc-neutral-200);
}
.brand-card-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.brand-card-count svg { color: var(--fg-3); }
.brand-card-fav {
  background: transparent;
  border: 0;
  width: 28px; height: 28px;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
}
.brand-card-fav:hover {
  color: var(--gc-yellow-500);
  background: var(--gc-neutral-100);
}

/* GC-style word + corner badge */
.brand-logo-gc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-logo-gc .word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-logo-gc .corner {
  width: 36px; height: 36px;
  background: var(--gc-yellow-500);
  border-radius: 3px;
  padding: 2px;
  display: flex;
}
.brand-logo-gc .corner .inner {
  background: var(--gc-red-500);
  color: var(--gc-yellow-500);
  width: 100%; height: 100%;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.brand-logo-gc .corner .g,
.brand-logo-gc .corner .c {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
}
.brand-logo-gc .corner .g { margin-bottom: -2px; }
.brand-logo-gc .corner .gruppe {
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 1px;
}

.brand-logo-gc-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.brand-logo-gc-full .square {
  width: 72px; height: 72px;
  background: var(--gc-yellow-500);
  border-radius: 6px;
  padding: 4px;
}
.brand-logo-gc-full .square .inner {
  background: var(--gc-red-500);
  color: var(--gc-yellow-500);
  width: 100%; height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-logo-gc-full .label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}


/* ============================================================
   Material-filled input fields (for Ersatzteilsuche content area)
   Mirrors mat-mdc-text-field-wrapper from gconlineplus.de:
   light grey fill, rounded-top, underline indicator on focus.
   ============================================================ */
.ersatzteilsuche .ets-search-input input,
.ersatzteilsuche .filter-name,
.ersatzteilsuche .filter-search {
  background: rgb(245, 245, 245);
  border: 0;
  border-bottom: 1px solid var(--gc-neutral-500);
  border-radius: 5px 5px 0 0;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: var(--fg-1);
  transition: background 140ms, border-color 140ms;
}
.ersatzteilsuche .ets-search-input input { height: 56px; font-size: 16px; }
.ersatzteilsuche .filter-name,
.ersatzteilsuche .filter-search { height: 40px; }

.ersatzteilsuche .ets-search-input input::placeholder,
.ersatzteilsuche .filter-name::placeholder,
.ersatzteilsuche .filter-search::placeholder {
  color: var(--fg-3);
}

.ersatzteilsuche .ets-search-input input:focus,
.ersatzteilsuche .filter-name:focus,
.ersatzteilsuche .filter-search:focus {
  outline: none;
  background: rgb(238, 238, 238);
  border-bottom: 2px solid var(--gc-red-500);
}


/* ============================================================
   Ersatzteil-Experten CTA (Störer on Ersatzteilsuche page)
   Spans the full manufacturer grid as a hero call-to-action.
   ============================================================ */
.ets-experten-cta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  background: linear-gradient(135deg, var(--gc-red-500) 0%, var(--gc-red-700) 100%);
  color: #fff;
  border: 0;
  border-radius: 5px;
  padding: 18px 22px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: transform 140ms, box-shadow 140ms;
  margin-bottom: 4px;
  min-width: 0;
}
.ets-experten-cta:hover {
  transform: translateY(-1px);
}
.ets-experten-cta .cta-icon {
  width: 64px; height: 64px;
  border-radius: 5px;
  background: var(--gc-yellow-500);
  color: var(--gc-red-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ets-experten-cta .cta-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ets-experten-cta .cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gc-yellow-500);
}
.ets-experten-cta .cta-eyebrow-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ets-experten-cta .cta-badge {
  background: var(--gc-yellow-500);
  color: var(--gc-red-700);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
}
.ets-experten-cta .cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.ets-experten-cta .cta-sub {
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.92;
  max-width: 60ch;
}
.ets-experten-cta .cta-meta {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.ets-experten-cta .cta-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.ets-experten-cta .cta-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 12px 18px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 140ms;
}
.ets-experten-cta:hover .cta-action {
  background: rgba(255,255,255,0.22);
}


/* Top-row split — search bar (left) + Experten CTA (right) */
.ets-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.ets-top-row > .ets-search-row,
.ets-top-row > .ets-experten-cta {
  margin-bottom: 0;
}

/* Compact CTA when sitting in the top-row split */
.ets-top-row .ets-experten-cta {
  grid-column: auto;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px 18px;
}
.ets-top-row .ets-experten-cta .cta-icon {
  width: 48px;
  height: 48px;
}
.ets-top-row .ets-experten-cta .cta-title {
  font-size: 16px;
  line-height: 1.15;
}
.ets-top-row .ets-experten-cta .cta-meta {
  margin-top: 4px;
  font-size: 11px;
}
.ets-top-row .ets-experten-cta .cta-action {
  padding: 12px 14px;
  border-radius: 9999px;
  width: 40px;
  height: 40px;
  justify-content: center;
}


/* ============================================================
   Ersatzteilanfragen — chat-style two-column view
   ============================================================ */
.erta {
  display: grid;
  grid-template-columns: 280px 1fr;
  background: #fff;
  /* Fill the available viewport between the topbar/header/stripe/crumb stack
     and the main's top padding so the whole page doesn't scroll — only the
     inner regions do. Chrome stack: topbar 35 + header 87 + stripe 4 +
     crumb ~35 + main padding-top 28 = ~189px. */
  height: calc(100vh - var(--topbar-h) - var(--header-h) - var(--accent-stripe-h) - 35px - 28px);
  min-height: 520px;
  /* Only negate the top padding — main's side/bottom padding is already 0
     when erta-lock is active, so don't blow past those bounds. */
  margin: -28px 0 0;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* Allow flex/grid children to shrink below their content height so the
   inner scroll containers (.erta-rail-list, .erta-thread) can actually
   take effect — without min-height:0 they grow to fit content and the
   page-level scroll re-appears. */
.erta-rail,
.erta-thread-wrap { min-height: 0; }
.erta-thread { min-height: 0; }
.erta-rail-list { min-height: 0; }

/* ── Left rail ───────────────────────────────────────────── */
.erta-rail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--gc-neutral-300);
  background: #fff;
  min-width: 0;
  max-width: 280px;
  overflow: hidden;
}
.erta-rail-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  min-width: 0;
}
.erta-user-avatar {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gc-neutral-100);
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1.5px solid var(--gc-neutral-300);
}
.erta-user-avatar.online { border-color: var(--gc-success-500); }
.erta-user-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erta-new-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: #2a72ff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms;
}
.erta-new-btn:hover { background: #1c5fdb; }

.erta-rail-section {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 57px;
  box-sizing: border-box;
  padding: 0 18px 0 32px;
  border-bottom: 1px solid var(--gc-neutral-300);
  background: #fff;
}
.erta-rail-back,
.erta-rail-filter,
.erta-rail-new,
.erta-foot-btn {
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
}
.erta-rail-back:hover,
.erta-rail-filter:hover,
.erta-rail-new:hover,
.erta-rail-new-icon:hover,
.erta-foot-btn:hover { background: var(--gc-neutral-100); color: var(--gc-red-500); }

/* Compact icon-only button next to the rail title for starting a new
   request when at least one already exists. No border, sits in the right
   slot of the flex header. */
.erta-rail-new-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fg-2);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 140ms, color 140ms;
}
.erta-rail-new-icon:hover {
  background: var(--gc-neutral-100);
  color: var(--gc-red-500);
}

.erta-rail-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-1);
  text-align: center;
  letter-spacing: 0;
  flex: 1;
}

.erta-rail-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.erta-conv-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  /* Extra left padding so the unread dot (positioned at 14px) has space and
     content stays in the same place whether the dot is present or not. */
  padding: 14px 16px 14px 32px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;
  border-bottom: 1px solid var(--gc-neutral-300);
}
.erta-conv-row:hover { background: var(--gc-neutral-100); }
.erta-conv-row.is-active { background: var(--gc-neutral-200); }
.erta-unread-dot {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gc-red-500);
}
.erta-conv-avatar {
  width: 44px; height: 44px;
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
}
.erta-conv-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  align-items: flex-start;
}
.erta-conv-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: 8px;
}
.erta-conv-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erta-conv-time {
  font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.erta-conv-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--fg-2);
  margin: 0;
}
.erta-conv-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: 8px;
}
.erta-conv-ava {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 9999px;
  background: var(--gc-neutral-200);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.erta-conv-komm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--fg-3);
  margin: 0;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erta-conv-komm svg { flex-shrink: 0; }
.erta-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a7799;
  background: #d6f0f6;
  padding: 2px 8px;
  border-radius: 3px;
  width: fit-content;
}
.erta-conv-body .erta-status-pill {
  font-size: 9px;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  margin-top: 1px;
}
.erta-status-pill .dot {
  display: none;
}

.erta-rail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-top: 1px solid var(--gc-neutral-300);
}
.erta-rail-new-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-1);
  background: transparent;
  border: 0;
  border-radius: 7px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.erta-rail-new-btn:hover { background: transparent; color: var(--gc-red-600); }
.erta-rail-new-btn:hover svg { color: var(--gc-red-600); }

/* ── Main thread ─────────────────────────────────────────── */
.erta-thread-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  background: #fff;
}
.erta-thread-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: center;
  padding: 0 22px;
  height: 57px;
  border-bottom: 1px solid var(--gc-neutral-300);
  background: #fff;
}
.erta-thread-avatar {
  width: 44px; height: 44px;
  background: var(--gc-neutral-100);
  border: 1px solid var(--gc-neutral-300);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
}
.erta-thread-head-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.erta-thread-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: 0;
}
.erta-thread-sub {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Status badge in the thread header is redundant next to the always-visible
   rail on desktop — hide it there, but keep it on mobile where the rail is
   collapsed/off-screen. */
.erta-thread-sub > .erta-status-pill { display: none; }
@media (max-width: 768px) {
  .erta-thread-sub > .erta-status-pill { display: inline-flex; }
}
.erta-thread-meta {
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.erta-thread-meta-sep {
  padding-left: 11px;
  border-left: 1px solid var(--gc-neutral-300);
}

/* ---------- Startseite drag-and-drop overlay ---------- */
.home-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(20, 24, 28, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  pointer-events: none;
}
.home-drop-card {
  background: #fff;
  border: 2px dashed var(--gc-red-500);
  border-radius: 16px;
  padding: 40px 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  max-width: 460px;
}
.home-drop-icon {
  width: 76px; height: 76px;
  border-radius: 9999px;
  background: var(--gc-red-50);
  color: var(--gc-red-500);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.home-drop-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--fg-1);
}
.home-drop-sub {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 320px;
}

.erta-thread {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px 22px;
  background: #fff;
}
.erta-thread-daydiv {
  text-align: center;
  font-size: 12px;
  color: var(--fg-3);
  padding: 4px 0 6px;
}

/* User photo message (right-aligned) */
.erta-msg-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-end;
  max-width: 360px;
}
.erta-msg-user .erta-msg-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.erta-msg-user .erta-msg-author {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: 0;
}
.erta-msg-user .erta-msg-time-top {
  font-size: 11px;
  color: var(--fg-3);
}
.erta-msg-photo {
  width: 280px;
  height: 280px;
  background: var(--gc-neutral-100);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--gc-neutral-200);
  position: relative;
}
.erta-msg-time-photo {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 4px;
}

/* Divider pill between user msg and replies */
.erta-msg-divider {
  display: flex;
  justify-content: center;
  margin: 8px 0 4px;
}
.erta-msg-divider span {
  background: var(--gc-neutral-200);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 9999px;
}

/* Bot / team message (left-aligned cards) */
.erta-msg-team {
  display: flex;
  align-self: flex-start;
  max-width: 720px;
  width: 100%;
}
.erta-msg-card {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 5px;
  padding: 14px 16px 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.erta-msg-author {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--gc-red-500);
  letter-spacing: 0;
}
.erta-msg-author.is-bot { color: var(--fg-2); }
.erta-msg-line {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
}
.erta-msg-icon { flex-shrink: 0; line-height: 1.5; }
/* Chat message text never gets underlined — including on hover, focus, or
   when wrapped in an anchor (overrides the global a:hover underline). */
.erta-msg-line,
.erta-msg-line *,
.erta-msg-line:hover,
.erta-msg-line:hover *,
.erta-msg-card a,
.erta-msg-card a:hover,
.erta-msg-card a:focus,
.erta-msg-card a *,
.erta-msg-card a:hover * { text-decoration: none; }
.erta-msg-divider-inline {
  height: 1px;
  background: var(--gc-neutral-200);
  margin: 4px -16px;
}
.erta-msg-time {
  font-size: 11px;
  color: var(--fg-3);
  text-align: right;
  margin-top: 2px;
}

/* ── Composer ─────────────────────────────────────────── */
.erta-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--gc-neutral-300);
  background: #fff;
}
.erta-composer-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
}
.erta-composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.erta-composer-attachment {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--gc-neutral-300);
  background: var(--gc-neutral-100);
  flex-shrink: 0;
}
.erta-composer-attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.erta-composer-attachment-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 140ms;
}
.erta-composer-attachment-x:hover {
  background: var(--gc-red-500);
}
.erta-composer-attach {
  width: 44px; height: 44px;
  background: #fff;
  color: var(--fg-2);
  border: 1px solid var(--gc-neutral-400);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.2,0,0,1), color 160ms, border-color 160ms;
}
.erta-composer-attach:hover {
  background: var(--gc-neutral-200);
  border-color: var(--gc-neutral-500);
  color: var(--fg-1);
}
.erta-composer-send {
  width: 44px; height: 44px;
  border: 0;
  background: var(--gc-red-500);
  color: #fff;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.erta-composer-send:hover { background: var(--gc-red-600); }
.erta-composer-send:disabled {
  background: var(--gc-neutral-200);
  color: var(--fg-muted);
  cursor: not-allowed;
}
.erta-composer-input {
  height: 44px;
  border: 1px solid var(--gc-neutral-300);
  background: var(--gc-neutral-100);
  border-radius: 5px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  color: var(--fg-1);
}
.erta-composer-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--gc-red-500);
}
.erta-composer-input::placeholder { color: var(--fg-3); }


/* When Ersatzteilanfragen is the active screen, lock body scroll — only
   the inner chat regions scroll. */
body.erta-lock,
html.erta-lock { overflow: hidden; height: 100vh; }
body.erta-lock .main { padding: 28px 0 0; min-height: 0; }
body.erta-lock .shell-body { padding-bottom: 0; }


/* ============================================================
   Ersatzteilanfragen — new-anfrage composer + rail empty state
   + user text bubble + typing indicator + editable title
   ============================================================ */

.erta-rail-new {
  background: var(--gc-red-500) !important;
  color: #fff !important;
}
.erta-rail-new:hover {
  background: var(--gc-red-600) !important;
  color: #fff !important;
}

/* ── Rail empty state ── */
.erta-rail-empty {
  padding: 32px 22px;
  text-align: center;
  color: var(--fg-3);
}
.erta-rail-empty-icon {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gc-neutral-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
}
.erta-rail-empty-head {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: 4px;
}
.erta-rail-empty-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-3);
}

/* ── New-Anfrage view (replaces thread when mode="new") ── */
.erta-new-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--gc-neutral-100);
}
.erta-new-head {
  grid-template-columns: 1fr !important;
}
.erta-new-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 22px 28px 40px;
}
.erta-new-form {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 6px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.erta-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.erta-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.erta-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gc-neutral-200);
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.erta-field-optional,
.erta-field-required {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}
.erta-field-optional {
  background: var(--gc-neutral-200);
  color: var(--fg-3);
}
.erta-field-required {
  background: #fbe6e9;
  color: var(--gc-red-600);
}
.erta-field-input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--gc-neutral-300);
  background: #fff;
  border-radius: 5px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--fg-1);
  transition: border-color 140ms, box-shadow 140ms;
  box-sizing: border-box;
}
.erta-field-input:focus {
  outline: none;
  border-color: var(--gc-red-500);
  box-shadow: 0 0 0 3px rgba(204, 9, 53, 0.12);
}
.erta-field-input::placeholder { color: var(--fg-3); }
.erta-field-textarea {
  height: auto;
  padding: 12px 14px;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  min-height: 96px;
}
.erta-field-hint {
  font-size: 12px;
  color: var(--fg-3);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* ── Drop zone ── */
.erta-dropzone {
  position: relative;
  border: 1.5px dashed var(--gc-neutral-400, #bcc0c5);
  border-radius: 6px;
  background: var(--gc-neutral-100);
  padding: 32px 24px 24px;
  text-align: center;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
  outline: none;
}
.erta-dropzone:hover {
  background: #fafbfb;
  border-color: var(--gc-red-500);
}
.erta-dropzone.is-drag {
  background: #fbe6e9;
  border-color: var(--gc-red-500);
  border-style: solid;
}
.erta-dropzone-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
}
.erta-dropzone-head {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-1);
  margin-bottom: 4px;
}
.erta-dropzone-sub {
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 14px;
}
.erta-dropzone-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.erta-dropzone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gc-red-500);
  color: #fff;
  border-radius: 5px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.erta-dropzone:hover .erta-dropzone-btn { background: var(--gc-red-600); }
.erta-dropzone-sep { color: var(--fg-3); }
.erta-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--gc-red-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.erta-link:hover { color: var(--gc-red-600); }
.erta-dropzone-tip {
  font-size: 12px;
  color: var(--fg-3);
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── Photo preview (after upload) ── */
.erta-photo-preview {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 6px;
  align-items: center;
}
.erta-photo-preview-thumb {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--gc-neutral-100);
}
.erta-photo-preview-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.erta-photo-preview-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.erta-photo-preview-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erta-photo-preview-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gc-success-600, #1f7a3d);
}
.erta-photo-replace {
  align-self: flex-start;
  margin-top: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--gc-red-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.erta-photo-remove {
  width: 28px;
  height: 28px;
  border: 0;
  background: var(--gc-neutral-100);
  color: var(--fg-2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.erta-photo-remove:hover { background: var(--gc-red-500); color: #fff; }

/* Multi-photo grid */
.erta-photo-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  border-radius: 10px;
}
.erta-photo-grid.is-drag { outline: 2px dashed var(--gc-red-400, #e45a73); outline-offset: 4px; }
.erta-photo-tile {
  position: relative;
  width: 104px; height: 104px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--gc-neutral-300);
  background: var(--gc-neutral-100);
}
.erta-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.erta-photo-tile-remove {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9999px;
  background: rgba(16,24,32,.62); color: #fff;
  cursor: pointer;
}
.erta-photo-tile-remove:hover { background: rgba(16,24,32,.85); }
.erta-photo-add-tile {
  width: 104px; height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--gc-neutral-400, #9aa0a6);
  border-radius: 10px;
  background: transparent;
  color: var(--fg-2);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.erta-photo-add-tile:hover { border-color: var(--gc-red-500); color: var(--gc-red-600); background: var(--gc-red-50); }

/* Additional text notes */
.erta-note-row { position: relative; margin-top: 10px; }
.erta-note-row .erta-field-textarea { padding-right: 40px; }
.erta-note-remove {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--fg-3, #8a9096);
  cursor: pointer;
}
.erta-note-remove:hover { background: var(--gc-neutral-100); color: var(--fg-1); }
.erta-add-more {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  color: var(--fg-1);
  background: transparent;
  border: 0; border-radius: 7px;
  padding: 6px 8px 6px 4px;
  cursor: pointer;
}
.erta-add-more:hover { background: var(--gc-neutral-100); }

/* Extra photos in pending view */
.erta-state-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.erta-state-photo {
  width: 72px; height: 72px;
  border-radius: 8px; overflow: hidden; display: block;
  border: 1px solid var(--gc-neutral-200);
}
.erta-state-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "Etwas vergessen?" addendum card (pending view) */
.erta-addendum {
  background: var(--gc-neutral-100, #f2f4f5);
  border: 1px solid var(--gc-neutral-400, #9aa0a6);
  border-radius: 12px;
  padding: 16px;
  transition: border-color .12s ease, background .12s ease;
}
.erta-addendum.is-drag {
  border-color: var(--gc-red-500);
  border-style: solid;
  background: var(--gc-red-50);
}
.erta-addendum-head { font-size: 14.5px; font-weight: 700; color: var(--fg-1); }
.erta-addendum-sub { font-size: 13px; color: var(--fg-2); line-height: 1.5; margin: 4px 0 12px; }
.erta-addendum-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px;
}
.erta-addendum-photo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  color: var(--fg-1);
  background: transparent;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 7px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.erta-addendum-photo:hover { background: var(--gc-neutral-100); border-color: var(--gc-neutral-400, #9aa0a6); }
.erta-addendum-send {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: #fff;
  background: var(--gc-red-500);
  border: 0; border-radius: 7px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 140ms;
}
.erta-addendum-send:hover { background: var(--gc-red-600); }
.erta-addendum-send:disabled { background: var(--gc-neutral-300); cursor: default; }

/* ── Submit row ── */
.erta-new-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--gc-neutral-200);
}
.erta-new-submit-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-3);
}
.erta-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  border-radius: 5px;
  height: 44px;
  padding: 0 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 140ms;
}
.erta-submit-btn:hover:not(:disabled) { background: var(--gc-red-600); }
.erta-submit-btn:disabled {
  background: var(--gc-neutral-200);
  color: var(--fg-muted, #9a9da1);
  cursor: not-allowed;
}

/* ── Editable thread title ── */
.erta-thread-title-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--fg-1);
  text-align: left;
}
.erta-thread-title-btn svg {
  opacity: 0;
  transition: opacity 140ms;
  color: var(--fg-3);
}
.erta-thread-title-btn:hover svg { opacity: 1; }
.erta-thread-title-btn:hover { color: var(--gc-red-500); }
.erta-thread-title-input {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-1);
  border: 1px solid var(--gc-red-500);
  background: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(204, 9, 53, 0.12);
  min-width: 240px;
}

/* ── User-text bubble (follow-up messages in composer) ── */
.erta-msg-user-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-end;
  max-width: 460px;
  gap: 4px;
}
.erta-msg-text-bubble {
  background: var(--gc-red-500);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Caption under user-photo ── */
.erta-msg-caption {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-top: 6px;
  max-width: 280px;
}
.erta-msg-caption-body {
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  flex: 1;
}

/* ── Expert reply card ── */
.erta-msg-expert {
  border-color: var(--gc-neutral-300);
  background: #fff;
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.erta-msg-expert-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gc-neutral-200);
  margin-bottom: 4px;
}
.erta-msg-expert-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gc-red-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.erta-msg-expert-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.erta-msg-expert-meta { min-width: 0; }
.erta-msg-expert .erta-msg-author {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}
.erta-msg-expert-role {
  font-size: 12px;
  color: var(--fg-3);
}

/* ── Product card inside an expert reply ── */
.erta-msg-product {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 12px;
  margin: 6px 0;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 5px;
  text-decoration: none;
  color: inherit;
  background: var(--gc-neutral-100);
  transition: background 140ms, border-color 140ms;
}
.erta-msg-product:hover {
  background: #fff;
  border-color: var(--gc-red-500);
}
.erta-msg-product-thumb {
  width: 88px;
  height: 88px;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
}
.erta-msg-product-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.erta-msg-product-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.erta-msg-product-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.erta-msg-product-sku {
  color: var(--fg-3);
  font-weight: 600;
}
.erta-msg-product-brand {
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  margin-top: 2px;
}
.erta-msg-product-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  line-height: 1.35;
}
.erta-msg-product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.erta-msg-product-price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
}
.erta-msg-product-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gc-red-500);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Beantwortet pill — green */
.erta-status-pill.status-beantwortet {
  background: var(--gc-success-100, #e3f3ea);
  color: var(--gc-success-600, #1f7a3d);
}
.erta-status-pill.status-beantwortet .dot {
  background: var(--gc-success-500, #2a8d4a);
}

/* In-Bearbeitung pill — amber */
.erta-status-pill.status-in-bearbeitung {
  background: #fdf2d6;
  color: #9a6a00;
}
.erta-status-pill.status-in-bearbeitung .dot { background: #e0a106; }

/* Rückfrage pill — red-leaning, demands action */
.erta-status-pill.status-rueckfrage {
  background: var(--gc-red-50, #fdeaee);
  color: var(--gc-red-600, #b30126);
}
.erta-status-pill.status-rueckfrage .dot { background: var(--gc-red-500, #d3012d); }

/* Nicht gelistet pill — neutral grey */
.erta-status-pill.status-nicht-gelistet {
  background: #eceeef;
  color: var(--fg-2, #55595e);
}
.erta-status-pill.status-nicht-gelistet .dot { background: #9aa0a6; }

/* Abgeschlossen pill — blue */
.erta-status-pill.status-abgeschlossen {
  background: #dbe9fb;
  color: #1d4f96;
}
.erta-status-pill.status-abgeschlossen .dot { background: #2c63b0; }

/* Im Experten-Chat pill — purple */
.erta-status-pill.status-experten-chat {
  background: #ede4fb;
  color: #6a3bba;
}
.erta-status-pill.status-experten-chat .dot { background: #8456d6; }

/* Unlisted variant of the query card — neutral header instead of red */
.erta-query.is-unlisted .erta-query-head {
  background: #f0f2f3;
  border-bottom: 1px solid var(--gc-neutral-300, #e3e5e7);
}
.erta-query.is-unlisted .erta-query-eyebrow { color: var(--fg-2, #55595e); }

/* Innendienst handoff strip */
.erta-handoff {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 20px 20px;
  padding: 14px 16px;
  background: var(--gc-success-50, #eef8f1);
  border: 1px solid var(--gc-success-200, #bfe5cc);
  border-radius: 10px;
}
.erta-handoff-ico {
  width: 32px; height: 32px; border-radius: 9999px; flex-shrink: 0;
  background: var(--gc-success-100, #def0e4); color: var(--gc-success-700, #1c6b37);
  border: 1px solid var(--gc-success-200, #b6ddc1);
  display: flex; align-items: center; justify-content: center;
}
.erta-handoff-body { display: flex; flex-direction: column; gap: 3px; }
.erta-handoff-head { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.erta-handoff-sub { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; }

/* ============================================================
   Rückfrage view — expert question + inline reply form
   ============================================================ */
.erta-query {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 14px;
  overflow: hidden;
}
.erta-query-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px;
  background: var(--gc-red-50, #fdeaee);
  border-bottom: 1px solid var(--gc-red-100, #f8d2da);
}
.erta-query-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gc-red-600, #b30126);
}
.erta-query-time { font-size: 12.5px; color: var(--fg-3, #8a9096); }
.erta-query-body { display: flex; gap: 14px; padding: 20px; }
.erta-query-avatar {
  width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0;
  background: var(--gc-neutral-100); color: var(--fg-2);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gc-neutral-200);
}
.erta-query-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.erta-query-name { font-size: 14px; font-weight: 700; color: var(--fg-1); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.erta-query-role { font-size: 12px; font-weight: 500; color: var(--fg-3, #8a9096); }
.erta-query-msg { font-size: 14.5px; color: var(--fg-2); line-height: 1.6; margin: 0; }
.erta-query-reply {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--gc-neutral-200);
}
.erta-query-send {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: var(--gc-red-500); border: 0; border-radius: 6px;
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
}
.erta-query-send:hover { background: var(--gc-red-600); }
.erta-query-send:disabled { background: var(--gc-neutral-300); cursor: not-allowed; }

/* ============================================================
   Self-Service: pending (analysis) + result views
   ============================================================ */
.erta-state-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  background: var(--gc-neutral-50, #fafbfb);
}
.erta-state-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 28px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Request recap */
.erta-req-summary {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  box-shadow: 0 1px 2px rgba(16,24,32,.05);
  border-radius: 12px;
  padding: 16px;
}
.erta-req-photo {
  width: 92px; height: 92px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--gc-neutral-200);
  background: var(--gc-neutral-100);
}
.erta-req-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.erta-req-summary.is-compact {
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  align-items: center;
}
.erta-req-summary.is-compact .erta-req-photo { width: 56px; height: 56px; border-radius: 7px; }

/* Full-width grey recap band at the top of the result view */
.erta-result-banner {
  background: var(--gc-neutral-100, #eef0f1);
  border-bottom: 1px solid var(--gc-neutral-300);
}
.erta-result-banner-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.erta-req-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; }
.erta-req-info-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3, #8a9096); }
.erta-req-info-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg-1); }
.erta-req-info-desc { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; margin: 2px 0 0; }

/* Analyzing / pending */
.erta-analyzing {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  box-shadow: 0 1px 2px rgba(16,24,32,.05);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.erta-analyzing-main {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 28px;
}
.erta-analyzing-photo {
  position: relative;
  width: 150px; height: 150px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gc-neutral-200);
}
.erta-analyzing-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.erta-analyzing-scan {
  position: absolute; left: 0; right: 0;
  height: 40%; top: -40%;
  background: linear-gradient(180deg, transparent, rgba(211,1,45,.20), rgba(211,1,45,.40), rgba(211,1,45,.20), transparent);
  border-bottom: 2px solid rgba(211,1,45,.7);
  animation: erta-scan 1.9s ease-in-out infinite;
}
@keyframes erta-scan { 0% { top: -40%; } 100% { top: 100%; } }
.erta-analyzing-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.erta-analyzing-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gc-red-600);
}
.erta-pending-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #9a6a00;
}
.erta-pending-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a106; flex-shrink: 0; animation: erta-pending-pulse 2.2s ease-in-out infinite; }
@keyframes erta-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 161, 6, 0.45); opacity: 1; }
  50% { box-shadow: 0 0 0 5px rgba(224, 161, 6, 0); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .erta-pending-dot { animation: none; }
}
.erta-analyzing-dots { display: inline-flex; gap: 3px; }
.erta-analyzing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--gc-red-500); animation: erta-bounce 1.2s infinite ease-in-out; }
.erta-analyzing-dots span:nth-child(2) { animation-delay: .16s; }
.erta-analyzing-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes erta-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
.erta-analyzing-head { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--fg-1); margin: 0; }
.erta-analyzing-body { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0; }
.erta-analyzing-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-3, #8a9096); margin-top: 4px; }

.erta-state-note { border-top: 1px solid var(--gc-neutral-200); padding: 16px 28px; }
.erta-state-note-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3, #8a9096); }
.erta-state-note p { margin: 6px 0 0; font-size: 14px; color: var(--fg-2); line-height: 1.55; }

/* Result — recognised model */
.erta-result-head {
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 14px;
  padding: 22px;
  display: flex; flex-direction: row; gap: 20px; align-items: flex-start;
  cursor: pointer;
  transition: border-color .15s ease;
}
.erta-result-head:hover {
  border-color: var(--gc-neutral-400, #9aa0a6);
}
.erta-result-head:hover .erta-match-name { color: var(--gc-red-600); }
.erta-result-media {
  width: 116px; height: 116px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gc-neutral-300);
  background: var(--gc-neutral-100);
}
.erta-result-text { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.erta-result-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3, #8a9096); }
.erta-match-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.erta-match-name { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--fg-1); margin: 0; transition: color .15s ease; }
.erta-match-sub { font-size: 14px; color: var(--fg-2); }
.erta-match-note { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; margin: 8px 0 0; }
.erta-match-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 3px; white-space: nowrap; }
.erta-match-badge.tone-high { background: var(--gc-success-100, #e3f3ea); color: var(--gc-success-700, #1c6b37); }
.erta-match-badge.tone-mid { background: #fdf2d6; color: #9a6a00; }
.erta-match-badge.tone-low { background: var(--gc-neutral-100); color: var(--fg-2); }

/* Result — parts list */
.erta-parts { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin-top: 14px; }
.erta-parts-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.erta-parts-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg-1); }
.erta-parts-count { font-size: 12.5px; color: var(--fg-3, #8a9096); }
.erta-parts-list { display: flex; flex-direction: column; gap: 10px; }
.erta-part { display: flex; gap: 14px; align-items: center; border: 1px solid var(--gc-neutral-300); border-radius: 10px; padding: 12px 14px; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.erta-part:hover { border-color: var(--gc-neutral-400, #9aa0a6); box-shadow: 0 3px 10px rgba(16,24,32,.10); }
.erta-part:hover .erta-part-title { color: var(--gc-red-600); }
.erta-part.is-primary { border-color: var(--gc-neutral-300); background: #fff; }
.erta-part-thumb { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--gc-neutral-200); align-self: flex-start; }
.erta-part-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.erta-part-flag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gc-red-600); }
.erta-part-title { font-size: 14.5px; font-weight: 600; color: var(--fg-1); transition: color .15s ease; }
.erta-part-sub { font-size: 13px; color: var(--fg-2); }
.erta-part-sku { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3, #8a9096); }
.erta-part-stock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; margin-top: 5px; margin-left: -2px;
}
.erta-part-stock .erta-stock-ico { flex-shrink: 0; }
.erta-part-stock .erta-stock-alt { display: inline-flex; margin-left: 0; margin-right: -7px; }
.erta-part-stock.in-stock { color: var(--gc-success-700, #1c6b37); }
.erta-part-stock.out-stock { color: var(--gc-success-700, #1c6b37); }
.erta-part-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.erta-part-pricewrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.erta-part-priceline { display: flex; align-items: baseline; gap: 7px; }
.erta-part-perunit { font-size: 11px; color: var(--fg-3, #8a9096); }
.erta-part-list { font-size: 11.5px; color: var(--fg-3, #8a9096); margin-top: 2px; }
.erta-part-qtyrow { display: flex; align-items: center; gap: 8px; }
.erta-part-cartrow { display: flex; align-items: center; gap: 8px; }
.erta-part-qtylabel { font-size: 11.5px; color: var(--fg-3, #8a9096); }
.erta-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--gc-neutral-300); border-radius: 6px; overflow: hidden; height: 30px; }
.erta-qty-btn {
  width: 28px; border: 0; background: var(--gc-neutral-100); color: var(--fg-1);
  font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.erta-qty-btn:hover { background: var(--gc-neutral-200); }
.erta-qty-input {
  width: 46px; border: 0; border-left: 1px solid var(--gc-neutral-300); border-right: 1px solid var(--gc-neutral-300);
  text-align: center; font-family: var(--font-body); font-size: 13px; color: var(--fg-1);
  font-variant-numeric: tabular-nums; background: #fff; -moz-appearance: textfield;
}
.erta-qty-input:focus { outline: none; }
.erta-part-price { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--fg-1); }
.erta-part-cart { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--gc-red-500); border: 0; border-radius: 6px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.erta-part-cart:hover { background: var(--gc-red-600); }
.erta-parts-all { margin-top: 16px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--gc-red-600); background: #fff; border: 1.5px solid var(--gc-red-500); border-radius: 8px; padding: 11px; cursor: pointer; }
.erta-parts-all:hover { background: var(--gc-red-50); }

/* Result — expert fallback */
.erta-expert-fallback { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; background: #f0f2f3; border: 1px solid var(--gc-neutral-400, #b6bbc0); border-radius: 12px; cursor: pointer; text-align: left; width: 100%; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; }
.erta-expert-fallback:hover { border-color: var(--gc-neutral-500, #8a9096); background: #e9ecee; box-shadow: 0 3px 10px rgba(16,24,32,.10); }
.erta-expert-fallback-text { font-size: 13.5px; color: var(--fg-2); }
.erta-expert-fallback-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--gc-red-600); background: transparent; border: 0; }
.erta-expert-fallback:hover .erta-expert-fallback-btn { text-decoration: underline; }

/* ── Close & rate panel ── */
.erta-stars { display: inline-flex; gap: 2px; }
.erta-star {
  background: transparent; border: 0; padding: 2px; cursor: pointer;
  color: var(--gc-neutral-500, #8a9096); line-height: 0; transition: color .1s ease;
}
.erta-star.is-active { color: #f0b223; }
.erta-star.is-active svg { fill: #f0b223; }
.erta-stars.is-readonly .erta-star { cursor: default; padding: 1px; }
.erta-close-panel {
  background: var(--gc-neutral-50, #fafbfb); border: 1px solid var(--gc-neutral-300);
  border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.erta-close-panel-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--fg-1); margin: 0; }
.erta-close-panel-sub { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; margin: 4px 0 0; }
.erta-close-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.erta-close-rate-label { font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.erta-close-comment { background: #fff; }
.erta-close-actions { display: flex; justify-content: flex-end; }
.erta-close-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: #fff; background: var(--gc-red-500);
  border: 0; border-radius: 8px; padding: 11px 18px; cursor: pointer;
}
.erta-close-btn:hover:not(:disabled) { background: var(--gc-red-600); }
.erta-close-btn:disabled { opacity: .5; cursor: not-allowed; }
.erta-close-done {
  background: #f0f6ff; border: 1px solid #cfe0f7; border-radius: 14px;
  padding: 18px 22px; display: flex; flex-direction: column; gap: 10px;
}
.erta-close-done-head {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #1d4f96;
}
.erta-close-done-icon { display: inline-flex; color: #2c63b0; }
.erta-close-done-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.erta-close-done-label { font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.erta-close-done-comment { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; margin: 0; font-style: italic; }

/* ── Ersatzteil-Experte kontaktieren (own view) ── */
.erta-expert-backlink {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 13px; font-weight: 600; color: var(--gc-red-600);
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.erta-expert-backlink:hover { text-decoration: underline; }
.erta-expert-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: transparent; border: 0;
  box-shadow: none;
  border-radius: 0; padding: 0;
  position: relative;
}
.erta-expert-card .erta-chat-back-btn { top: 27px; transform: translateY(-50%); }
.erta-expert-avatar {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 9999px;
  background: var(--gc-neutral-200, #e4e7e9); color: var(--fg-2, #5a6066);
  border: 1px solid var(--gc-neutral-400, #b6bbc0);
  display: inline-flex; align-items: center; justify-content: center;
}
.erta-expert-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.erta-expert-card-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gc-red-600); }
.erta-expert-card-head { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--fg-1); margin: 0; }
.erta-expert-card-sub { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 2px 0 0; }
.erta-expert-card-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-3, #8a9096); margin-top: 6px; }
.erta-expert-ref {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--gc-neutral-50, #fafbfb); border: 1px solid var(--gc-neutral-400, #b6bbc0);
  border-radius: 10px; padding: 11px 14px;
}
.erta-expert-ref-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3, #8a9096); }
.erta-expert-ref-thumb {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--gc-neutral-300); background: var(--gc-neutral-100);
}
.erta-expert-ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.erta-expert-ref-thumb svg { width: 100%; height: 100%; display: block; }
.erta-expert-ref-text { font-size: 13.5px; color: var(--fg-2); }
.erta-expert-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--gc-neutral-400, #9aa0a6); border-radius: 12px;
  padding: 26px; cursor: pointer; color: var(--fg-3, #8a9096); font-size: 13px;
  transition: border-color .12s ease, background .12s ease;
}
.erta-expert-drop:hover, .erta-expert-drop.is-drag { border-color: var(--gc-red-500); border-style: solid; background: var(--gc-red-50); color: var(--gc-red-600); }
.erta-expert-sent {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  background: #fff; border: 1px solid var(--gc-neutral-300); box-shadow: 0 1px 2px rgba(16,24,32,.05);
  border-radius: 14px; padding: 44px 32px;
}
.erta-expert-sent-icon {
  width: 72px; height: 72px; border-radius: 9999px; margin-bottom: 6px;
  background: var(--gc-success-100, #e3f3ea); color: var(--gc-success-600, #2a8d4a);
  display: flex; align-items: center; justify-content: center;
}
.erta-expert-sent-head { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--fg-1); margin: 0; }
.erta-expert-sent-body { font-size: 14px; color: var(--fg-2); line-height: 1.55; max-width: 420px; margin: 0; }
.erta-expert-sent-back {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--gc-red-600);
  background: #fff; border: 1.5px solid var(--gc-red-500); border-radius: 8px; padding: 10px 18px; cursor: pointer;
}
.erta-expert-sent-back:hover { background: var(--gc-red-50); }

/* ── Experten-Chat ── */
.erta-chat-scroll { display: flex; flex-direction: column; }
.erta-chat-wrap {
  flex: 1; min-height: 0; max-width: 760px; width: 100%;
  margin: 0 auto; padding: 20px 28px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.erta-chat-back { margin-bottom: 2px; }
.erta-chat-head {
  display: flex; align-items: center; gap: 13px;
  background: transparent; border: 0;
  border-radius: 0; padding: 0;
  position: relative;
}
.erta-result-banner { position: relative; }
.erta-chat-back-btn {
  position: absolute; left: -48px;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 9999px; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-2); transition: background .12s ease, color .12s ease;
}
.erta-chat-head .erta-chat-back-btn { top: 50%; transform: translateY(-50%); }
.erta-chat-back-btn:hover { background: var(--gc-neutral-200); color: var(--gc-red-600); }
.erta-chat-back-label {
  position: absolute; top: calc(100% + 5px); left: 0;
  white-space: nowrap; background: #2c3033; color: #fff;
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 5px;
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 50;
}
.erta-chat-back-btn:hover .erta-chat-back-label { opacity: 1; }
.erta-chat-avatar {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 9999px;
  background: var(--gc-red-50); color: var(--gc-red-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.erta-chat-head-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg-1); }
.erta-chat-head-sub { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-3, #8a9096); margin-top: 1px; }
.erta-chat-online { width: 8px; height: 8px; border-radius: 50%; background: var(--gc-success-500, #2a8d4a); flex-shrink: 0; }
.erta-chat-mail {
  display: flex; align-items: flex-start; gap: 9px;
  background: #f0f6ff; border: 1px solid #cfe0f7; border-radius: 10px;
  padding: 11px 14px; font-size: 12.5px; color: #1d4f96; line-height: 1.45;
}
.erta-chat-mail svg { flex-shrink: 0; margin-top: 1px; color: #2c63b0; }
.erta-chat-thread {
  flex: 1; min-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 6px 2px;
}
.erta-chat-msg { display: flex; gap: 9px; max-width: 80%; }
.erta-chat-msg.is-user { align-self: flex-end; flex-direction: row-reverse; }
.erta-chat-msg.is-expert { align-self: flex-start; }
.erta-chat-msg-avatar {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 9999px; align-self: flex-end;
  background: var(--gc-red-50); color: var(--gc-red-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.erta-chat-bubble {
  border-radius: 14px; padding: 9px 13px; font-size: 13.5px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 4px;
}
.erta-chat-msg.is-user .erta-chat-bubble { background: var(--gc-red-500); color: #fff; border-bottom-right-radius: 4px; }
.erta-chat-msg.is-user .erta-chat-text { color: #fff; }
.erta-chat-msg.is-expert .erta-chat-text { color: var(--fg-1); }
.erta-chat-msg.is-expert .erta-chat-bubble { background: #fff; border: 1px solid var(--gc-neutral-300); color: var(--fg-1); border-bottom-left-radius: 4px; }
.erta-chat-text { margin: 0; }
.erta-chat-time { font-size: 10.5px; opacity: .7; align-self: flex-end; }
.erta-chat-photos { display: flex; flex-wrap: wrap; gap: 6px; }
.erta-chat-photos img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; display: block; }
.erta-chat-typing { flex-direction: row; gap: 4px; padding: 13px; }
.erta-chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gc-neutral-400, #9aa0a6); animation: erta-bounce 1.2s infinite ease-in-out; }
.erta-chat-typing span:nth-child(2) { animation-delay: .16s; }
.erta-chat-typing span:nth-child(3) { animation-delay: .32s; }
.erta-chat-composer {
  display: flex; align-items: flex-end; gap: 8px;
  background: #fff; border: 1px solid var(--gc-neutral-300); border-radius: 12px; padding: 8px;
}
.erta-chat-attach {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
  background: var(--gc-neutral-100); border: 0; color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.erta-chat-attach:hover { background: var(--gc-neutral-200); }
.erta-chat-input {
  flex: 1; border: 0; resize: none; font-family: var(--font-body); font-size: 13.5px;
  color: var(--fg-1); background: transparent; padding: 9px 6px; max-height: 120px; min-width: 0;
}
.erta-chat-input:focus { outline: none; }
.erta-chat-send {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
  background: var(--gc-red-500); border: 0; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.erta-chat-send:hover:not(:disabled) { background: var(--gc-red-600); }
.erta-chat-send:disabled { opacity: .45; cursor: not-allowed; }


/* ── Typing indicator ── */
.erta-typing-card {
  padding: 12px 16px 14px !important;
  min-width: 120px;
}
.erta-typing-dots {
  display: inline-flex;
  gap: 5px;
  padding: 4px 0 2px;
}
.erta-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-3);
  animation: erta-typing-bounce 1.2s ease-in-out infinite;
}
.erta-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.erta-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes erta-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* ============================================================
   Header notification bell + badge
   ============================================================ */
.header .icon-btn.bell {
  position: relative;
}

/* Ersatzteilservice pipe-icon shortcut + unread dot
   ============================================================ */
.header .icon-btn.ets-pipe {
  position: relative;
}
/* Has-badge no longer tints the icon red — the small dot alone signals the
   unread state, no need to repaint the whole icon. */
.header .icon-btn.ets-pipe .ets-pipe-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gc-red-500);
  border: 2px solid #fff;
  pointer-events: none;
}
.header .icon-btn.bell.has-badge {
  color: var(--gc-red-500);
}
.header .icon-btn.bell .bell-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--gc-red-500);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

/* Animated pulse-ring on the active bell to draw attention to a fresh reply. */
.header .icon-btn.bell.has-badge::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid var(--gc-red-500);
  opacity: 0;
  animation: bell-ring 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes bell-ring {
  0%   { transform: scale(0.6); opacity: 0.6; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ============================================================
   Sidebar unread dot (on sub-menu items)
   ============================================================ */
.nav-sub-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gc-red-500);
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(211, 1, 45, 0.6);
  animation: nav-dot-pulse 2s ease-out infinite;
}
@keyframes nav-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(211, 1, 45, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(211, 1, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(211, 1, 45, 0); }
}

/* Numeric count badge on the Produktsuche parent nav item — shows the
   number of unread expert replies sitting in the Ersatzteilservice. */
.nav .nav-item .nav-count-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--gc-red-500);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* When the count badge is present the chev no longer needs auto-margin. */
.nav .nav-item .nav-count-badge + .chev { margin-left: 6px; }

/* Numeric count badge on the Ersatzteilservice sub-menu item — same red
   pill as the parent, slightly smaller. */
.nav-sub-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--gc-red-500);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Expert-reply notification toast on the Startseite
   Pinned to the upper-right of the content column so it sits above
   the Mehrwertpaket promo without displacing it.
   ============================================================ */
.startseite.has-notification { position: relative; }

.erta-notify {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  width: 380px;
  max-width: calc(100% - 24px);
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 28px -8px rgba(0, 0, 0, 0.18),
    0 24px 48px -16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  animation: erta-notify-in 320ms cubic-bezier(0.2, 0, 0, 1);
  transform-origin: top right;
}
.erta-notify.is-closing {
  animation: erta-notify-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes erta-notify-in {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes erta-notify-out {
  0%   { opacity: 1; transform: translateY(0)    scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

.erta-notify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 0 14px;
}
.erta-notify-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gc-red-500);
}
.erta-notify-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gc-red-500);
  box-shadow: 0 0 0 0 rgba(211, 1, 45, 0.55);
  animation: nav-dot-pulse 2s ease-out infinite;
}
.erta-notify-x {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms, color 140ms;
}
.erta-notify-x:hover {
  background: var(--gc-neutral-100);
  color: var(--fg-1);
}

.erta-notify-body {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px 14px 4px;
}
.erta-notify-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gc-neutral-200);
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.erta-notify-text { min-width: 0; }
.erta-notify-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.25;
  letter-spacing: 0;
  gap: 1px;
}
.erta-notify-role {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0;
  text-transform: none;
}
.erta-notify-subject {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.3;
}
.erta-notify-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.erta-notify-title {
  font-weight: 700;
  color: var(--fg-1);
}
.erta-notify-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.erta-notify-preview {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

.erta-notify-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 12px 14px;
  border-top: 1px solid var(--gc-neutral-200);
  margin-top: 8px;
}
.erta-notify-time {
  font-size: 11px;
  color: var(--fg-3);
}
.erta-notify-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: var(--gc-red-500);
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms;
}
.erta-notify-cta:hover { background: var(--gc-red-600); }
.erta-notify-cta svg { transform: translateY(0.5px); }

/* ============================================================
   Bell dropdown — notifications panel anchored to the bell icon
   ============================================================ */
.bell-wrap {
  position: relative;
  display: inline-flex;
}

/* When the dropdown is open, raise the bell so the arrow caret tucks
   underneath it visually. */
.header .icon-btn.bell.is-open {
  background: var(--gc-neutral-100);
  border-radius: 5px;
  color: var(--gc-red-500);
}

/* Soft full-viewport scrim — closes the menu on outside-click. Kept
   transparent so the underlying page is fully visible. */
.notif-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: transparent;
}

.notif-menu {
  position: absolute;
  top: calc(100% + 6px);
  /* Align the dropdown's right edge with the right edge of the chrome
     (past the truck + cart icons), not the bell itself. The bell-wrap
     sits ~120px inboard of the cart's right edge: 16px gap + 44px truck
     + 16px gap + 44px cart. */
  right: -120px;
  z-index: 100;
  width: 420px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--gc-neutral-300);
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 16px 32px -8px rgba(0, 0, 0, 0.18),
    0 32px 64px -16px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  animation: notif-menu-in 200ms cubic-bezier(0.2, 0, 0, 1);
  transform-origin: top right;
}
@keyframes notif-menu-in {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Little caret pointing up at the bell icon. The dropdown's right edge
   now sits at the cart's right edge (right: -120px), so the bell sits
   ~142px inboard of the dropdown's right edge. */
.notif-arrow {
  position: absolute;
  top: -6px;
  right: 142px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid var(--gc-neutral-300);
  border-left: 1px solid var(--gc-neutral-300);
  transform: rotate(45deg);
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--gc-neutral-200);
}
.notif-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: 0;
}
.notif-mark {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--gc-red-500);
  cursor: pointer;
}
.notif-mark:hover { color: var(--gc-red-600); }

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 460px;
  overflow-y: auto;
}
.notif-item {
  display: grid;
  grid-template-columns: 36px 1fr 12px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 12px 14px;
  border-bottom: 1px solid var(--gc-neutral-100);
  cursor: pointer;
  position: relative;
  transition: background 120ms;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--gc-neutral-100); }

.notif-item.is-unread {
  background: linear-gradient(
    90deg,
    rgba(211, 1, 45, 0.04) 0%,
    rgba(211, 1, 45, 0.02) 100%
  );
}
.notif-item.is-unread:hover {
  background: linear-gradient(
    90deg,
    rgba(211, 1, 45, 0.07) 0%,
    rgba(211, 1, 45, 0.03) 100%
  );
}

.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gc-neutral-200);
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-icon-expert {
  background: var(--gc-red-50, #fde9ee);
  color: var(--gc-red-500);
}
.notif-icon-offer {
  background: #fdf3df;
  color: #b97a00;
}
.notif-icon-delivery {
  background: #eaf2fb;
  color: #1c5fdb;
}
.notif-icon-system {
  background: var(--gc-neutral-200);
  color: var(--fg-2);
}

.notif-body { min-width: 0; }
.notif-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.notif-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: 0;
  line-height: 1.3;
  text-wrap: pretty;
}
.notif-time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--fg-3);
}
.notif-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.35;
}
.notif-preview {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gc-red-500);
  margin-top: 6px;
  align-self: flex-start;
  box-shadow: 0 0 0 0 rgba(211, 1, 45, 0.55);
  animation: nav-dot-pulse 2s ease-out infinite;
}

.notif-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--gc-neutral-200);
  background: var(--gc-neutral-50, #fafbfb);
  text-align: center;
}
.notif-all {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  letter-spacing: 0;
  cursor: pointer;
}
.notif-all:hover { color: var(--gc-red-500); }


/* ============================================================
   VORGÄNGE — Vorgangsübersicht + Angebots-Detail (GC red skin)
   ============================================================ */
body.vg-lock, html.vg-lock { overflow: hidden; height: 100vh; }
body.vg-lock .shell-body { padding-bottom: 0; }
body.vg-lock .main { min-height: 0; padding: 0; overflow: hidden; background: #fff; }

.vgx, .vgx-detail { height: calc(100vh - 166px); }

/* shared pills */
.vg-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 5px;
  font-size: 12.5px; font-weight: 500; line-height: 1.3;
  width: fit-content; white-space: nowrap;
}
.vg-pill-grey { background: var(--gc-neutral-300); color: var(--gc-neutral-700); }
.vg-pill-green { background: #daf0dc; color: var(--gc-success-700); }
.vg-pill-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }

/* ── Overview ── */
.vgx { display: flex; flex-direction: column; position: relative; }
.vg-panel-chrome { position: absolute; top: 14px; right: 18px; display: flex; gap: 8px; z-index: 3; }
.vg-panel-chrome button { width: 24px; height: 24px; border: 1px solid var(--gc-neutral-400); background: #fff; color: var(--gc-neutral-600); display: flex; align-items: center; justify-content: center; border-radius: 3px; }
.vg-panel-chrome button:hover { color: var(--gc-red-500); border-color: var(--gc-red-500); }

.vg-toolbar { display: flex; justify-content: center; gap: 12px; padding: 24px 20px 14px; flex-shrink: 0; }
.vg-tool-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 190px; height: 50px; padding: 0 22px;
  background: #fff; color: var(--gc-red-500);
  border: 1px solid var(--gc-red-500); border-radius: 5px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.vg-tool-btn:hover { background: var(--gc-red-50); }

.vg-scroll { flex: 1; overflow-y: auto; padding: 4px 28px 30px; }
.vg-thead, .vg-row {
  display: grid;
  grid-template-columns: 140px 96px 184px 1fr 130px 96px;
  gap: 16px; align-items: start;
}
.vg-thead {
  padding: 10px 6px 14px;
  color: var(--fg-3); font-size: 14px;
  border-bottom: 1px solid var(--gc-neutral-300);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.vg-thead .ta-r { text-align: right; }
.vg-thead .doc-h { text-align: right; line-height: 1.15; }
.vg-row {
  padding: 16px 6px;
  border-bottom: 1px solid var(--gc-neutral-300);
  font-size: 14px; cursor: pointer;
}
.vg-row:hover { background: var(--gc-neutral-100); }
.vg-row .nr, .vg-row .datum { color: var(--fg-1); }
.vg-statuscell { min-width: 0; }
.vg-art { font-weight: 700; color: var(--fg-1); margin-bottom: 8px; }
.vg-row .ref { display: flex; flex-direction: column; gap: 2px; }
.vg-row .ref-line { color: var(--fg-1); line-height: 1.4; }
.vg-row .netto { text-align: right; color: var(--fg-1); }
.vg-row .docs { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--gc-neutral-600); }

/* ── Detail (three-pane: global sidebar · cards · data) ── */
.vgx-detail { display: flex; align-items: stretch; }

.vg-cardlist {
  width: 320px; flex-shrink: 0;
  border-right: 1px solid var(--gc-neutral-300);
  display: flex; flex-direction: column;
}
.vg-cl-toolbar { position: relative; display: flex; gap: 6px; padding: 14px 40px 14px 14px; border-bottom: 1px solid var(--gc-neutral-300); flex-shrink: 0; }
.vg-cl-btn {
  flex: 1; padding: 9px 4px; text-align: center;
  background: #fff; color: var(--gc-red-500);
  border: 1px solid var(--gc-red-500); border-radius: 5px;
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vg-cl-btn:hover { background: var(--gc-red-50); }
.vg-cl-x { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border: 1px solid var(--gc-neutral-400); background: #fff; color: var(--gc-neutral-600); display: flex; align-items: center; justify-content: center; border-radius: 3px; }
.vg-cl-scroll { flex: 1; overflow-y: auto; }

.vg-card { position: relative; padding: 18px 16px; border-bottom: 1px solid var(--gc-neutral-300); cursor: pointer; }
.vg-card:hover { background: var(--gc-neutral-100); }
.vg-card.active { background: var(--gc-red-500); box-shadow: none; }
.vg-card.active .vg-card-nr { color: #fff; }
.vg-card-field { font-size: 13px; color: #fff; margin-top: 5px; line-height: 1.4; }
.vg-card-statustext { font-size: 13.5px; font-weight: 700; color: #fff; margin-top: 9px; line-height: 1.4; padding-right: 34px; }
.vg-card-menu { position: absolute; right: 14px; bottom: 14px; background: transparent; border: 0; color: #fff; display: flex; padding: 2px; }
.vg-card-nr { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--fg-1); }
.vg-card-line { font-size: 13.5px; color: var(--fg-1); margin-top: 6px; }
.vg-card-art { font-size: 14px; font-weight: 700; color: var(--fg-1); margin-top: 7px; }
.vg-card-pill { margin-top: 7px; }
.vg-card-ref { font-size: 13.5px; color: var(--fg-1); margin-top: 8px; line-height: 1.4; }
.vg-card-cloud { position: absolute; top: 16px; right: 14px; color: var(--gc-neutral-600); }
.vg-card-expand { display: flex; justify-content: center; color: var(--gc-neutral-500); margin-top: 10px; }

.vg-detailpane { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 26px 50px; position: relative; }
.vg-det-x { position: absolute; top: 12px; right: 16px; width: 22px; height: 22px; border: 1px solid var(--gc-neutral-400); background: #fff; color: var(--gc-neutral-600); display: flex; align-items: center; justify-content: center; border-radius: 3px; z-index: 2; }
.vg-det-collapse {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--gc-neutral-300); border-radius: 5px;
  padding: 16px 18px; margin: 2px 40px 22px 0;
  color: var(--fg-1); font-size: 15px; font-weight: 500;
}
.vg-det-collapse .dc-chev { color: var(--fg-3); display: inline-flex; }
.vg-det-h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--fg-1); margin-bottom: 18px; letter-spacing: -0.01em; }

.vg-det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 56px; max-width: 1180px; }
.vg-det-col { display: flex; flex-direction: column; gap: 9px; }
.vg-kv { display: grid; grid-template-columns: 152px 1fr; gap: 14px; align-items: start; }
.vg-kv .k { color: var(--fg-3); font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }
.vg-kv .k .info { color: var(--gc-neutral-500); display: inline-flex; }
.vg-kv .v { color: var(--fg-1); font-size: 14px; line-height: 1.5; }
.vg-kv .v .vline { display: block; }
.vg-kv-gap { height: 10px; }

.vg-det-actions { display: flex; align-items: stretch; justify-content: center; gap: 10px; margin: 30px 0 18px; }
.vg-btn-outline {
  min-width: 200px; padding: 0 24px; height: 48px;
  background: #fff; color: var(--gc-red-500);
  border: 1px solid var(--gc-red-500); border-radius: 5px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
}
.vg-btn-outline:hover { background: var(--gc-red-50); }
.vg-btn-split { display: flex; align-items: stretch; background: transparent; border-radius: 5px; overflow: hidden; }
.vg-btn-split .vg-split-main { display: flex; align-items: center; gap: 12px; padding: 0 22px; height: 48px; font-family: var(--font-body); font-size: 14px; font-weight: 500; background: var(--gc-red-500); border: 0; color: #fff; }
.vg-btn-split .vg-split-caret { display: flex; align-items: center; padding: 0 12px; border: 0; border-left: 1px solid rgba(255,255,255,0.3); color: #fff; background: var(--gc-red-500); }
.vg-btn-split:hover .vg-split-main, .vg-btn-split:hover .vg-split-caret { background: var(--gc-red-600); }
.vg-det-icon-btn { width: 52px; height: 48px; background: var(--gc-red-500); color: #fff; border: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.vg-det-icon-btn:hover { background: var(--gc-red-600); }

.vg-det-filter { display: flex; align-items: center; gap: 10px; background: var(--gc-neutral-200); height: 46px; padding: 0 16px; color: var(--fg-3); font-size: 14px; margin-bottom: 6px; border-radius: 3px; }

.vg-pos-head, .vg-pos-row {
  display: grid;
  grid-template-columns: 40px 64px 118px 1fr 150px 112px 140px 24px;
  gap: 14px; align-items: start;
}
.vg-pos-head { padding: 14px 4px 12px; color: var(--fg-3); font-size: 14px; border-bottom: 1px solid var(--gc-neutral-300); }
.vg-pos-row { padding: 16px 4px; border-bottom: 1px solid var(--gc-neutral-300); font-size: 14px; }
.vg-pnum { color: var(--fg-1); padding-top: 4px; }
.vg-pos-thumb { width: 64px; height: 48px; border: 1px solid var(--gc-neutral-300); overflow: hidden; }
.vg-pos-art { color: var(--fg-1); padding-top: 4px; }
.vg-pos-desc { color: var(--fg-1); line-height: 1.45; padding-top: 2px; }
.vg-pos-mengen { display: flex; flex-direction: column; gap: 8px; }
.vg-mengen-row { display: flex; align-items: flex-start; gap: 8px; }
.vg-unit { min-width: 72px; height: 40px; border: 1px solid var(--gc-neutral-400); border-radius: 3px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; color: var(--fg-2); background: #fff; }
.vg-qty { display: flex; flex-direction: column; gap: 4px; }
.vg-chip { min-width: 30px; padding: 3px 8px; border-radius: 3px; text-align: center; font-size: 13px; font-weight: 600; }
.vg-chip.grey { background: var(--gc-neutral-300); color: var(--gc-neutral-700); }
.vg-chip.green { background: var(--gc-success-500); color: #fff; }
.vg-check { display: flex; }
.vg-check .circle { width: 26px; height: 26px; border-radius: 50%; background: var(--gc-success-500); color: #fff; display: flex; align-items: center; justify-content: center; }
.vg-pos-list { color: var(--fg-1); line-height: 1.5; padding-top: 4px; }
.vg-pos-net { color: var(--fg-1); line-height: 1.5; padding-top: 4px; }
.vg-pos-net .nw { display: block; margin-top: 4px; }
.vg-pos-menu { color: var(--gc-neutral-600); display: flex; justify-content: flex-end; padding-top: 6px; }

@media (max-width: 1240px) {
  .vg-pos-head, .vg-pos-row { grid-template-columns: 34px 60px 110px 1fr 160px 118px 140px 22px; gap: 10px; }
  .vg-det-grid { gap: 9px 32px; }
}

/* Ersatzteilservice tag (list/card/detail) */
.vg-ets-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--gc-red-600); background: var(--gc-red-50);
  border: 1px solid var(--gc-red-100); border-radius: 4px;
  padding: 2px 7px; width: fit-content;
}
.vg-row .ref .vg-ets-tag { margin-bottom: 5px; }
.vg-card-ets { margin-top: 8px; }

/* Chat → Vorgang verweis card (replaces the in-chat product card) */
.erta-vorgang-link {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: #fff;
  border: 1px solid var(--gc-red-200);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 130ms, box-shadow 130ms;
}
.erta-vorgang-link:hover { border-color: var(--gc-red-500); box-shadow: 0 2px 10px rgba(211,1,45,0.10); }
.evl-ico {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--gc-neutral-300); background: #fff;
  display: block;
}
.evl-body { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 3px; }
.evl-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gc-success-700); line-height: 1.3; }
.evl-title { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.3; }
.evl-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.evl-art { font-size: 11px; font-weight: 600; color: var(--gc-red-600); background: var(--gc-red-50); padding: 1px 7px; border-radius: 4px; }
.evl-nr { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--fg-2); letter-spacing: 0; }
.evl-price { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--fg-1); }
.evl-cta {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 700; color: var(--gc-red-600); white-space: nowrap;
}