/* LBMS Alloy 80A – shared styles (DE + EN). Most layout styling is inline in the HTML. */

html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

html, body { margin: 0; padding: 0; background: #FFFFFF; }
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  color: #111111;
  font-size: 18px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: #E30613; text-decoration: none; }
a:hover { color: #111111; text-decoration: underline; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid #E30613; outline-offset: 3px; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: #111111; color: #FFFFFF; padding: 12px 18px; font-size: 16px; font-weight: 700;
}
.skip-link:focus { top: 16px; color: #FFFFFF; }

/* Header: contact links + language switcher */
.hdr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 14px; color: #4A4A4A; }
.hdr-contact { display: contents; }
@media (max-width: 640px) {
  .hdr-meta { width: 100%; flex-wrap: nowrap; justify-content: space-between; align-items: end; }
  .hdr-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* FAQ: native <details>, +/– indicator */
.faq-sign::before { content: '+'; }
details[open] .faq-sign::before { content: '–'; }

/* Inputs */
.fc-1:focus { border-color: #E30613 !important; outline: none !important; }

/* "Hinzufügen" / "Add" button in the stock table */
.add-btn {
  min-width: 108px; padding: 9px 16px; border-radius: 2px;
  font: 700 13px 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0.04em;
  cursor: pointer; background: #E30613; color: #FFFFFF; border: 1px solid #E30613;
  transition: background 160ms ease, border-color 160ms ease;
}
.add-btn:disabled { cursor: not-allowed; background: #FFFFFF; color: #8A8A8A; border-color: #D0D0D0; }
.add-btn.is-added { background: #111111; color: #FFFFFF; border-color: #111111; }
@media (prefers-reduced-motion: reduce) { .add-btn { transition: none; } }

/* Sticky side tabs */
.sticky-tab {
  position: fixed; right: 0; top: 50%; z-index: 50;
  background: #E30613; color: #FFFFFF; padding: 22px 12px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  writing-mode: vertical-rl; border-radius: 2px 0 0 2px; text-decoration: none;
  transform: translate(8px, -50%); opacity: 0; pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.sticky-tab.is-on { transform: translate(0, -50%); opacity: 1; pointer-events: auto; }
.sticky-tab:hover { background: #111111; color: #FFFFFF; text-decoration: none; }
.sticky-cart { border: none; cursor: pointer; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
@media (prefers-reduced-motion: reduce) { .sticky-tab { transition: none; } }

/* Quote list (dialog, right-hand panel) */
dialog { color: inherit; }
.cart-dialog {
  margin: 0 0 0 auto; padding: 0; border: 0; background: #FFFFFF;
  width: 100%; max-width: 460px; height: 100%; max-height: none;
  box-sizing: border-box; overflow: hidden;
}
.cart-dialog[open] { display: block; }
.cart-dialog > div { height: 100%; }
.cart-dialog::backdrop { background: rgba(17, 17, 17, 0.55); }
.send-btn {
  display: block; text-align: center; padding: 16px 28px; border-radius: 2px;
  font: 700 15px 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0.04em; text-decoration: none;
  background: #E30613; color: #FFFFFF; cursor: pointer;
}
.send-btn[aria-disabled="true"] { background: #F1F1F1; color: #8A8A8A; cursor: not-allowed; }
.send-btn:hover { text-decoration: none; }
.send-btn[aria-disabled="true"]:hover { color: #8A8A8A; }

/* Imprint / privacy policy overlays */
.legal-dialog {
  width: calc(100% - 32px); max-width: 720px; box-sizing: border-box;
  margin: clamp(16px, 6vh, 80px) auto; padding: clamp(28px, 4vw, 56px);
  border: 1px solid #DDDDDD; background: #FFFFFF;
  max-height: calc(100vh - 2 * clamp(16px, 6vh, 80px)); overflow-y: auto;
}
.legal-dialog::backdrop { background: rgba(17, 17, 17, 0.65); }

/* Hover states (formerly the template runtime's style-hover attribute) */
.hv-1:hover { background:#111111 !important; color:#FFFFFF !important; text-decoration:none !important; }
.hv-2:hover { color:#E30613 !important; text-decoration:none !important; }
.hv-3:hover { color:#111111 !important; border-color:#111111 !important; }
.hv-4:hover { background:#111111 !important; }
.hv-5:hover { color:#FFFFFF !important; border-bottom-color:#FFFFFF !important; text-decoration:none !important; }
.hv-6:hover { text-decoration:none !important; }
.hv-7:hover { color:#E30613 !important; }
.hv-8:hover { border-color:#E30613 !important; color:#E30613 !important; }
@media (min-width: 641px) { .hero-title { max-width: none !important; } }