/* =============================================================
   site-chrome.css — Novemcore shared header + footer
   Single source of truth. Injected by site-chrome.js on every page.
   Uses sc- prefixed classes so it never collides with legacy
   per-page .nc-header / .ftr rules. Relies on design-system tokens
   (colors_and_type.css) already loaded by each page.
   ============================================================= */

:root {
  --sc-maxw: 1280px;
}

/* ---------- reset bits for injected chrome ---------- */
.sc-header *, .sc-footer *, .sc-mob * { box-sizing: border-box; }

/* =========================================================
   HEADER
   ========================================================= */
.sc-header {
  position: sticky; top: 0; z-index: 80;
  background: var(--nc-paper);
  border-bottom: 1px solid var(--border-1);
}
.sc-header__inner {
  max-width: var(--sc-maxw); margin: 0 auto;
  padding: 16px 32px;
  display: flex; align-items: center; gap: 40px;
}
.sc-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.sc-brand img { height: 26px; display: block; }

.sc-nav { display: flex; gap: 28px; flex: 1; justify-content: center; align-items: center; }
.sc-navlink {
  font: 500 14px var(--font-body); color: var(--nc-ink);
  text-decoration: none; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; transition: color 140ms var(--ease-standard);
}
.sc-navlink:hover { color: var(--pulse-copper); }
.sc-navlink.is-current { color: var(--pulse-copper); }
.sc-caret { display: inline-flex; transition: transform 240ms var(--ease-emphasized); }
.sc-caret svg { width: 13px; height: 13px; opacity: 0.45; }

.sc-navitem { position: relative; display: flex; align-items: center; }
.sc-navitem.has-sub:hover .sc-caret,
.sc-navitem.has-sub:focus-within .sc-caret { transform: rotate(180deg); }
.sc-navitem.has-sub:hover .sc-caret svg,
.sc-navitem.has-sub:focus-within .sc-caret svg { opacity: 0.85; }

/* dropdown */
.sc-dropdown {
  position: absolute; top: 100%; left: 50%;
  padding-top: 14px;
  transform: translateX(-50%) translateY(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms var(--ease-standard),
              transform 240ms var(--ease-emphasized),
              visibility 0s linear 200ms;
  z-index: 80;
}
.sc-navitem.has-sub:hover .sc-dropdown,
.sc-navitem.has-sub:focus-within .sc-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 200ms var(--ease-standard),
              transform 240ms var(--ease-emphasized),
              visibility 0s linear 0s;
}
.sc-dropdown__inner {
  background: rgba(250,246,239,0.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  box-shadow: 0 18px 48px -20px rgba(11,15,23,0.30);
  padding: 8px; min-width: 220px;
  display: flex; flex-direction: column; gap: 1px;
}
.sc-dropdown__link {
  font: 500 14px var(--font-body); color: var(--nc-ink);
  text-decoration: none; padding: 10px 14px; border-radius: 8px;
  white-space: nowrap; transition: background 130ms, color 130ms;
}
.sc-dropdown__link:hover { background: rgba(11,15,23,0.05); color: var(--pulse-copper); }
.sc-dropdown__link.is-current { color: var(--pulse-copper); }

/* right cluster */
.sc-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.sc-lang { display: inline-flex; align-items: center; border-radius: 999px; background: rgba(11,15,23,0.05); }
.sc-langBtn {
  border: 0; background: transparent; padding: 5px 11px;
  font: 500 11px var(--font-mono); letter-spacing: 0.08em;
  color: var(--fg-2); border-radius: 999px; cursor: pointer;
}
.sc-langBtn.is-on { background: #FFF; color: var(--nc-ink); box-shadow: 0 1px 0 rgba(11,15,23,0.04), 0 4px 12px -6px rgba(11,15,23,0.10); }

/* primary scan CTA */
.sc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px var(--font-body); color: #FFFFFF; text-decoration: none;
  padding: 11px 18px; border-radius: 10px;
  background: var(--pulse-cta-gradient);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 36px -14px rgba(184,87,48,0.55);
  transition: filter 140ms, transform 120ms;
  white-space: nowrap;
}
.sc-cta:hover { filter: brightness(1.05); }
.sc-cta:active { transform: translateY(1px); }
.sc-cta .sc-arrow { transition: transform 140ms var(--ease-standard); }
.sc-cta:hover .sc-arrow { transform: translateX(3px); }

/* hamburger */
.sc-burger {
  display: none; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: transparent; color: var(--nc-ink); cursor: pointer;
}
.sc-burger:hover { background: rgba(11,15,23,0.05); }

/* =========================================================
   MOBILE MENU DRAWER
   ========================================================= */
.sc-mob { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.sc-mob.is-open { visibility: visible; }
.sc-mob__backdrop {
  position: fixed; inset: 0; background: rgba(11,15,23,0.48);
  opacity: 0; transition: opacity 320ms var(--ease-standard);
}
.sc-mob.is-open .sc-mob__backdrop { opacity: 1; }
.sc-mob__panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--nc-paper);
  border-left: 1px solid var(--border-1);
  display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform 360ms var(--ease-emphasized);
  box-shadow: -24px 0 60px -30px rgba(11,15,23,0.45);
}
.sc-mob.is-open .sc-mob__panel { transform: none; }
.sc-mob__head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-1);
  background: rgba(250,246,239,0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sc-mob__head img { height: 22px; display: block; }
.sc-mob__headRight { display: inline-flex; align-items: center; gap: 12px; }
.sc-lang--mob { display: inline-flex; }
.sc-mob__close {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--nc-ink); cursor: pointer;
}
.sc-mob__close:hover { background: rgba(11,15,23,0.05); }
.sc-mob__links { flex: 1; overflow-y: auto; padding: 12px 14px 0; }
.sc-mob__item { border-bottom: 1px solid var(--border-1); }
.sc-mob__link {
  display: block; padding: 14px 6px;
  font: 500 17px var(--font-body); color: var(--nc-ink); text-decoration: none;
}
.sc-mob__link.is-current { color: var(--pulse-copper); }
.sc-mob__sub { padding: 0 6px 12px; display: flex; flex-direction: column; gap: 2px; }
.sc-mob__sublink {
  display: block; padding: 9px 12px; border-radius: 8px;
  font: 500 15px var(--font-body); color: var(--fg-2); text-decoration: none;
}
.sc-mob__sublink:hover { background: rgba(11,15,23,0.04); color: var(--nc-ink); }
.sc-mob__sublink.is-current { color: var(--pulse-copper); }
.sc-mob__cta { padding: 18px 20px 22px; border-top: 1px solid var(--border-1); }
.sc-mob__cta .sc-cta { width: 100%; justify-content: center; font-size: 15px; padding: 14px 22px; }

/* =========================================================
   FOOTER
   ========================================================= */
.sc-footer { background: var(--nc-void); color: var(--d-fg-1); }
.sc-footer__inner {
  max-width: var(--sc-maxw); margin: 0 auto;
  padding: 64px 32px 36px;
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) repeat(5, minmax(0, 1fr));
  gap: 28px 32px;
}
.sc-footer__brand img { height: 24px; display: block; filter: brightness(0) invert(1); }
.sc-footer__principle {
  font: 500 13px/1.7 var(--font-mono); letter-spacing: 0.03em;
  color: var(--pulse-amber); margin: 18px 0 22px; max-width: 280px;
}
.sc-footer__lang { display: flex; align-items: center; gap: 10px; }
.sc-flang {
  border: 0; background: transparent; cursor: pointer; padding: 0 0 2px;
  font: 500 13px var(--font-body); color: rgba(247,243,234,0.55);
  transition: color 140ms var(--ease-standard);
}
.sc-flang:hover { color: #F7F3EA; }
.sc-flang.is-on { color: #F7F3EA; border-bottom: 1px solid #F7F3EA; }
.sc-footer__lang span { color: rgba(247,243,234,0.4); }

.sc-footer__col .sc-footer__colTitle {
  font: 500 10px var(--font-mono); letter-spacing: 0.16em;
  color: rgba(247,243,234,0.55); margin-bottom: 16px; text-transform: uppercase;
}
.sc-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-footer__col a { color: var(--d-fg-2); text-decoration: none; font-size: 14px; line-height: 1.4; }
.sc-footer__col a:hover { color: #F7F3EA; }

.sc-footer__meta {
  max-width: var(--sc-maxw); margin: 0 auto;
  padding: 18px 32px;
  border-top: 1px solid rgba(255,245,234,0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 500 10px var(--font-mono); letter-spacing: 0.12em;
  color: rgba(247,243,234,0.5); text-transform: uppercase;
}
.sc-footer__status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  background: var(--nc-progress-green); margin-left: 8px;
  vertical-align: middle; box-shadow: 0 0 0 3px rgba(112,201,119,0.18);
}

/* =========================================================
   RESPONSIVE — uniform across every page
   ========================================================= */
@media (max-width: 1024px) {
  .sc-nav { display: none; }
  .sc-header .sc-lang { display: none; }
  .sc-header__inner { gap: 0; justify-content: space-between; padding: 14px 24px; }
  .sc-burger { display: inline-flex; }
  /* Brand spans the top row; the five link columns wrap two-up below it */
  .sc-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px 40px; padding: 48px 28px 28px; }
  .sc-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .sc-header__inner { padding: 13px 20px; }
  .sc-brand img { height: 22px; }
  .sc-right { gap: 10px; }
  .sc-cta { font-size: 13px; padding: 10px 15px; }
  .sc-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 24px; padding: 40px 20px 24px; }
  .sc-footer__brand { grid-column: 1 / -1; } /* full-width brand on narrow screens */
  .sc-footer__meta { padding: 14px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 460px) {
  .sc-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-mob__panel, .sc-mob__backdrop, .sc-dropdown, .sc-cta .sc-arrow { transition: none !important; }
}

/* =========================================================================
   UNIFIED NEWSLETTER CTA  (compact inline signup)
   Single source of truth for the resource-page newsletter module so every
   page ends on the same calm signup block instead of a repeated scan band.
   ========================================================================= */
.nlinline {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px; align-items: center; padding: 30px 34px;
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.nlinline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pulse-cta-gradient); }
.nlinline__copy { display: flex; flex-direction: column; gap: 8px; }
.nlinline__title { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.16; color: var(--nc-ink); text-wrap: balance; }
.nlinline__text { font-size: 14.5px; line-height: 1.56; color: var(--fg-2); max-width: 46ch; text-wrap: pretty; margin: 0; }
.nlinline__form { display: flex; flex-direction: column; gap: 9px; }
.nlinline__row { display: flex; gap: 10px; flex-wrap: wrap; }
.nlinline__input { flex: 1; min-width: 180px; height: 46px; border-radius: var(--r-md); border: 1px solid var(--border-1); background: #fff; padding: 0 15px; font: 400 15px var(--font-body); color: var(--nc-ink); }
.nlinline__input::placeholder { color: var(--fg-3); }
.nlinline__input:focus { outline: 2px solid var(--nc-cobalt); outline-offset: 1px; }
.nlinline__note { font: 500 11px var(--font-mono); letter-spacing: 0.02em; color: var(--fg-3); margin: 0; }
.nlinline__note a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 820px) { .nlinline { grid-template-columns: 1fr; gap: 22px; padding: 28px; } }

/* =========================================================================
   COMPACT PAGE CTA  (.minicta)
   A small, contained final CTA for pages that still benefit from one
   (Leistungen, Unternehmen) — replaces the heavy full-bleed dark scan band
   so the same brown panel does not repeat at the foot of every page.
   ========================================================================= */
.minicta {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 26px 44px; align-items: center; padding: 34px 38px;
  background: var(--nc-offwhite); border: 1px solid var(--border-1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden;
}
.minicta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pulse-cta-gradient); }
.minicta__copy { display: flex; flex-direction: column; gap: 9px; }
.minicta__title { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.12; color: var(--nc-ink); text-wrap: balance; margin: 0; }
.minicta__body { font-size: 15px; line-height: 1.56; color: var(--fg-2); max-width: 56ch; margin: 0; text-wrap: pretty; }
.minicta__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .minicta { grid-template-columns: 1fr; gap: 22px; padding: 28px; } }

/* Internal Claude Design handoff markers must never be visible in the website. */
.hnote,
.hnotewrap,
.optflag,
[data-screen-label="Handoff note"] {
  display: none !important;
}