/* ==========================================================================
   Color schemes, grid visuals and the framework ring highlight.
   Layout, type and spacing stay exactly as in main.css.
   ========================================================================== */

/* Extra tokens */
:root {
  --c-hatch: transparent;
  --c-tip-bg: rgba(248, 246, 242, 0.78);
  --c-tip-border: rgba(22, 18, 45, 0.14);
  --c-cta-bg: rgba(64, 46, 195, 0.1);
  --logo-filter: invert(1) grayscale(1);
  /* grid visual */
  --c-grid-dot: #38344B;
  --c-grid-accent: #402EC3;
  --grid-presence: 1.5;
  color-scheme: light;
}

/* Hard-coded colors in main.css and the inline SVGs, routed through tokens */
.topnav__cta { background: var(--c-cta-bg); }
.tip { background: var(--c-tip-bg); border-color: var(--c-tip-border); }
.logo-band__item img { filter: var(--logo-filter); }
.chart [stroke="#989486"], .orbit__lines [stroke="#989486"] { stroke: var(--c-text); }
.chart [fill="#989486"] { fill: var(--c-text); }
.chart [fill="#D0CEC8"] { fill: var(--c-text-soft); }
.chart [stroke="#FCFAF3"] { stroke: var(--c-text-strong); }
.chart [fill="#FCFAF3"] { fill: var(--c-text-strong); }
.orbit__lines [stroke="rgba(152,148,134,0.35)"] { stroke: var(--c-line); }

/* Hero: the grid replaces the hatch and the placeholder */
.hero-band { background-image: none; overflow: hidden; }
.hero-band__placeholder { display: none; }
.grid-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-band > :not(.grid-canvas) { position: relative; z-index: 1; }

/* "Ansatz": the same visual across the whole section box, pinned while the section scrolls past */
#ansatz .main { position: relative; }
#ansatz .main > :not(.grid-track) { position: relative; z-index: 1; }
.grid-track {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.grid-track .grid-canvas {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  max-height: 100%;
}

/* Framework ring: a section of the ring lights up toward the cursor */
.orbit__glow { opacity: 0; transition: opacity 0.35s ease; }
.orbit__glow.is-on { opacity: 1; }
.orbit__glow-soft { stroke: var(--c-accent); stroke-opacity: 0.18; }
.orbit__glow-line { stroke: var(--c-accent); }
/* dimension circles light up with the lit part of the ring (--glow 0..1 set by script):
   the same look as the ring, a 2px accent contour with a faint accent halo on both sides */
.node__icon { position: relative; }
.node__icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 18%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--c-accent) 18%, transparent);
  opacity: var(--glow, 0);
  pointer-events: none;
}
/* hovered or selected circle: filled in the accent colour, like the lit ring */
.node.is-active .node__icon { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }

/* labels sit directly on the grid (the grid dims behind text), no solid box */
.node__label { background: transparent; }

/* Hero: always two thirds of the screen height (grows only if the text needs more) */
.hero-band {
  height: calc(100vh * 2 / 3);
  height: calc(100svh * 2 / 3);
  min-height: min-content;
}
@media (max-width: 760px) {
  .hero-band { min-height: min-content; }
}

/* Contact form: centred in the content column, labels above squared fields */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  max-width: 760px;
  margin: 24px auto 0;
}
.field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-text-soft);
}
.field__req { color: var(--c-accent); }
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--c-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--c-text-strong);
  font: 17px/1.4 var(--font);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.contact-form textarea { min-height: 180px; resize: vertical; }
.contact-form input:hover,
.contact-form textarea:hover { border-color: var(--c-text); }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: none; border-color: var(--c-text-strong); background: var(--c-bg-raised); }
.contact-form [aria-invalid="true"] { border-color: var(--c-accent); }
.contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.contact-form__note { margin: 0; font-size: 13px; color: var(--c-text); }
.contact-form__submit {
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--c-text-strong);
  border-radius: 0;
  background: var(--c-text-strong);
  color: var(--c-bg);
  font: 700 14px var(--font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.contact-form__submit:hover { background: transparent; color: var(--c-text-strong); }
.contact-form__submit:focus-visible { outline: 2px solid var(--c-text-strong); outline-offset: 3px; }
.contact-form__status { margin: 0; font-size: 14px; color: var(--c-text-soft); text-align: center; }
.contact-form__status:empty { display: none; }
@media (max-width: 760px) {
  .contact-form { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 8px; }
  .contact-form__submit { width: 100%; }
}

/* Consent checkbox under the form */
.field--check { flex-direction: row; align-items: flex-start; gap: 12px; }
.field--check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--c-accent); }
.field--check label { font-size: 13px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-text-soft); }
.field--check a { color: var(--c-text-strong); }
.contact-form__submit:disabled { opacity: 0.6; cursor: progress; }

/* Footer links */
.site-footer__link { color: inherit; text-decoration: none; }
.site-footer__link:hover, .site-footer__link:focus-visible { color: var(--c-text-strong); text-decoration: underline; text-underline-offset: 3px; }

/* Legal pages (Impressum, Datenschutz) */
.legal { max-width: 760px; hyphens: auto; overflow-wrap: break-word; }
.legal h1 { margin: 0 0 40px; }
.legal h2 { margin: 40px 0 12px; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--c-text-strong); }
.legal h3 { margin: 24px 0 8px; font-size: 16px; font-weight: 700; color: var(--c-text-strong); }
.legal p, .legal li { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--c-text-soft); }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal a { color: var(--c-text-strong); }
.legal .placeholder { color: var(--c-accent); }
.legal__meta { margin-top: 48px; font-size: 13px; color: var(--c-text); }

/* Logo (inline SVG, follows the text colour of the scheme) */
.brand { display: inline-flex; align-items: center; color: var(--c-text-strong); }
.brand__logo { display: block; height: 28px; width: auto; }
.site-footer__brand { display: inline-flex; align-items: center; }
.site-footer__logo { display: block; height: 20px; width: auto; }

/* Case photos: motion-blurred (baked into the JPGs: horizontal blur, 15 % of the sharp photo, 104 % crop),
   lightly shaded, stronger at the top where the title sits */
.card {
  --shade-top: color-mix(in srgb, var(--c-overlay) 66%, transparent);
  --shade-bottom: color-mix(in srgb, var(--c-overlay) 33%, transparent);
}
.card--ecommerce { background-image: linear-gradient(var(--shade-top), var(--shade-bottom)), url("../img/cases/case-ecommerce-motion.webp?v=11"); }
.card--fashion { background-image: linear-gradient(var(--shade-top), var(--shade-bottom)), url("../img/cases/case-fashion-motion.webp?v=11"); }
.card--retail { background-image: linear-gradient(var(--shade-top), var(--shade-bottom)), url("../img/cases/case-retail-motion.webp?v=11"); }
.card--life-science { background-image: linear-gradient(var(--shade-top), var(--shade-bottom)), url("../img/cases/case-life-science-motion.webp?v=11"); }
.card__title, .card__text { color: var(--c-text-strong); }