/* ============================================================
   Herodeals – Site styles (site.css)
   Page-level layout on top of the design system.
   Requires: tokens.css, herodeals.css
   Only design tokens – no new colors.
   ============================================================ */

/* ── BASE ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* No CSS smooth scrolling: it breaks ScrollTrigger.refresh(). Anchor links scroll smoothly via main.js. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font-size: var(--text-base); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--color-accent); color: var(--color-bg); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--sp-4); top: var(--sp-4); z-index: var(--z-overlay);
  transform: translateY(-200%); transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

section[id], main[id] { scroll-margin-top: var(--sp-16); }
main:focus { outline: none; }

/* ── HEADER (fixed over the hero) ───────────────────────── */
.site-header.hd-header { position: fixed; top: 0; left: 0; right: 0; }
.hd-header__link.is-active { color: var(--color-text); font-weight: 600; background: var(--color-glass-2); }

/* Six nav links (the design system plans for up to five) no longer fit next to logo and
   Kontakt below ~880px: switch to the menu button there (same rules as its 760px variant). */
@media (max-width: 880px) {
  .hd-header { --hd-header-px: var(--sp-4); --hd-logo-h: 48px; grid-template-columns: auto 1fr; }
  .hd-header__menu { display: inline-flex; }
  .hd-header__nav {
    display: none; position: absolute; left: var(--sp-4); right: var(--sp-4); top: calc(var(--hd-header-h) - var(--sp-1));
    flex-direction: column; align-items: stretch; border-radius: var(--radius-xl); padding: var(--sp-2);
    background: color-mix(in srgb, var(--color-surface-1) 92%, transparent);
  }
  .hd-header.is-open .hd-header__nav { display: flex; }
  .hd-header__link { height: 44px; }
}

/* ── HERO ───────────────────────────────────────────────── */
/* The gold arc sits right under the header, so pill and headline always start below
   its line (the design-system default of 200px / 150px cut through the pill). */
.hd-hero { --hd-arc-y: 112px; }
@media (max-width: 760px) { .hd-hero { --hd-arc-y: 92px; } }
.hero-trust { position: relative; display: flex; justify-content: center; margin-top: var(--sp-16); padding: 0 var(--sp-6); }
.hd-motion-pending .hero-trust { opacity: 0; }
.hd-hero--split .hd-hero__media .hd-scene { position: absolute; inset: 0; }

/* The scene fades out at its edges, so parcels fanning out on scroll never get cut hard */
.hd-hero--split .hd-hero__media {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, transparent 100%);
}

/* TrustBar: a pill only where it fits on one line. Below that it becomes a hairline grid
   (StatGrid look): one row of four on tablets, 2×2 with a diamond on phones. */
@media (max-width: 1099px) {
  .hero-trust { margin-top: var(--sp-10); }
  .hd-hero .hd-trust {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%; padding: 0; gap: 0; text-align: left; border-radius: var(--radius-xl);
  }
  .hd-hero .hd-trust li {
    display: flex; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-5); white-space: normal;
    font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted);
  }
  .hd-hero .hd-trust li + li { border-left: 1px solid var(--color-border); }
  .hd-hero .hd-trust li::before,
  .hd-hero .hd-trust li + li::before {
    content: ""; display: block; width: 6px; height: 6px; margin: 0 0 var(--sp-2); border-radius: 50%;
    background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle);
  }
  .hd-hero .hd-trust strong { font: 500 18px/1.2 var(--font-sans); letter-spacing: -0.3px; color: var(--color-text); }
}
@media (max-width: 760px) {
  .hero-trust { margin-top: var(--sp-8); }
  .hd-hero .hd-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-hero .hd-trust li + li { border-left: 0; }
  .hd-hero .hd-trust li:nth-child(odd) { border-right: 1px solid var(--color-border); }
  .hd-hero .hd-trust li:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  .hd-hero .hd-trust::after {   /* diamond where the hairlines cross */
    content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--color-bg); border: 1px solid var(--color-glass-sheen);
  }
  .hd-hero--split { --hd-hero-pad-bottom: var(--sp-16); }
}

/* Performance: fewer live backdrop blurs over the animated hero.
   Pill and TrustBar sit on a smooth gradient, where a blur is invisible but costs a
   re-sample every frame; the nav pill must not blur again inside the frosted header. */
.hd-hero .hd-pill, .hd-hero .hd-trust { backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.hd-header--glass { backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.site-header.hd-header--glass .hd-header__nav { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 3D canvases fade in once their shaders are compiled instead of popping in */
.hd-scene__stage { opacity: 0; transition: opacity .9s ease; }
.hd-scene.is-live .hd-scene__stage { opacity: 1; }
.hd-pill { max-width: 100%; }
.hd-pill__tag { flex: none; white-space: nowrap; }
.hd-pill__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-scroll {
  position: absolute; left: 50%; bottom: var(--sp-8); transform: translateX(-50%);
  width: 22px; height: 34px; border: 1px solid var(--color-glass-sheen); border-radius: var(--radius-full);
}
.hero-scroll::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: var(--radius-full); background: var(--color-accent);
  animation: hero-scroll 1.8s ease-in-out infinite;
}
@keyframes hero-scroll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll::after { animation: none; } }
@media (max-width: 900px) { .hero-scroll { display: none; } }

/* ── SECTIONS ───────────────────────────────────────────── */
.section--surface { background: var(--color-surface-1); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section-head-gap { margin-bottom: var(--sp-12); }
.prose { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); max-width: 520px; }
.prose p { font-size: var(--text-base); line-height: 1.7; color: var(--color-muted); }
.prose strong { color: var(--color-text); font-weight: 600; }
.about__cta { margin-top: var(--sp-8); }

/* ── KANÄLE: shared rows for both channel cards ──────────── */
/* Subgrid lines up tag, title, text, every list item and the CTA across Amazon and eBay,
   even when one text wraps to an extra line. Without subgrid the cards stay flex columns. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .hd-grid-2 > .hd-channel { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: var(--sp-5); }
    .hd-grid-2 > .hd-channel .hd-channel__list { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--sp-3); }
    .hd-grid-2 > .hd-channel .hd-channel__tag,
    .hd-grid-2 > .hd-channel .hd-channel__cta { justify-self: start; }
    .hd-grid-2 > .hd-channel .hd-channel__cta { align-self: end; }
  }
}

/* ── SORTIMENT (category stage) ─────────────────────────── */
.range { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-12); align-items: center; }
.range__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.range__item {
  position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-5); row-gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-6); text-align: left; cursor: pointer; overflow: hidden;
  font: inherit; color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-xl);
  transition: background-color .25s ease, border-color .25s ease;
}
.range__item:hover { background: var(--color-glass); }
.range__item[aria-selected="true"] { background: var(--color-glass); border-color: var(--color-glass-edge); box-shadow: inset 0 1px 0 var(--color-glass-sheen); }
.range__index { grid-row: span 2; font: 500 12px/1.9 var(--font-sans); letter-spacing: 1px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.range__item[aria-selected="true"] .range__index { color: var(--color-accent); }
.range__title { font: 500 20px/1.3 var(--font-sans); letter-spacing: -0.3px; }
.range__text { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); }
.range__progress {
  position: absolute; left: var(--sp-6); right: var(--sp-6); bottom: 0; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left center; opacity: 0;
}
.range__item[aria-selected="true"] .range__progress { opacity: 1; }
.range__stage {
  position: relative; height: 520px; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--color-border);
  background:
    radial-gradient(ellipse 60% 50% at 50% 62%, var(--color-accent-subtle), transparent 70%),
    var(--color-bg);
}
.range__stage .hd-scene { position: absolute; inset: 0; }
.range__caption {
  position: absolute; left: var(--sp-6); bottom: var(--sp-5); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 28px; padding: 0 var(--sp-3);
  border: 1px solid var(--color-glass-edge); border-radius: var(--radius-full); background: var(--color-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 500 12px/1 var(--font-sans); color: var(--color-text);
}
.range__caption::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--color-accent); }
@media (max-width: 900px) {
  .range { grid-template-columns: 1fr; gap: var(--sp-6); }
  .range__stage { order: -1; height: 320px; }
}

/* ── B2B (supply-chain scene + steps) ───────────────────── */
.chain {
  position: relative; height: 420px; margin-bottom: var(--sp-12);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden;
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--color-glass-2) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.chain .hd-scene { position: absolute; inset: 0; }
/* ── SCENE LABELS (chain, automation) ───────────────────── */
/* Default (no JS / no WebGL): labels as a static row. Once a scene runs (.is-labelled on
   the host), scenes.js projects each label onto its 3D anchor. */
.scene-labels {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-6);
}
.scene-label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 26px; padding: 0 var(--sp-3); white-space: nowrap;
  border: 1px solid var(--color-glass-edge); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 12px/1 var(--font-sans); letter-spacing: .3px; color: var(--color-text);
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.scene-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.scene-label b { font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.scene-label--amazon::before { background: var(--color-amazon); }
.scene-label--ebay::before { background: var(--color-ebay); }
.scene-label--hub, .scene-label.is-active { border-color: var(--color-accent-border); background: color-mix(in srgb, var(--color-bg) 55%, var(--color-accent-subtle)); }
.scene-label.is-active b { color: var(--color-accent); }
.is-labelled > .scene-labels { display: block; padding: 0; }
.is-labelled > .scene-labels .scene-label { position: absolute; left: 0; top: 0; animation: scene-label-in .4s ease both; }
@keyframes scene-label-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .auto__stage .scene-label__text { display: none; } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.steps__item { padding: var(--sp-8) var(--sp-8) 0 0; }
.steps__item + .steps__item { padding-left: var(--sp-8); border-left: 1px solid var(--color-border); }
.steps__num { display: block; font: 500 12px/1 var(--font-sans); letter-spacing: 1px; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.steps__title { margin-top: var(--sp-4); font: 500 20px/1.3 var(--font-sans); letter-spacing: -0.3px; }
.steps__text { margin-top: var(--sp-2); font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); }
.b2b__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-12); }
@media (max-width: 760px) {
  .chain { height: 300px; }
  .steps { grid-template-columns: 1fr; }
  .steps__item, .steps__item + .steps__item { padding: var(--sp-6) 0; border-left: 0; }
  .steps__item + .steps__item { border-top: 1px solid var(--color-border); }
}

/* ── TECHNIK & AUTOMATISIERUNG ──────────────────────────── */
.auto__stage {
  position: relative; height: 460px; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--color-border);
  background:
    radial-gradient(ellipse 55% 60% at 50% 70%, var(--color-accent-subtle), transparent 70%),
    var(--color-bg);
}
.auto__stage .hd-scene { position: absolute; inset: 0; }

.pipeline { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.pipeline__step { display: flex; }
.pipeline__item {
  position: relative; width: 100%; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-6); text-align: left; cursor: pointer; overflow: hidden;
  font: inherit; color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-xl);
  transition: background-color .25s ease, border-color .25s ease;
}
.pipeline__item:hover { background: var(--color-glass); }
.pipeline__item[aria-current="step"] { background: var(--color-glass); border-color: var(--color-glass-edge); box-shadow: inset 0 1px 0 var(--color-glass-sheen); }
.pipeline__progress {
  position: absolute; left: var(--sp-5); right: var(--sp-5); top: 0; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left center; opacity: 0;
}
.pipeline__item[aria-current="step"] .pipeline__progress { opacity: 1; }
.pipeline__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.pipeline__num { font: 500 12px/1 var(--font-sans); letter-spacing: 1px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pipeline__item[aria-current="step"] .pipeline__num { color: var(--color-accent); }
.pipeline__status {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--radius-full); border: 1px solid var(--color-glass-edge);
  font: 600 10.4px/1 var(--font-sans); letter-spacing: .5px; text-transform: uppercase; color: var(--color-muted);
}
.pipeline__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 var(--color-success-border); }
.pipeline__item[aria-current="step"] .pipeline__status { color: var(--color-text); border-color: var(--color-success-border); background: var(--color-success-subtle); }
.pipeline__item[aria-current="step"] .pipeline__status::before { animation: status-pulse 1.6s ease-out infinite; }
@keyframes status-pulse { 0% { box-shadow: 0 0 0 0 var(--color-success-border); } 100% { box-shadow: 0 0 0 6px transparent; } }
.pipeline__title { margin-top: var(--sp-2); font: 500 18px/1.3 var(--font-sans); letter-spacing: -0.3px; }
.pipeline__text { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); }

.benefits { margin-top: var(--sp-16); }
.benefits__head { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.benefits__title { font: 500 28px/1.15 var(--font-sans); letter-spacing: -0.6px; }
.benefits__title em { font-style: italic; color: var(--color-accent); }
.benefits__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.benefits__item { padding: var(--sp-8) var(--sp-6) 0 0; }
.benefits__item + .benefits__item { padding-left: var(--sp-6); border-left: 1px solid var(--color-border); }
.benefits__name { margin: var(--sp-6) 0 0; font: 500 18px/1.3 var(--font-sans); letter-spacing: -0.3px; }
.benefits__text { margin-top: var(--sp-2); font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) { .pipeline__item[aria-current="step"] .pipeline__status::before { animation: none; } }
@media (max-width: 1000px) {
  .pipeline, .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .benefits__item:nth-child(n+3) { margin-top: var(--sp-8); border-top: 1px solid var(--color-border); }
}
@media (max-width: 760px) {
  .auto__stage { height: 340px; }
  .benefits__grid { grid-template-columns: 1fr; }
  .benefits__item, .benefits__item + .benefits__item { padding: var(--sp-6) 0; border-left: 0; margin-top: 0; }
  .benefits__item + .benefits__item { border-top: 1px solid var(--color-border); }
}
@media (max-width: 520px) { .pipeline { grid-template-columns: 1fr; } }

/* ── FAQ (native details/summary, no JS) ────────────────── */
.section--divided { border-top: 1px solid var(--color-border); }
.faq { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-16); align-items: start; }
.faq__head { position: sticky; top: calc(var(--nav-height) + var(--sp-10)); }
.faq__cta { margin-top: var(--sp-8); }
.faq__list { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-6) 0; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.faq__q { margin: 0; font: 500 18px/1.4 var(--font-sans); letter-spacing: -0.3px; color: var(--color-text); transition: color .15s ease; }
.faq__item summary:hover .faq__q { color: var(--color-accent-h); }
.faq__icon {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full);
  border: 1px solid var(--color-glass-edge); background: var(--color-glass);
  transition: background-color .2s ease, border-color .2s ease;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px;
  background: var(--color-accent); transition: transform .25s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { border-color: var(--color-accent-border); background: var(--color-accent-subtle); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a p { margin: 0; padding: 0 var(--sp-12) var(--sp-6) 0; max-width: 62ch; font-size: 15px; line-height: 1.75; color: var(--color-muted); }
@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; gap: var(--sp-10); }
  .faq__head { position: static; }
}
@media (max-width: 520px) { .faq__a p { padding-right: 0; } .faq__q { font-size: 16px; } }

/* ── CONTACT ────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-16); align-items: start; }
.contact__list { list-style: none; margin: var(--sp-10) 0 0; padding: 0; border-top: 1px solid var(--color-border); }
.contact__row { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-4); align-items: baseline; padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-border); }
.contact__row::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg) translateY(-2px); background: var(--color-accent); }
.contact__label { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.contact__row a { font-size: var(--text-base); font-weight: 500; color: var(--color-text); text-decoration: none; transition: color .15s ease; }
.contact__row a:hover { color: var(--color-accent); }

.form {
  display: grid; gap: var(--sp-4); padding: var(--sp-8);
  border: 1px solid var(--color-glass-edge); border-radius: var(--radius-xl);
  background: var(--color-surface-1); box-shadow: inset 0 1px 0 var(--color-glass-sheen);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form__field { display: grid; gap: var(--sp-2); }
.form__label { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.form__label span { font-weight: 400; }
.form__control {
  width: 100%; height: 48px; padding: 0 var(--sp-4);
  font: 400 var(--text-sm)/1.4 var(--font-sans); color: var(--color-text);
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color .2s ease, background-color .2s ease;
  -webkit-appearance: none; appearance: none;
}
.form__control::placeholder { color: var(--color-muted); opacity: .8; }
.form__control:hover { border-color: var(--color-glass-edge); }
.form__control:focus { outline: none; border-color: var(--color-accent-border); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
textarea.form__control { height: auto; min-height: 140px; padding: var(--sp-3) var(--sp-4); resize: vertical; }
select.form__control {
  padding-right: var(--sp-10); cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select.form__control:invalid { color: var(--color-muted); }
select.form__control option { color: var(--color-text); background: var(--color-surface-2); }
.form__control[aria-invalid="true"] { border-color: var(--color-error-border); }
.form .hd-btn { width: 100%; }
.form__hint { font-size: var(--text-xs); line-height: 1.6; color: var(--color-muted); }
.form__hint a { color: var(--color-text); }
.form-message { display: none; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; }
.form-message.success { display: block; color: var(--color-success); background: var(--color-success-subtle); border: 1px solid var(--color-success-border); }
.form-message.error { display: block; color: var(--color-error); background: var(--color-error-subtle); border: 1px solid var(--color-error-border); }
.hp-field { display: none; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: var(--sp-10); } }
@media (max-width: 520px) { .form { padding: var(--sp-6); } .form__row { grid-template-columns: 1fr; } }

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--color-border); padding: var(--sp-12) 0; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.site-footer__logo img { height: 48px; width: auto; }
.site-footer__links { list-style: none; display: flex; gap: var(--sp-1); margin: 0; padding: 0; }
.site-footer__links a { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--sp-3); border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.site-footer__links a:hover { color: var(--color-text); background: var(--color-glass); }
.site-footer__copy { font-size: var(--text-xs); color: var(--color-muted); }

/* ── COOKIE NOTICE ──────────────────────────────────────── */
#cookie-banner {
  position: fixed; left: 50%; bottom: var(--sp-5); z-index: var(--z-overlay);
  width: min(720px, calc(100% - var(--sp-8))); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--color-glass-edge); border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-surface-1) 88%, transparent);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--color-glass-sheen);
  transition: opacity .3s ease, transform .3s ease;
}
#cookie-banner.is-hidden { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; visibility: hidden; }
.cookie-text { font-size: var(--text-xs); line-height: 1.6; color: var(--color-muted); }
.cookie-text a { color: var(--color-text); }
@media (max-width: 640px) { #cookie-banner { flex-direction: column; align-items: stretch; gap: var(--sp-4); } }

/* ── SIMPLE HERO (404) ──────────────────────────────────── */
.hd-hero--page { --hd-hero-min-h: 100vh; display: flex; flex-direction: column; justify-content: center; }
.hd-hero--page .hd-hero__inner { width: 100%; }