/*
Theme Name: EuroRX
Theme URI: https://eurorx.de/
Author: euro RX Arzneimittel GmbH
Description: Modernes WordPress-Theme fuer euro RX Arzneimittel GmbH - klinische Pharma-Optik, Lufthansa-Gold als Akzent. B2B-Funktionen: Kundenlogin, Angebote, MSV3-Bestellung, Warenwirtschaftssync.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: eurorx-pharma
*/

/* ============================================================
   1. Design tokens + reset
   ============================================================ */
:root {
  --gold:        #F9BA00;
  --gold-dark:   #B88600;
  --gold-soft:   #FFF6DF;
  --ink:         #0B1320;
  --ink-soft:    #1E293B;
  --steel:       #334B5C;
  --slate:       #4A5568;
  --muted:       #94A3B8;
  --line:        #E5E7EB;
  --line-strong: #CBD5E1;
  --mist:        #F6F8FB;
  --panel:       #FFFFFF;
  --white:       #FFFFFF;
  --blue:        #0A5F9D;
  --blue-soft:   #E7F2FA;
  --success:     #1A8E4A;
  --success-soft:#E6F6EC;
  --warn:        #B08600;
  --danger:      #B3261E;
  --danger-soft: #FDECEA;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(11,19,32,.06);
  --shadow-md: 0 8px 24px rgba(11,19,32,.08);
  --shadow-lg: 0 24px 48px rgba(11,19,32,.10);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus-visible { color: var(--gold-dark); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4 { font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
p { margin: 0 0 1em; color: var(--ink-soft); }
.lead { font-size: 1.15rem; color: var(--slate); max-width: 720px; }
.muted { color: var(--muted); }
ul, ol { padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
strong { font-weight: 700; }

/* ============================================================
   2. Layout helpers
   ============================================================ */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.section { padding: 96px 0; background: var(--white); }
.section.white { background: var(--white); }
.section.blue { background: var(--mist); }

.section-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: end;
  margin: 0 0 56px;
}
.section-head.slim-head { grid-template-columns: 1.4fr 1fr; }
.section-head > div { max-width: 640px; }
.section-head p {
  color: var(--slate);
  margin: 0;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* ============================================================
   3. Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  min-height: 48px;
  text-align: center;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: #000; color: #fff; transform: translateY(-1px); }
.btn.green { background: var(--gold); color: var(--ink); }
.btn.green:hover, .btn.green:focus-visible { background: var(--gold-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover, .btn.secondary:focus-visible { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover, .btn.ghost:focus-visible { border-color: var(--gold); color: var(--gold-dark); }
.btn.danger {
  background: #9f1d1d;
  color: #fff;
  border-color: #9f1d1d;
}
.btn.danger:hover,
.btn.danger:focus-visible {
  background: #7f1515;
  color: #fff;
  border-color: #7f1515;
}
.btn.full { width: 100%; }
.btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: .88rem;
}
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.action-row { display: flex; gap: 12px; flex-wrap: wrap; }

.eurorx-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 12, 24, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.eurorx-dialog-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.eurorx-dialog {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid rgba(248, 181, 0, .45);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(5, 12, 24, .28);
  color: var(--ink);
  transform: translateY(8px) scale(.98);
  transition: transform .16s ease;
}
.eurorx-dialog-overlay.is-visible .eurorx-dialog {
  transform: translateY(0) scale(1);
}
.eurorx-dialog h3 {
  margin: 10px 42px 8px 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: 0;
}
.eurorx-dialog p {
  margin: 0;
  color: var(--slate);
  line-height: 1.55;
}
.eurorx-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.eurorx-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--slate);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.eurorx-dialog-close:hover,
.eurorx-dialog-close:focus-visible {
  border-color: var(--gold);
  color: var(--ink);
}

/* ============================================================
   4. Topstrip + site header + nav
   ============================================================ */
.topstrip {
  background: var(--ink);
  color: rgba(255,255,255,.85);
  font-size: .85rem;
  padding: 8px 0;
}
.topstrip .wrap { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.topstrip a { color: var(--gold); }
.topstrip a:hover { color: #fff; }
.topstrip-meta { display: inline-flex; gap: 14px; align-items: center; }
.system-status-check { margin: 0; }
.system-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 30px;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.system-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.system-status.is-online {
  background: #E9F8EE;
  border-color: #36A65B;
  color: #137239;
}
.system-status.is-stale,
.system-status.is-unknown {
  background: #FFF7E2;
  border-color: #F9BA00;
  color: #805F00;
}
.system-status.is-offline {
  background: #FDECEC;
  border-color: #D94C4C;
  color: #A51F1F;
}
.system-status:hover,
.system-status:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  outline: none;
}

.site-header {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.neutral-portal-header {
  border-bottom: 1px solid rgba(14, 165, 233, .18);
  background: rgba(248, 251, 255, .94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.supplier-login-section.is-pwa-portal {
  min-height: calc(100vh - 56px);
  padding: clamp(22px, 4vw, 54px) 0;
  background:
    radial-gradient(circle at 16% 0%, rgba(14, 165, 233, .20), transparent 30%),
    linear-gradient(145deg, #f8fbff 0%, #edf7ff 48%, #f7fbff 100%);
}
.supplier-login-section.is-pwa-portal .wrap {
  width: min(100% - 28px, 980px);
}
.supplier-login-section.is-pwa-portal .customer-login-shell {
  grid-template-columns: 1fr;
  place-items: start center;
}
.supplier-login-section.is-pwa-portal .customer-login-card {
  width: min(100%, 440px);
  padding: 28px;
  border: 1px solid rgba(14, 165, 233, .22);
  border-top: 5px solid #0ea5e9;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .12);
}
.supplier-login-section.is-pwa-portal .customer-login-card h3 {
  margin-bottom: 22px;
  font-size: 1.45rem;
}
.supplier-login-section.is-pwa-portal .offer-access-form {
  gap: 14px;
}
.supplier-login-section.is-pwa-portal .offer-access-form label {
  color: #0f172a;
}
.supplier-login-section.is-pwa-portal .offer-access-form input {
  min-height: 54px;
  border-color: #bed3e6;
  border-radius: 14px;
  background: #fbfdff;
}
.supplier-login-section.is-pwa-portal .offer-access-form input:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, .13);
  outline: none;
}
.supplier-login-section.is-pwa-portal .customer-section-layout,
.supplier-login-section.is-pwa-portal .customer-area-grid {
  display: block;
}
.supplier-login-section.is-pwa-portal .customer-side-nav,
.supplier-login-section.is-pwa-portal .customer-login-copy,
.supplier-login-section.is-pwa-portal #lieferanten-stammdaten,
.supplier-login-section.is-pwa-portal #lieferanten-kommunikation {
  display: none;
}
.supplier-login-section.is-pwa-portal .customer-section-main {
  width: 100%;
}
.supplier-login-section.is-pwa-portal .customer-area-grid {
  display: grid;
  gap: 12px;
}
.supplier-login-section.is-pwa-portal #lieferanten-scan {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.supplier-login-section.is-pwa-portal #lieferanten-scan > summary {
  display: none;
}
.supplier-login-section.is-pwa-portal .supplier-scan-panel {
  padding: 14px;
  border: 1px solid rgba(14, 165, 233, .18);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}
.supplier-login-section.is-pwa-portal .supplier-mobile-work-title {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(14, 165, 233, .22);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f0f9ff);
}
.supplier-login-section.is-pwa-portal .supplier-mobile-brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.supplier-login-section.is-pwa-portal .supplier-mobile-logo {
  color: #0f172a;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
}
.supplier-login-section.is-pwa-portal .supplier-mobile-logo span {
  color: #0ea5e9;
}
.supplier-login-section.is-pwa-portal .supplier-mobile-brandbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(14, 165, 233, .22);
  border-radius: 999px;
  background: #fff;
  color: #0369a1;
  font-size: .82rem;
  font-weight: 900;
  text-decoration: none;
}
.supplier-login-section.is-pwa-portal .supplier-mobile-work-title strong {
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.2;
}
.supplier-login-section.is-pwa-portal .customer-disclosure {
  border-color: rgba(14, 165, 233, .16);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .07);
}
.supplier-login-section.is-pwa-portal .customer-disclosure > summary {
  min-height: 58px;
}
.supplier-login-section.is-pwa-portal .eyebrow {
  background: #e0f2fe;
  color: #0369a1;
}
.supplier-login-section.is-pwa-portal .btn.gold,
.supplier-login-section.is-pwa-portal .btn.green {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
}
.supplier-login-section.is-pwa-portal .btn.gold:hover,
.supplier-login-section.is-pwa-portal .btn.green:hover,
.supplier-login-section.is-pwa-portal .btn.gold:focus-visible,
.supplier-login-section.is-pwa-portal .btn.green:focus-visible {
  background: #0369a1;
  border-color: #0369a1;
  color: #fff;
}
.neutral-portal-nav {
  min-height: 56px;
  justify-content: flex-start;
}
.neutral-portal-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}
.neutral-portal-brand span {
  color: #0ea5e9;
}
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}
.brand { display: inline-flex; align-items: center; }
.brand img { max-height: 40px; width: auto; display: block; }
.menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
  margin-left: auto;
}
.menu a {
  padding: 8px 9px;
  white-space: nowrap;
  font-weight: 500;
  font-size: .93rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.menu a:hover, .menu a:focus-visible { background: var(--mist); color: var(--gold-dark); }
.menu a.is-active { color: var(--gold-dark); position: relative; }
.menu a.is-active::after {
  content: ""; display: block;
  width: 24px; height: 3px; background: var(--gold); border-radius: 2px;
  position: absolute; bottom: -2px; left: 14px;
}
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 999px;
  background: #fff;
  flex: 0 0 auto;
}
.language-switch a {
  min-width: 30px;
  padding: 5px 7px;
  border-radius: 999px;
  text-align: center;
  font-size: .72rem;
  line-height: 1;
}
.language-switch a.is-active {
  color: var(--ink);
  background: var(--gold);
}
.language-switch a.is-active::after {
  display: none;
}
.menu .primary-link {
  background: var(--gold);
  color: var(--ink);
  margin-left: 4px;
  padding-inline: 11px;
}
.menu .primary-link:hover, .menu .primary-link:focus-visible {
  background: var(--gold-dark);
  color: #fff;
}
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px;
  flex-direction: column;
  gap: 4px;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform .2s, opacity .2s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* MSV3 status badge in the topstrip */
.msv3-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.msv3-health-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6BE48B;
  box-shadow: 0 0 0 3px rgba(107,228,139,.22);
}
.msv3-health-badge.is-stale::before { background: #F0B400; box-shadow: 0 0 0 3px rgba(240,180,0,.22); }
.msv3-health-badge.is-error::before { background: #ED5050; box-shadow: 0 0 0 3px rgba(237,80,80,.22); }

/* ============================================================
   5. Hero + quickbar
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 80px;
  background: linear-gradient(180deg, #FFFCEF 0%, #FFFFFF 70%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(closest-side, rgba(249,186,0,.22), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
  position: relative;
}
.hero-copy { max-width: 760px; }
.hero-copy h1 { color: var(--ink); }
.hero-copy h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin-top: 18px;
}
.hero-copy .lead { font-size: 1.18rem; color: var(--slate); margin-top: 22px; }
.hero-rail {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.rail-item {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  min-width: 140px;
}
.rail-item strong { color: var(--ink); font-size: 1.1rem; }
.rail-item span { font-size: .82rem; color: var(--slate); }

.hero-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-visual { padding: 8px 16px; display: grid; place-items: center; }
.hero-visual img { max-height: 56px; width: auto; }

.market-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.market-cell {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--mist);
}
.market-cell strong { display: block; font-size: 1rem; margin-bottom: 4px; color: var(--ink); }
.market-cell span { color: var(--slate); font-size: .88rem; line-height: 1.45; }

.quickbar { background: var(--ink); color: rgba(255,255,255,.85); padding: 28px 0; }
.quickbar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.quick b {
  display: block;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.quick span { font-size: .92rem; color: rgba(255,255,255,.75); }

/* ============================================================
   6. Service grid + iconbox
   ============================================================ */
.service-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--gold);
  opacity: 0;
  transition: opacity .2s;
}
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.service-card:hover::before { opacity: 1; }
.service-card h3 { font-size: 1.2rem; margin: 0 0 8px; }
.service-card p { color: var(--slate); margin: 0 0 18px; }
.service-card .btn { margin-top: auto; }

.iconbox {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  color: var(--gold-dark);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.iconbox svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   7. Forms
   ============================================================ */
.form-layout {
  display: grid;
  gap: 56px;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
}
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=password], input[type=search], input[type=number], input[type=date], input[type=file],
textarea, select {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #D7DEE8;
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type=file] { padding: 10px 12px; }
textarea { min-height: 132px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(249,186,0,.18);
}
label {
  font-weight: 700;
  display: grid;
  gap: 7px;
  margin-bottom: 8px;
  font-size: .92rem;
  color: var(--ink);
}
label input, label textarea, label select { margin-top: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.checkbox-line,
label.check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 12px 0;
}
.checkbox-line input,
label.check input,
input[type=checkbox] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin-top: 3px;
  accent-color: var(--gold);
}
.checkbox-line span,
label.check span {
  color: var(--slate);
  font-weight: 500;
  line-height: 1.6;
}
.checkbox-line span strong,
label.check span strong { color: var(--ink); }
.checkbox-line label { display: inline; font-weight: 400; color: var(--slate); margin: 0; }
.form-message { padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 16px; }
.form-message.is-success { background: var(--success-soft); color: var(--success); border: 1px solid #B7DFC6; }
.form-message.is-error { background: var(--danger-soft); color: var(--danger); border: 1px solid #F2C5C2; }

.notice {
  background: var(--gold-soft);
  border: 1px solid #F0DB87;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  color: #6F5300;
}

/* ============================================================
   8. Content panels, info cards, download grid (Dokumente)
   ============================================================ */
.content-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.info-card {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  color: var(--slate);
}
.download-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.download-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s, box-shadow .2s;
}
.download-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.download-card h3 { font-size: 1.1rem; margin: 0; }
.download-card p { color: var(--slate); margin: 0; flex: 1; }
.download-card .iconbox { margin-bottom: 0; }
.download-card .action-row { margin-top: auto; }
.compliance-downloads .download-card {
  border-top: 3px solid var(--gold);
}
.doc-date {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(245, 181, 0, .12);
  color: var(--gold-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.assortment-notes { margin-top: 32px; display: grid; gap: 14px; }
.assortment-notes p {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  margin: 0;
}
.assortment-notes strong { min-width: 200px; }
.assortment-notes span { color: var(--slate); }

/* ============================================================
   9. Maintenance UI
   ============================================================ */
.maintenance-hero {
  padding: 96px 0;
  background: linear-gradient(180deg, var(--mist), #fff);
}
.maintenance-panel {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  padding: 42px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.maintenance-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-weight: 700;
  letter-spacing: .04em;
  width: 100%;
  justify-content: center;
}
.maintenance-badge::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
}
.maintenance-list {
  list-style: none;
  padding: 0;
  text-align: left;
  max-width: none;
  margin: 28px 0;
}
.maintenance-list li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.maintenance-list strong {
  color: var(--ink);
  font-weight: 800;
}
.maintenance-list span {
  color: var(--slate);
  line-height: 1.55;
}
.maintenance-home-link {
  font-size: 1.1rem;
}

/* ============================================================
   10. Customer area (kundenbereich)
   ============================================================ */
.customer-login-section {
  background:
    linear-gradient(135deg, rgba(249,186,0,.13), rgba(51,75,92,.10) 45%, rgba(255,255,255,1) 78%);
  padding-top: 72px;
}
.customer-area-intro {
  padding: 56px 0 28px;
}
.customer-area-intro h1 {
  margin-bottom: 18px;
}
.customer-area-intro .lead {
  margin-bottom: 0;
}
.customer-login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 34px;
  align-items: start;
}
.customer-login-copy {
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(203,213,225,.75);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-sm);
}
.customer-login-copy h2 { max-width: 680px; }
.customer-login-benefits {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.customer-login-benefits span {
  position: relative;
  padding: 12px 14px 12px 34px;
  border: 1px solid rgba(203,213,225,.75);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-soft);
  font-weight: 650;
}
.customer-login-benefits span::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(249,186,0,.18);
}
.customer-login-card {
  padding: 30px;
  border-top: 4px solid var(--gold);
}
.customer-login-card h3 {
  margin: 4px 0 18px;
  font-size: 1.25rem;
}
.customer-area-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  order: 20;
}
#lieferanten-upload { order: 10; }
#lieferanten-scan { order: 20; }
#lieferanten-kommunikation { order: 30; }
#lieferanten-bestelllisten { order: 80; }
#lieferanten-uebersicht { order: 90; }
#lieferanten-stammdaten { order: 10; }
.customer-side-nav {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 96px;
  box-shadow: var(--shadow-sm);
}
.customer-side-nav a {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.customer-side-nav a:hover, .customer-side-nav a.is-active {
  background: var(--gold-soft);
  color: var(--gold-dark);
}
.customer-side-nav strong {
  padding: 8px 12px 12px;
  color: var(--ink);
}
.customer-section-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.customer-section-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
#kunden-angebote { order: 10; }
.offer-tiles { order: 11; }
.offer-help-grid { order: 12; }
.customer-retour-panel { order: 30; }
.sales-offer-manager { order: 40; }
.sales-drafts-panel { order: 20; }
.sales-customer-orders { order: 21; }
.customer-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.customer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}
.customer-strip strong { color: var(--ink); }
.customer-strip span { color: var(--slate); margin-left: 8px; }
.customer-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.customer-session-head .btn {
  min-height: 38px;
  padding: 9px 14px;
  white-space: nowrap;
}
.customer-disclosure {
  margin-top: 0;
  padding: 12px 16px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}
.customer-disclosure-icon {
  color: var(--gold-dark);
  margin-left: auto;
  font-weight: 800;
  line-height: 1;
}
.customer-registration-form, .customer-profile-form, .offer-access-form {
  display: grid;
  gap: 14px;
}
.customer-profile-form,
.retour-form,
.sepa-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fff, #FAFBFD);
}
.customer-profile-form label,
.retour-form label,
.sepa-form label {
  min-width: 0;
}
.customer-profile-form .full,
.retour-form .full,
.retour-form .retour-lines,
.retour-form .form-message,
.retour-form button.full,
.sepa-form .full,
.sepa-form .form-message,
.sepa-form button.full {
  grid-column: 1 / -1;
}
.customer-profile-form button.full {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  min-width: 240px;
}
.sepa-recipient,
.sepa-mandate-text {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #F0DB87;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #FFF9E8, #FFFFFF);
  color: var(--slate);
}
.sepa-recipient strong,
.sepa-mandate-text strong {
  color: var(--ink);
}
.sepa-recipient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}
.sepa-recipient-grid span,
.sepa-mandate-text span {
  line-height: 1.55;
}
.retour-lines {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.retour-lines h4 { margin: 0; }
.retour-lines p { margin: -6px 0 0; color: var(--slate); }
.retour-line {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(180px, 1.5fr) minmax(100px, .8fr) minmax(90px, .6fr) minmax(150px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--mist);
}
.retour-add {
  justify-self: start;
}
.customer-registration-panel, .customer-retour-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 0;
  box-shadow: var(--shadow-sm);
}
.customer-registration-card {
  grid-column: 1 / -1;
}
.customer-registration-card summary,
.customer-disclosure summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.customer-disclosure summary > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.customer-disclosure summary strong {
  color: var(--ink);
  line-height: 1.2;
}
.customer-disclosure summary small {
  display: none;
}
.customer-registration-card summary::-webkit-details-marker,
.customer-disclosure summary::-webkit-details-marker {
  display: none;
}
.customer-registration-card summary strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.1rem;
}
.customer-registration-card summary small {
  display: block;
  margin-top: 4px;
  color: var(--slate);
}
.customer-registration-card[open] summary {
  margin-bottom: 18px;
}

/* ============================================================
   11. Offers (kundenbereich + öffentliche Angebote)
   ============================================================ */
.offer-login-band {
  background: var(--gold-soft);
  border: 1px solid #F0DB87;
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.offer-tiles {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.offer-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 14px 30px rgba(15,23,42,.05);
}
.offer-tile:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(15,23,42,.10); border-color: rgba(249,186,0,.55); }
.offer-tile .iconbox {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-soft), #fff);
  color: var(--gold-dark);
}
.offer-card-preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(155deg, #fff 0%, #F8FAFC 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
  text-decoration: none;
}
.offer-card-preview iframe {
  display: none;
}
.offer-preview-paper {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: 72%;
  height: 76%;
  padding: 18px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15,23,42,.12);
}
.offer-preview-brand {
  display: block;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
}
.offer-preview-brand::after {
  content: "rx";
  color: var(--gold);
  font-weight: 800;
}
.offer-preview-title {
  display: block;
  max-width: 100%;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.25;
}
.offer-preview-lines {
  display: block;
  width: 100%;
  height: 48px;
  border-top: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, rgba(100,116,139,.28) 0 1px, transparent 1px 10px);
}
.offer-card-preview > span:last-child {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(11,19,32,.86);
  color: #fff;
  font-size: .76rem;
  font-weight: 750;
}
.offer-card-preview:hover {
  border-color: rgba(249,186,0,.75);
}
.offer-tile h3 { margin-bottom: 6px; }
.offer-tile p { color: var(--slate); }
.offer-customer-meta { color: var(--slate); font-size: .9rem; }
.offer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.offer-actions .btn { min-width: 180px; justify-content: center; }
.offer-welcome { color: var(--slate); }
.offer-help-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 20px 0 4px; }
.offer-help { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.offer-help strong { display: block; margin-bottom: 4px; }
.offer-help span { color: var(--slate); }
.offer-applied-price, .offer-price-note { color: var(--gold-dark); font-weight: 600; }
.price-note { color: var(--slate); font-size: .85rem; }

/* Offer dialog (modal) */
.offer-dialog {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  z-index: 200;
  padding: 0;
  width: min(1720px, calc(100vw - 20px));
  height: min(96vh, 980px);
  max-height: 96vh;
  max-width: none;
  border: 0;
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
}
.offer-dialog[open], .offer-dialog.is-open { display: flex; }
.offer-dialog::backdrop {
  background:
    radial-gradient(circle at 18% 18%, rgba(249,186,0,.16), transparent 26%),
    linear-gradient(135deg, #0B1320 0%, #1E293B 100%);
}
.offer-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 0 0 auto;
  padding: 16px 26px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.offer-dialog-head h3 {
  font-size: 1.4rem;
  margin: 4px 0 6px;
}
.offer-dialog-head p {
  max-width: 720px;
  color: var(--slate);
}
.offer-dialog-grid {
  background: #fff;
  border-radius: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(430px, .72fr) minmax(760px, 1.28fr);
  overflow: hidden;
  box-shadow: none;
}
.offer-pdf-pane {
  display: block;
  background: #F7F8FA;
  padding: 24px;
  overflow: auto;
  border-right: 1px solid var(--line);
  min-height: 0;
}
.offer-pdf-pane iframe {
  width: 100%;
  height: calc(100% - 36px);
  min-height: 560px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.offer-form-pane {
  padding: 18px 22px 22px;
  overflow: auto;
  background: #fff;
  min-width: 0;
  min-height: 0;
}
.offer-form-pane form[data-offer-order-form] {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.offer-order-sticky {
  position: static;
  display: grid;
  gap: 10px;
  flex: 0 0 auto;
  margin: -2px -4px 10px;
  padding: 2px 4px 10px;
  background: transparent;
  border-bottom: 1px solid rgba(226,232,240,.85);
}
.offer-order-sticky:has(.sales-customer-picker) {
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
.offer-order-sticky:has(.sales-customer-picker) .sales-customer-picker {
  grid-column: 1;
}
.offer-order-sticky:has(.sales-customer-picker) .sales-customer-profile {
  grid-column: 1;
}
.offer-order-sticky:has(.sales-customer-picker) .offer-form-actions {
  grid-column: 1;
  grid-row: auto;
  height: auto;
  align-content: start;
  justify-self: start;
}
.offer-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.offer-inline-pdf-link {
  display: none;
}
.offer-inline-pdf-link span {
  color: var(--slate);
  font-weight: 700;
}
.offer-inline-pdf-link a {
  color: var(--gold-dark);
  font-weight: 800;
}
.offer-pane-head strong { font-size: 1rem; }
.offer-pane-head h3 { margin: 0 0 4px; }
.dialog-close {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 1.35rem;
  line-height: 1;
  width: 38px;
  height: 38px;
  color: var(--slate);
}
.dialog-close:hover { color: var(--ink); }

.offer-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: auto;
  flex: 1 1 430px;
  min-height: 360px;
  max-height: none;
  background: #fff;
}
.offer-order-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: .88rem;
  table-layout: fixed;
}
.offer-order-table th, .offer-order-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.offer-order-table th { background: var(--mist); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; position: sticky; top: 0; z-index: 3; }
.offer-order-table th span {
  display: block;
  margin-bottom: 7px;
}
.offer-order-table th:nth-child(1), .offer-order-table td:nth-child(1) { width: 118px; }
.offer-order-table th:nth-child(2), .offer-order-table td:nth-child(2) { width: 300px; }
.offer-order-table th:nth-child(3), .offer-order-table td:nth-child(3) { width: 105px; }
.offer-order-table th:nth-child(4), .offer-order-table td:nth-child(4) { width: 95px; }
.offer-order-table th:nth-child(5), .offer-order-table td:nth-child(5) { width: 130px; }
.offer-order-table tr:last-child td { border-bottom: 0; }
.offer-order-table .qty input, .offer-order-table input[name="order_menge[]"] { width: 72px; text-align: right; }
.offer-order-table input[type=search],
.offer-order-table input:not([type]),
.offer-order-table input[type=text] {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: .82rem;
}
.offer-order-table th input[type=search] {
  width: 100%;
  background: #fff;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.offer-order-table td small {
  display: block;
  margin-top: 4px;
}
.offer-table-top-scroll {
  position: sticky;
  top: var(--offer-table-scroll-top, 0px);
  z-index: 4;
  height: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #F8FAFC;
}
.offer-table-top-scroll div { height: 1px; }
.availability-panel {
  margin: 16px 0;
  padding: 14px 18px;
  background: var(--blue-soft);
  border: 1px solid #B6DAF1;
  border-radius: var(--radius-md);
  color: var(--blue);
}
.availability-result { display: grid; gap: 6px; margin-top: 8px; }
.availability-adjust-all { background: transparent; border: 0; color: var(--gold-dark); font-weight: 600; padding: 0; margin: 8px 0; }
.offer-confirm {
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #FFF8E5;
  color: var(--ink);
  padding: 12px;
  margin-top: 10px;
}
.offer-confirm p {
  margin: 0 0 10px;
  font-weight: 800;
}
.offer-confirm small {
  display: block;
  margin: -4px 0 12px;
  color: #765000;
  font-size: 12px;
  line-height: 1.45;
}
.offer-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.offer-confirm .btn {
  width: auto;
  min-height: 40px;
  padding: 9px 16px;
}
.offer-combine-confirm {
  margin-bottom: 10px;
  border-left-color: var(--slate-dark);
  background: #F4F7FA;
  color: var(--ink);
}
.offer-combine-confirm small { color: var(--slate); }
.offer-button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.offer-button-row .btn { min-width: 170px; justify-content: center; }
.offer-form-actions {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(190px, auto);
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248,250,252,.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}
.offer-form-actions .checkbox-line { margin: 0; }
.offer-form-actions .offer-button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 126px));
  gap: 8px;
  margin: 0;
  max-width: 268px;
}
.offer-form-actions .offer-button-row .btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
}
.offer-form-actions .availability-adjust-all {
  text-align: right;
  justify-self: end;
  line-height: 1.25;
}
.offer-order-sticky:has(.sales-customer-picker) .offer-form-actions .checkbox-line,
.offer-order-sticky:has(.sales-customer-picker) .offer-form-actions .offer-button-row,
.offer-order-sticky:has(.sales-customer-picker) .offer-form-actions .offer-selection-overview {
  width: auto;
}
.offer-order-sticky:has(.sales-customer-picker) .offer-form-actions .offer-selection-overview {
  padding: 14px;
}
.offer-filter-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

@media (max-width: 1180px) {
  .offer-form-actions {
    grid-template-columns: 1fr auto;
  }
  .offer-form-actions .availability-adjust-all {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

.public-offers-hero {
  padding: 64px 0 40px;
  background: linear-gradient(180deg, #FFFCEF, var(--white));
}
.public-offer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.public-offer-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .2s, box-shadow .2s;
}
.public-offer-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.public-offer-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.public-offer-card-main h3 { margin: 0 0 6px; }
.public-offer-pdf, .public-offer-preview {
  background: var(--mist);
  border-radius: var(--radius-md);
  padding: 18px;
  color: var(--slate);
}
.public-offer-preview-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-dark); font-weight: 700; }
.public-offer-interest {
  background: var(--gold-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.public-offer-interest-form { display: grid; gap: 10px; margin-top: 10px; }
.public-offer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* Order flow (bestellung) */
.order-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.order-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.order-steps { display: grid; gap: 14px; counter-reset: step; margin: 24px 0; padding: 0; list-style: none; }
.order-step { padding: 16px 20px 16px 56px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); position: relative; counter-increment: step; }
.order-step::before {
  content: counter(step);
  position: absolute; left: 16px; top: 16px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold); color: var(--ink); font-weight: 800;
}

.partner-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 18px; }
.partner { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; }

.retour-items, .retour-preview { background: var(--mist); border-radius: var(--radius-md); padding: 16px; }

/* Customer order list (in kundenbereich) */
.customer-order-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.customer-order-item { background: var(--mist); border-radius: var(--radius-md); padding: 12px 16px; }
.customer-order-lines { color: var(--slate); font-size: .9rem; }

/* Sales picker for the sales-login mode */
.sales-customer-picker {
  display: grid;
  gap: 8px;
  background: linear-gradient(135deg, #FFF9E7, #fff);
  border: 1px solid #EAC45C;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 0;
}
.sales-customer-picker label {
  margin: 0;
  display: grid;
  gap: 10px;
}
.sales-customer-picker input[type=search] {
  background: #fff;
  border-color: #CFD8E6;
}
.sales-customer-picker select {
  font-weight: 700;
}
.sales-customer-picker p {
  color: var(--slate);
  margin: 0;
  line-height: 1.45;
  font-size: 13px;
}
.sales-customer-profile {
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0;
  background: #fff;
}
.sales-customer-profile summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  color: var(--ink);
  font-weight: 750;
}
.sales-customer-profile summary::-webkit-details-marker { display: none; }
.sales-customer-profile[open] summary { margin-bottom: 14px; }

.sales-offer-manager,
.sales-drafts-panel,
.sales-customer-orders {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.sales-offer-upload-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.sales-offer-upload-form .full,
.sales-offer-upload-hint {
  grid-column: 1 / -1;
}
.sales-offer-upload-form textarea {
  min-height: 132px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9rem;
}
.sales-offer-upload-hint {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #F0DB87;
  border-radius: var(--radius-md);
  background: var(--gold-soft);
  color: #6F5300;
  font-size: .9rem;
}
.sales-managed-offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.sales-managed-offer {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #FAFBFD;
}
.sales-managed-offer strong { color: var(--ink); }
.sales-managed-offer span {
  color: var(--slate);
  font-size: .9rem;
}
.supplier-login-section .customer-login-copy {
  border-top: 3px solid var(--gold);
}
.supplier-login-section .customer-section-main > .customer-login-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 18px;
}
.supplier-login-section .customer-section-main > .customer-login-copy .eyebrow {
  grid-column: 1;
}
.supplier-login-section .customer-section-main > .customer-login-copy h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.05;
}
.supplier-login-section .customer-section-main > .customer-login-copy .lead {
  grid-column: 1;
  margin: 0;
  font-size: .98rem;
}
.supplier-session-actions {
  display: flex;
  justify-content: flex-end;
  grid-column: 2;
  grid-row: 1 / span 3;
  margin-top: 0;
}
.supplier-session-actions .btn {
  min-height: 42px;
  padding: 10px 18px;
}
.supplier-login-section.is-supplier-mode #lieferanten-scan { order: 1; }
.supplier-login-section.is-supplier-mode #lieferanten-sendungen { order: 2; }
.supplier-login-section.is-supplier-mode #lieferanten-stammdaten { order: 3; }
.supplier-login-section.is-supplier-mode #lieferanten-bestelllisten { order: 4; }
.supplier-login-section.is-supplier-mode #lieferanten-kommunikation { order: 5; }
.supplier-login-section.is-purchasing-mode #lieferanten-uebersicht { order: 1; }
.supplier-login-section.is-purchasing-mode #lieferanten-mhd-anfragen { order: 2; }
.supplier-login-section.is-purchasing-mode #lieferanten-bestelllisten { order: 3; }
.supplier-login-section.is-purchasing-mode #msv3-automation-test { order: 4; }
.supplier-login-section.is-purchasing-mode #lieferanten-upload { order: 5; }
.supplier-login-section.is-purchasing-mode #lieferanten-kommunikation { order: 5; }

.supplier-login-section.is-purchasing-mode .customer-login-copy {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  align-items: end;
  padding-bottom: 10px;
}
.supplier-login-section.is-purchasing-mode .customer-login-copy .eyebrow,
.supplier-login-section.is-purchasing-mode .customer-login-copy h2,
.supplier-login-section.is-purchasing-mode .customer-login-copy .lead {
  grid-column: 1;
}
.supplier-login-section.is-purchasing-mode .customer-login-copy h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw, 2.3rem);
}
.supplier-login-section.is-purchasing-mode .customer-login-copy .lead {
  max-width: 780px;
  margin: 0;
}
.supplier-login-section.is-purchasing-mode .supplier-session-actions {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.msv3-automation-test {
  border-top-color: var(--gold);
}

.automation-test-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(247, 181, 0, .35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 247, 224, .95), rgba(244, 248, 252, .95));
  color: var(--slate);
  margin-bottom: 16px;
}

.automation-test-banner strong {
  color: var(--ink);
  white-space: nowrap;
}

.automation-gateway-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 126, 194, .22);
  border-radius: 14px;
  background: #eef7fd;
  color: #075985;
  margin: -4px 0 16px;
  font-weight: 750;
}

.automation-gateway-status strong {
  color: var(--ink);
}

.automation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.automation-grid section,
.automation-results-grid section {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.automation-grid h4,
.automation-results-grid h4 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.automation-grid label {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  font-weight: 750;
}

.automation-grid input,
.automation-grid select,
.automation-grid textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  background: #fff;
}

.automation-grid select[multiple] {
  min-height: 132px;
}

.automation-grid .check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.automation-grid .check input {
  width: auto;
}

.automation-grid .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.automation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.automation-real-run-panel {
  border-color: rgba(220, 38, 38, .22) !important;
  background: linear-gradient(135deg, #fff, #fff7ed) !important;
}

.automation-real-confirm {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(180px, .6fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(220, 38, 38, .28);
  border-radius: 14px;
  background: #fff7ed;
}

.automation-real-confirm label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.automation-real-confirm .check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.automation-real-confirm input {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  background: #fff;
}

.automation-real-confirm .check input {
  width: auto;
}

.btn.danger {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.automation-results-grid {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) 1.2fr;
  gap: 16px;
  margin-top: 16px;
}

.automation-time-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.automation-time-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #eef7fd;
  color: #075985;
  font-weight: 800;
}

.automation-log-list {
  display: grid;
  gap: 10px;
}

.automation-log-list details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--soft);
}

.automation-log-list summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.automation-log-items {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
}
.supplier-dashboard,
.supplier-area-grid {
  grid-column: 1 / -1;
}
.supplier-list {
  display: grid;
  gap: 10px;
}
#lieferanten-uebersicht .supplier-list,
#lieferanten-uebersicht [data-supplier-status-list] {
  max-height: clamp(420px, 68vh, 760px);
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 2px 8px 2px 0;
  scrollbar-gutter: stable;
}
#lieferanten-uebersicht .supplier-list::-webkit-scrollbar,
#lieferanten-uebersicht [data-supplier-status-list]::-webkit-scrollbar {
  width: 10px;
}
#lieferanten-uebersicht .supplier-list::-webkit-scrollbar-thumb,
#lieferanten-uebersicht [data-supplier-status-list]::-webkit-scrollbar-thumb {
  background: #9aa6b4;
  border: 3px solid #f5f7fa;
  border-radius: 999px;
}
#lieferanten-uebersicht .supplier-list::-webkit-scrollbar-track,
#lieferanten-uebersicht [data-supplier-status-list]::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 999px;
}
.supplier-group-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.supplier-group-overview article {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 181, 0, .32);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #fff8df, #fff);
}
.supplier-group-overview article.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(245, 181, 0, .18);
}
.supplier-group-overview strong {
  color: var(--ink);
}
.supplier-group-overview span,
.supplier-group-overview small {
  color: var(--slate);
  font-size: .88rem;
}
.supplier-group-overview a,
.supplier-group-card-filter button {
  color: var(--gold-dark);
  font-weight: 800;
  text-decoration: none;
}
.supplier-group-card-filter {
  margin: 0;
}
.supplier-group-card-filter button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.supplier-purchasing-status {
  display: grid;
  grid-template-columns: minmax(190px, .9fr) minmax(240px, 1.2fr);
  gap: 10px;
}
.supplier-purchasing-status > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #d8e1ed;
  border-radius: 12px;
  background: #f8fafc;
}
.supplier-purchasing-status strong {
  color: var(--ink);
}
.supplier-purchasing-status small {
  color: var(--slate);
  line-height: 1.45;
}
.supplier-filter-form,
.supplier-group-change-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.supplier-filter-form {
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.supplier-filter-form label,
.supplier-group-change-form label {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}
.supplier-filter-form select,
.supplier-group-change-form select {
  min-width: 210px;
  min-height: 40px;
  border: 1px solid #cbd6e5;
  border-radius: 9px;
  padding: 8px 10px;
  background: #fff;
  font: inherit;
}
.supplier-group-change-form {
  margin-top: 8px;
}
.supplier-group-change-form .btn,
.supplier-filter-form .btn {
  min-height: 40px;
  padding: 9px 13px;
}
.supplier-status-row {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.supplier-login-section.is-purchasing-mode #lieferanten-uebersicht .supplier-list {
  max-height: min(68vh, 720px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.supplier-login-section.is-purchasing-mode #lieferanten-uebersicht .supplier-filter-form {
  position: sticky;
  top: 76px;
  z-index: 4;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
}
#lieferanten-uebersicht.is-loading {
  opacity: .68;
  pointer-events: none;
}
.supplier-status-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.supplier-status-row summary::-webkit-details-marker {
  display: none;
}
.supplier-status-row summary::after {
  content: "+";
  color: var(--gold-dark);
  font-weight: 900;
}
.supplier-status-row[open] summary::after {
  content: "-";
}
.supplier-status-row summary span:first-child {
  display: grid;
  gap: 2px;
}
.supplier-status-row summary strong {
  color: var(--ink);
}
.supplier-status-meta {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.supplier-status-row summary small,
.supplier-status-row summary span:last-child {
  color: var(--slate);
  font-size: .86rem;
}
.supplier-status-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}
.supplier-linked-lists {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.supplier-msv3-accounts {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid #f0c247;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf0, #fff);
}
.supplier-msv3-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.supplier-msv3-head small {
  color: var(--slate);
}
.supplier-msv3-account-list {
  display: grid;
  gap: 8px;
}
.supplier-msv3-account-row {
  display: grid;
  grid-template-columns: 70px repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  align-items: end;
  margin: 0;
  padding: 8px;
  border: 1px solid #d8e1ed;
  border-radius: 10px;
  background: #fff;
}
.supplier-msv3-account-row.is-compact {
  grid-template-columns: 68px repeat(5, minmax(116px, 1fr));
}
.supplier-msv3-account-row.is-compact .wide {
  grid-column: span 2;
}
.supplier-msv3-account-row label {
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
}
.supplier-msv3-account-row input,
.supplier-msv3-account-row select {
  width: 100%;
  min-height: 32px;
  border: 1px solid #cbd6e5;
  border-radius: 9px;
  padding: 6px 9px;
  background: #fff;
  font: inherit;
}
.supplier-msv3-account-row .check {
  display: flex;
  align-items: center;
}
.supplier-msv3-account-row .check input {
  width: auto;
  min-height: 0;
}
.supplier-msv3-account-status {
  display: grid;
  gap: 2px;
  grid-column: span 2;
  color: var(--slate);
  font-size: .78rem;
}
.supplier-msv3-account-status span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef3f8;
  font-weight: 900;
}
.supplier-msv3-account-status .is-ok {
  color: #0f6b2a;
  background: #dcfce7;
}
.supplier-msv3-account-status .is-error {
  color: #991b1b;
  background: #fee2e2;
}
.supplier-msv3-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.supplier-linked-list-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 180px) auto auto;
  gap: 8px;
  align-items: end;
  padding: 8px;
  border: 1px solid #d8e1ed;
  border-radius: 10px;
  background: #f8fafc;
}
.supplier-linked-list-row > span {
  display: grid;
  gap: 2px;
}
.supplier-linked-list-row label {
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 800;
}
.supplier-linked-list-row input {
  min-height: 36px;
  border: 1px solid #cbd6e5;
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
}
.supplier-linked-list-row .check {
  display: flex;
  align-items: center;
  gap: 7px;
}
.supplier-linked-list-row .check input {
  min-height: 0;
}
.supplier-linked-list-row .btn {
  min-height: 36px;
  padding: 8px 12px;
}
.supplier-order-lists {
  display: grid;
  gap: 10px;
}
.supplier-order-list {
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.supplier-order-list-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.supplier-order-list-head::-webkit-details-marker {
  display: none;
}
.supplier-order-list-head::after {
  content: "+";
  color: var(--gold-dark);
  font-weight: 900;
}
.supplier-order-list[open] .supplier-order-list-head::after {
  content: "-";
}
.supplier-order-list-head h3 {
  margin: 4px 0 0;
  font-size: 1rem;
}
.supplier-order-list-head small {
  display: block;
  margin-top: 2px;
  color: var(--slate);
  font-size: .84rem;
}
.supplier-order-list-head > span {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-size: .86rem;
  font-weight: 700;
  margin-left: auto;
}
.supplier-list-settings-form {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.35fr) auto;
  gap: 12px;
  align-items: end;
  margin: 0 14px 12px;
  padding: 12px;
  border: 1px solid #d8e1ed;
  border-radius: 14px;
  background: #f8fafc;
}
.supplier-list-settings-form > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
}
.supplier-list-settings-form strong {
  grid-column: 1 / -1;
  color: var(--ink);
  font-size: .9rem;
}
.supplier-list-settings-form label {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  font-size: .86rem;
}
.supplier-list-settings-form input,
.supplier-list-settings-form select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
}
.supplier-list-settings-form .check {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: end;
}
.supplier-list-settings-form .check input {
  width: auto;
  min-height: 0;
}
.supplier-list-settings-form .btn {
  min-height: 40px;
  padding: 10px 14px;
  white-space: nowrap;
}
.supplier-list-settings-form .btn.danger {
  border-color: rgba(180, 35, 24, .35);
  color: #b42318;
  background: #fff;
}
.supplier-list-add-article-form {
  display: grid;
  grid-template-columns: minmax(105px, .75fr) minmax(220px, 1.5fr) minmax(90px, .55fr) minmax(140px, .8fr) auto;
  gap: 10px;
  align-items: end;
  margin: -4px 14px 14px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 181, 0, .35);
  border-radius: 14px;
  background: #fffdf5;
}
.supplier-list-add-article-form strong {
  grid-column: 1 / -1;
  font-size: .86rem;
  color: var(--ink);
}
.supplier-list-add-article-form label {
  display: grid;
  gap: 5px;
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  color: var(--ink);
}
.supplier-list-add-article-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
}
.supplier-list-add-article-form .btn {
  min-height: 38px;
  padding: 9px 13px;
  white-space: nowrap;
}
.supplier-list-overrides {
  grid-column: 1 / -1;
  color: var(--slate);
  line-height: 1.5;
}
.supplier-table-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  margin: 0 14px 6px;
}
.supplier-table-scroll-top > div {
  height: 1px;
}
.supplier-table-wrap {
  overflow: auto;
  max-height: 420px;
  margin: 0 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  content-visibility: auto;
  contain-intrinsic-size: 420px 900px;
}
.supplier-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 760px;
}
.supplier-order-table th,
.supplier-order-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.supplier-order-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mist);
  color: var(--ink);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.supplier-filter-row th {
  top: 34px;
  background: #fff;
}
.supplier-filter-row input {
  width: 100%;
  min-width: 110px;
  min-height: 34px;
  border: 1px solid #cbd6e5;
  border-radius: 9px;
  padding: 7px 9px;
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.supplier-order-table tr:last-child td {
  border-bottom: 0;
}
.supplier-quantity-form {
  display: grid;
  gap: 12px;
}
.supplier-quantity-input,
.supplier-mhd-input {
  width: 120px;
  min-height: 38px;
  border: 1px solid #cbd6e5;
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.supplier-mhd-input {
  width: 150px;
}
.supplier-quantity-input:focus,
.supplier-mhd-input:focus {
  outline: 2px solid rgba(245, 181, 0, .35);
  border-color: var(--gold);
}
.supplier-total-count {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.supplier-lazy-table {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 12px;
  border: 1px dashed #cbd6e5;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--muted);
  font-weight: 700;
}
.supplier-lazy-table.is-loading {
  opacity: .7;
}
.supplier-mhd-request-list {
  display: grid;
  gap: 10px;
}
.supplier-mhd-request {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.supplier-mhd-request small {
  display: block;
  margin-top: 3px;
  color: var(--slate);
}
.supplier-mhd-request .inline-form {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 0;
}
.supplier-mhd-decision-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}
.supplier-mhd-decision-form input {
  min-height: 40px;
  border: 1px solid #cbd6e5;
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
}
.supplier-quantity-save {
  justify-self: start;
  margin: 0 14px 14px;
}
.supplier-scan-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(245, 181, 0, .38);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 248, 225, .86), #fff 52%, rgba(15, 23, 42, .035));
}
.supplier-scan-panel.has-scan-ok {
  border-color: rgba(19, 138, 54, .62);
  box-shadow: 0 0 0 3px rgba(19, 138, 54, .08);
}
.supplier-scan-panel.has-scan-warning {
  border-color: rgba(245, 181, 0, .72);
  box-shadow: 0 0 0 3px rgba(245, 181, 0, .10);
}
.supplier-scan-panel.has-scan-error {
  border-color: rgba(180, 35, 24, .62);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .08);
}
.supplier-mobile-work-title {
  display: none;
}
.supplier-mobile-brandbar {
  display: none;
}
.supplier-scan-entry {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto auto;
  gap: 12px;
  align-items: end;
}
.supplier-scan-entry label {
  display: grid;
  gap: 7px;
  margin: 0;
  font-weight: 800;
  color: var(--ink);
}
.supplier-scan-entry input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.supplier-camera-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.supplier-camera-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.supplier-camera-fallback {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.supplier-camera-fallback input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.supplier-camera-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 15, 28, .78);
}
.supplier-camera-modal[hidden] {
  display: none;
}
.supplier-camera-dialog {
  width: min(620px, 100%);
  border-radius: 18px;
  border: 2px solid var(--gold);
  background: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  overflow: hidden;
}
.supplier-camera-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: #fff;
  background: #0b1422;
}
.supplier-camera-top button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  color: #fff;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.supplier-camera-frame {
  position: relative;
  background: #111827;
  aspect-ratio: 4 / 3;
}
.supplier-camera-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.supplier-camera-target {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78%, 420px);
  height: min(38%, 190px);
  transform: translate(-50%, -50%);
  border: 3px solid rgba(245, 181, 0, .94);
  border-radius: 14px;
  box-shadow: 0 0 0 999px rgba(0,0,0,.18);
}
.supplier-camera-target::after {
  content: "Code komplett in den Rahmen halten";
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  color: #111827;
  background: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.supplier-camera-dialog p {
  margin: 0;
  padding: 13px 16px;
  color: var(--slate);
  background: #fff;
}
.supplier-history-list {
  display: grid;
  gap: 10px;
}
.supplier-history-list article {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.supplier-history-list strong {
  color: var(--ink);
}
.supplier-history-list span,
.supplier-history-list small {
  color: var(--slate);
}
.supplier-scan-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.supplier-scan-hints span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line);
  color: var(--slate);
  font-size: .86rem;
}
.supplier-manual-entry {
  display: block;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
}
.supplier-manual-entry strong,
.supplier-manual-entry summary {
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
.supplier-manual-entry summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.supplier-manual-entry summary::-webkit-details-marker {
  display: none;
}
.supplier-manual-entry summary::after {
  content: "+";
  color: var(--gold-dark);
  font-weight: 900;
}
.supplier-manual-entry[open] summary::after {
  content: "-";
}
.supplier-manual-entry > span {
  display: none;
  color: var(--slate);
  font-size: .92rem;
  margin-top: 8px;
}
.supplier-manual-entry > div {
  display: none;
  grid-template-columns: 1fr 1fr 110px auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}
.supplier-manual-entry[open] > span {
  display: block;
}
.supplier-manual-entry[open] > div {
  display: grid;
}
.supplier-manual-entry label {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}
.supplier-manual-entry input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  background: #fff;
}
.supplier-scan-result {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--slate);
  border-radius: var(--radius-md);
  background: #fff;
}
.supplier-scan-result::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--slate);
  box-shadow: 0 0 0 5px rgba(100, 116, 139, .12);
}
.supplier-scan-result.is-ok::before { background: #138a36; box-shadow: 0 0 0 5px rgba(19, 138, 54, .14); }
.supplier-scan-result.is-warning::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(245, 181, 0, .18); }
.supplier-scan-result.is-error::before { background: #b42318; box-shadow: 0 0 0 5px rgba(180, 35, 24, .14); }
.supplier-scan-result strong {
  color: var(--ink);
  font-size: 1.05rem;
}
.supplier-scan-result span,
.supplier-scan-result small {
  color: var(--slate);
}
.supplier-scan-result.is-ok {
  border-left-color: #138a36;
  background: #f2fbf5;
}
.supplier-scan-result.is-warning {
  border-left-color: var(--gold);
  background: #fff8df;
}
.supplier-scan-result.is-error {
  border-left-color: #b42318;
  background: #fff4f2;
}
.supplier-inquiry-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(245, 181, 0, .7);
  border-radius: 999px;
  color: #111827;
  background: #fff;
  font-weight: 900;
  text-decoration: none;
}
.supplier-scan-quantity {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.supplier-scan-quantity span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--slate);
  font-size: .9rem;
  font-weight: 800;
}
.supplier-scan-quantity .is-open {
  border-color: rgba(245, 181, 0, .55);
  background: #fff8df;
  color: var(--gold-dark);
}
.supplier-scan-quantity .is-complete {
  border-color: rgba(19, 138, 54, .25);
  background: #edf9f0;
  color: #137333;
}
.supplier-scan-quantity .is-over {
  border-color: rgba(180, 35, 24, .25);
  background: #fff4f2;
  color: #b42318;
}
.supplier-scan-reset {
  justify-self: start;
}
.supplier-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}
.supplier-profile-form label {
  display: grid;
  gap: 6px;
  margin: 0;
  font-weight: 800;
  color: var(--ink);
}
.supplier-profile-form input,
.supplier-profile-form textarea {
  width: 100%;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.supplier-profile-form input:disabled {
  color: var(--slate);
  background: #f4f6f9;
}
.supplier-profile-form .full {
  grid-column: 1 / -1;
}
.supplier-profile-form .btn {
  justify-self: start;
}
.supplier-package-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .88);
}
.supplier-package-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 320px);
  gap: 14px;
  align-items: end;
}
.supplier-package-head strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
}
.supplier-package-head label {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: .9rem;
  font-weight: 800;
  color: var(--slate);
}
.supplier-package-head input {
  min-height: 42px;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  background: #fff;
}
.supplier-package-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.supplier-package-copy {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}
.supplier-package-copy input {
  width: 18px;
  height: 18px;
}
.supplier-package-actions .btn {
  min-height: 42px;
  padding: 10px 14px;
}
.supplier-package-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.supplier-package-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 181, 0, .35);
  border-radius: 12px;
  background: #fffaf0;
}
.supplier-package-card strong {
  color: var(--ink);
}
.supplier-package-card span,
.supplier-package-message {
  color: var(--slate);
  font-size: .9rem;
}
.supplier-package-items {
  display: grid;
  gap: 3px;
  margin: 3px 0 0;
  padding-left: 18px;
  color: var(--slate);
  font-size: .85rem;
}
.supplier-package-message.is-ok {
  color: #137333;
  font-weight: 800;
}
.supplier-package-message.is-warning {
  color: var(--gold-dark);
  font-weight: 800;
}
.supplier-package-message.is-error {
  color: #b42318;
  font-weight: 800;
}
.supplier-upload-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #FAFBFD;
}
.supplier-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.supplier-upload-form label {
  display: grid;
  gap: 7px;
  margin: 0;
  font-weight: 800;
  color: var(--ink);
}
.supplier-upload-form input,
.supplier-upload-form select {
  width: 100%;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  padding: 11px 13px;
  background: #fff;
  font: inherit;
}
.supplier-upload-form p {
  margin: 0;
  color: var(--slate);
  font-size: .92rem;
}
.sales-drafts-panel > div:first-child {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.sales-drafts-panel > div:first-child strong { font-size: 1.12rem; color: var(--ink); }
.sales-drafts-list { display: grid; gap: 12px; }
.sales-draft-item {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #FAFBFD;
}
.sales-draft-item > span { color: var(--slate); }
.sales-draft-actions,
.offer-selection-actions,
.sales-leave-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.offer-selection-overview,
.offer-order-summary {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  box-shadow: none;
}
.offer-selection-overview { padding: 14px; border-left: 4px solid var(--gold); box-shadow: var(--shadow-sm); }
.offer-order-summary { margin: 10px 0 12px; color: var(--ink); }
.offer-selection-overview.is-draft-overview {
  margin-top: 16px;
  background: linear-gradient(180deg, #fff, #FAFBFD);
}
.offer-selection-overview > strong,
.offer-order-summary > strong {
  font-size: 15px;
  color: var(--ink);
}
.offer-selection-overview > p,
.offer-order-summary > p {
  margin: 0;
  color: var(--slate);
  font-size: 13px;
}
.offer-order-minimum-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.68);
}
.offer-order-minimum-group > strong { font-size: 13px; color: var(--ink); }
.offer-selection-overview ul,
.offer-order-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.offer-order-summary ul { max-height: 220px; overflow: auto; }
.offer-selection-overview li,
.offer-order-summary li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 1px;
  align-items: center;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: #fff;
}
.offer-order-summary-line {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}
.offer-order-summary-line input {
  width: 54px;
  min-height: 30px;
  padding: 4px 7px;
  font-weight: 800;
  text-align: right;
}
.offer-order-summary-line span {
  font-weight: 800;
  font-size: 13px;
}
.offer-selection-overview small,
.offer-order-summary small {
  color: var(--slate);
}
.offer-line-total,
.offer-order-summary-total {
  color: var(--ink);
}
.offer-line-total {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
.offer-order-summary-total {
  padding-top: 8px;
  border-top: 1px solid rgba(15,23,42,.12);
  font-weight: 800;
  text-align: right;
}
.offer-order-summary-total.is-under-minimum {
  color: var(--danger);
}
.offer-order-summary-total.is-ok {
  color: var(--success);
}
.offer-remove-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: var(--gold-soft);
}
.offer-remove-confirm .btn {
  min-height: 36px;
  padding: 8px 12px;
}

.customer-order-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.customer-order-item {
  display: grid;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.customer-order-item > span { color: var(--slate); }
.customer-order-lines {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--slate);
  font-size: .9rem;
}
.customer-order-lines li {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--mist);
}

.sales-leave-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(11,19,32,.64);
  backdrop-filter: blur(5px);
}
.sales-leave-dialog {
  width: min(560px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.sales-leave-dialog h3 { margin: 0; font-size: 1.45rem; }
.sales-leave-dialog p { margin: 0; color: var(--slate); }

/* ============================================================
   12. Legal (impressum, datenschutz, agb)
   ============================================================ */
.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.legal-nav {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid var(--line);
  padding-left: 16px;
}
.legal-nav a { padding: 6px 0; font-weight: 500; color: var(--slate); }
.legal-nav a:hover, .legal-nav a.is-active { color: var(--gold-dark); }
.legal-nav .agb, .legal-nav .impressum, .legal-nav .datenschutz { display: block; }

/* ============================================================
   13. Footer
   ============================================================ */
.site-footer {
  background: #0A1119;
  color: rgba(255,255,255,.7);
  padding: 72px 0 20px;
}
.site-footer .wrap > .footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  margin-bottom: 32px;
}
.site-footer h4 { color: #fff; font-size: 1rem; margin: 0 0 18px; letter-spacing: .04em; text-transform: uppercase; }
.site-footer p { margin: 0 0 8px; color: rgba(255,255,255,.7); }
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: var(--gold); }
.site-footer .copyright {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 18px;
  text-align: center;
  font-size: .9rem;
  color: rgba(255,255,255,.6);
}
.maintenance-home-link { color: var(--gold); }

/* ============================================================
   14. Cookie notice
   ============================================================ */
.cookie-notice {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: var(--ink);
  color: rgba(255,255,255,.9);
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-lg);
  z-index: 150;
  max-width: 1100px;
  margin: 0 auto;
}
.cookie-notice[hidden] { display: none !important; }
.cookie-notice strong { color: #fff; }
.cookie-notice p { color: rgba(255,255,255,.7); margin: 4px 0 0; font-size: .9rem; }
.cookie-actions { display: flex; gap: 12px; align-items: center; }
.cookie-actions a { color: var(--gold); }
.cookie-actions a:hover { color: #fff; }

/* ============================================================
   15. Reveal animation hook (matches site.js)
   ============================================================ */
.is-visible { animation: rxFade .35s ease both; }
@keyframes rxFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   16. Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { order: -1; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .form-layout { grid-template-columns: 1fr; gap: 32px; }
  .customer-login-shell { grid-template-columns: 1fr; }
  .customer-section-layout { grid-template-columns: 1fr; }
  .customer-area-grid { grid-template-columns: 1fr; }
  .customer-side-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0; }
  .offer-dialog-grid { grid-template-columns: 1fr; height: auto; max-height: none; }
  .offer-pdf-pane { display: none; }
  .offer-inline-pdf-link { display: flex; }
  .customer-profile-form,
  .retour-form,
  .sepa-form,
  .retour-line { grid-template-columns: 1fr; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .automation-grid,
  .automation-results-grid,
  .automation-grid .form-row {
    grid-template-columns: 1fr;
  }
  .automation-test-banner,
  .automation-log-list summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .automation-actions .btn {
    width: 100%;
  }
  .automation-real-confirm {
    grid-template-columns: 1fr;
  }
  .menu-toggle { display: inline-flex; }
  .menu {
    position: fixed; left: 0; right: 0; top: 88px;
    background: #fff; border-top: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 24px;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .menu.is-open { max-height: calc(100vh - 88px); overflow: auto; }
  .menu a { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .menu .primary-link { margin: 12px 0 0; text-align: center; }
  .language-switch { margin: 12px 0 0; align-self: flex-start; }
  .language-switch a { border-bottom: 0; padding: 7px 10px; }
  .hero { padding: 56px 0 64px; }
  .section { padding: 64px 0; }
  .hero-rail { flex-direction: column; }
  .rail-item { min-width: 0; }
  .market-board { grid-template-columns: 1fr; }
  .topstrip .wrap { flex-direction: column; align-items: flex-start; }
  .topstrip-meta { gap: 8px; flex-wrap: wrap; }
  .customer-login-copy, .customer-login-card, .customer-registration-panel { padding: 22px; }
  .maintenance-panel { padding: 28px 22px; }
  .maintenance-list li { grid-template-columns: 1fr; gap: 4px; }
  .maintenance-login-row { grid-template-columns: 1fr; }
  .cookie-notice { flex-direction: column; align-items: flex-start; left: 12px; right: 12px; bottom: 12px; padding: 16px; }
  .cookie-actions { width: 100%; justify-content: flex-end; }
  .site-footer .footer-grid { grid-template-columns: 1fr; }
  .offer-login-band { flex-direction: column; align-items: flex-start; }
  .offer-dialog { width: calc(100vw - 12px); padding: 0; height: min(94vh, 900px); max-height: 94vh; }
  .offer-dialog-head { padding: 18px; }
  .offer-form-pane { padding: 18px; }
  .assortment-notes p { flex-direction: column; }
  .assortment-notes strong { min-width: 0; }
  .supplier-login-section.is-supplier-mode {
    min-height: 100vh;
    padding: max(4px, env(safe-area-inset-top)) 0 max(72px, env(safe-area-inset-bottom));
    background: #f6f8fb;
  }
  body:has(.supplier-login-section.is-supplier-mode) .topstrip,
  body:has(.supplier-login-section.is-supplier-mode) .site-header,
  body:has(.supplier-login-section.is-supplier-mode) .site-footer,
  body:has(.supplier-login-section.is-supplier-mode) .customer-area-intro,
  body:has(.supplier-login-section.is-supplier-mode) .cookie-notice {
    display: none !important;
  }
  .supplier-login-section.is-supplier-mode .wrap {
    width: min(100% - 6px, var(--wrap));
  }
  .supplier-login-section.is-supplier-mode .customer-side-nav,
  .supplier-login-section.is-supplier-mode .customer-login-copy,
  .supplier-login-section.is-supplier-mode #lieferanten-stammdaten,
  .supplier-login-section.is-supplier-mode #lieferanten-sendungen,
  .supplier-login-section.is-supplier-mode #lieferanten-bestelllisten,
  .supplier-login-section.is-supplier-mode #lieferanten-kommunikation {
    display: none;
  }
  .supplier-login-section.is-pwa-portal #lieferanten-sendungen,
  .supplier-login-section.is-pwa-portal #lieferanten-bestelllisten {
    display: block;
  }
  .supplier-login-section.is-supplier-mode .customer-section-layout,
  .supplier-login-section.is-supplier-mode .customer-area-grid {
    display: block;
  }
  .supplier-login-section.is-supplier-mode .customer-section-main {
    width: 100%;
  }
  .supplier-login-section.is-supplier-mode #lieferanten-scan {
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .supplier-login-section.is-supplier-mode #lieferanten-scan > summary {
    display: none;
  }
  .supplier-login-section.is-supplier-mode .supplier-scan-panel {
    gap: 5px;
    padding: 5px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: transparent;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
  }
  .supplier-login-section.is-supplier-mode .supplier-scan-panel.has-scan-ok {
    border-color: #138a36;
    background: #f2fbf5;
    box-shadow: 0 0 0 3px rgba(19, 138, 54, .10);
  }
  .supplier-login-section.is-supplier-mode .supplier-scan-panel.has-scan-warning {
    border-color: var(--gold);
    background: #fff8df;
    box-shadow: 0 0 0 3px rgba(245, 181, 0, .12);
  }
  .supplier-login-section.is-supplier-mode .supplier-scan-panel.has-scan-error {
    border-color: #b42318;
    background: #fff4f2;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .10);
  }
  .supplier-mobile-work-title {
    display: grid;
    gap: 3px;
    padding: 7px 10px;
    border: 1px solid rgba(245, 181, 0, .38);
    border-radius: 12px;
    background: linear-gradient(135deg, #fff8df, #fff);
  }
  .supplier-mobile-work-title strong {
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.15;
  }
  .supplier-mobile-brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .supplier-mobile-logo {
    color: #0b0f18;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: -.02em;
  }
  .supplier-mobile-logo span {
    color: var(--gold);
    font-weight: 900;
  }
  .supplier-mobile-brandbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 999px;
    color: var(--slate);
    background: #fff;
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
  }
  .supplier-session-actions {
    display: none;
  }
  .supplier-login-section.is-pwa-portal .customer-side-nav,
  .supplier-login-section.is-pwa-portal .customer-login-copy,
  .supplier-login-section.is-pwa-portal #lieferanten-stammdaten,
  .supplier-login-section.is-pwa-portal #lieferanten-kommunikation {
    display: none;
  }
  .supplier-login-section.is-pwa-portal .supplier-scan-panel.has-scan-ok {
    border-color: #0ea5e9;
    background: #eef9ff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .12);
  }
  .supplier-login-section.is-pwa-portal .supplier-mobile-work-title {
    border-color: rgba(14, 165, 233, .26);
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
  }
  .supplier-login-section.is-pwa-portal .supplier-mobile-logo span {
    color: #0ea5e9;
  }
  .supplier-login-section.is-pwa-portal .btn.gold,
  .supplier-login-section.is-pwa-portal .btn.green {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
  }
  .supplier-scan-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }
  .supplier-scan-entry label:first-child {
    grid-column: 1 / -1;
  }
  .supplier-scan-entry input {
    min-height: 42px;
    font-size: 16px;
  }
  .supplier-scan-entry .btn,
  .supplier-camera-button,
  .supplier-camera-fallback {
    width: 100%;
    min-height: 40px;
    padding: 7px 6px;
    font-size: .86rem;
  }
  .supplier-camera-fallback {
    grid-column: auto;
  }
  .supplier-manual-entry {
    display: block;
    padding: 7px;
    border-radius: 12px;
    background: #fff;
  }
  .supplier-manual-entry strong,
  .supplier-manual-entry summary {
    font-size: .88rem;
  }
  .supplier-manual-entry > span {
    display: none;
  }
  .supplier-manual-entry > div {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  .supplier-manual-entry:not([open]) > div,
  .supplier-manual-entry:not([open]) > span {
    display: none;
  }
  .supplier-manual-entry[open] > div {
    display: grid;
  }
  .supplier-manual-entry label:first-child {
    grid-column: 1 / -1;
  }
  .supplier-manual-entry input {
    min-height: 40px;
    font-size: 16px;
  }
  .supplier-manual-entry .btn {
    grid-column: 1 / -1;
    min-height: 40px;
  }
  .supplier-list-settings-form {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .supplier-list-add-article-form {
    grid-template-columns: 1fr;
    margin: 0 10px 12px;
    padding: 10px;
  }
  .supplier-list-settings-form > div {
    grid-template-columns: 1fr;
  }
  .supplier-purchasing-status {
    grid-template-columns: 1fr;
  }
  .supplier-linked-list-row {
    grid-template-columns: 1fr;
  }
  .supplier-msv3-head {
    display: grid;
  }
  .supplier-msv3-account-row {
    grid-template-columns: 1fr;
  }
  .supplier-msv3-actions {
    justify-content: stretch;
  }
  .supplier-msv3-actions .btn {
    width: 100%;
  }
  .supplier-scan-result {
    display: none;
    grid-template-columns: auto 1fr;
    gap: 3px 9px;
    align-items: center;
    min-height: 0;
    padding: 7px 9px;
    border-width: 2px;
    border-left-width: 6px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
  }
  .supplier-scan-result.is-warning,
  .supplier-scan-result.is-error {
    display: grid;
  }
  .supplier-scan-result.is-ok {
    display: none;
  }
  .supplier-scan-result::before {
    width: 12px;
    height: 12px;
  }
  .supplier-scan-result strong {
    font-size: .95rem;
    line-height: 1.1;
  }
  .supplier-scan-result span,
  .supplier-scan-result small {
    font-size: .9rem;
    line-height: 1.2;
  }
  .supplier-scan-result span,
  .supplier-scan-result small,
  .supplier-inquiry-link {
    grid-column: 2;
  }
  .supplier-inquiry-link {
    width: 100%;
    min-height: 34px;
    border-radius: 10px;
  }
  .supplier-package-panel {
    gap: 5px;
    padding: 7px;
    border-radius: 12px;
    background: #fff;
  }
  .supplier-package-head {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .supplier-package-head .eyebrow {
    display: none;
  }
  .supplier-package-head strong {
    margin-top: 0;
    font-size: .95rem;
  }
  .supplier-package-head label {
    font-size: .76rem;
    gap: 3px;
  }
  .supplier-package-head input {
    min-height: 38px;
    font-size: 16px;
  }
  .supplier-package-copy {
    align-items: flex-start;
    font-size: .82rem;
  }
  .supplier-package-actions {
    position: sticky;
    bottom: max(3px, env(safe-area-inset-bottom));
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .14);
  }
  .supplier-package-actions .btn {
    min-height: 44px;
    padding: 7px;
    font-size: .88rem;
  }
  .supplier-package-actions [data-supplier-package-reset],
  .supplier-package-actions [data-supplier-scan-reset] {
    display: none;
  }
  .supplier-package-list {
    grid-template-columns: 1fr;
  }
  .supplier-package-card {
    padding: 6px 8px;
    border-radius: 10px;
  }
  .supplier-package-card span,
  .supplier-package-message {
    font-size: .82rem;
  }
  .supplier-package-items {
    max-height: 56px;
    overflow: auto;
  }
}
@media (max-width: 430px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .form-card, .content-panel, .download-card, .service-card, .offer-tile { padding: 22px; }
  .offer-dialog-grid { border-radius: 0; }
}

/* ============================================================
   17. Editor styles helper
   ============================================================ */
.alignwide { margin-left: -24px; margin-right: -24px; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
.aligncenter { margin: 0 auto; }

.maintenance-login {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--mist);
  text-align: left;
}
.maintenance-login label {
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.maintenance-login-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.maintenance-login input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font: inherit;
}
.maintenance-login button {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--ink);
  font-weight: 850;
  padding: 0 18px;
  cursor: pointer;
}
.maintenance-login button:hover,
.maintenance-login button:focus-visible {
  background: var(--ink);
  color: #fff;
}
.maintenance-login-message {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}