/* ==========================================================================
   NOC Grove · Header, Navigation, Footer, Breadcrumb, Hero
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--c-slate-200);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .site-header {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
  }
}

.site-header__in {
  width: min(100% - 2 * var(--s-gut), var(--w-wide));
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand img {
  width: 121px; height: 64px;   /* Quelle 242x129 -> exakt 2x, keine Interpolation */
  object-fit: contain;
  border: 1px solid var(--c-blue-100);
  border-radius: var(--r-1);
}
@media (max-width: 599px) { .brand img { width: 98px; height: 52px; } }
.brand__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.site-header__spacer { flex: 1 1 auto; }

/* --- Hauptnavigation ------------------------------------------------------ */

.nav { display: none; }
@media (min-width: 1100px) { .nav { display: block; } }

.nav__list { display: flex; align-items: center; gap: var(--s-1); margin: 0; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-3);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  border-radius: var(--r-2);
  white-space: nowrap;
}
.nav__link:hover { color: var(--c-blue); }
.nav__link[aria-current="page"], .nav__link.is-section {
  color: var(--c-blue);
  box-shadow: inset 0 -2px 0 var(--c-orange);
}
.nav__chev { width: .7em; height: .7em; transition: transform var(--d-fast) var(--e-out); }
.nav__item--has-menu:hover .nav__chev,
.nav__item--has-menu:focus-within .nav__chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 100%;
  width: 100%;
  background: var(--c-white);
  border-block: 1px solid var(--c-slate-200);
  box-shadow: var(--sh-2);
  padding-block: var(--s-6);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -8px, 0);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out),
              visibility var(--d-fast);
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu,
.nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }

.nav__menu-in {
  width: min(100% - 2 * var(--s-gut), var(--w-wide));
  margin-inline: auto;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(4, 1fr);
}
.nav__group-t {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-slate-400);
  margin-block-end: var(--s-3);
}
.nav__sub { display: grid; gap: var(--s-1); }
.nav__sub a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  text-decoration: none;
  color: var(--c-text);
  border-inline-start: 2px solid transparent;
}
.nav__sub a:hover { background: var(--c-blue-50); border-inline-start-color: var(--c-orange); }
.nav__sub b { display: block; font-weight: 700; font-size: var(--t-small); }
.nav__sub span { display: block; font-size: var(--t-label); color: var(--c-slate-600); line-height: 1.45; }

.site-header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
@media (max-width: 899px) { .site-header__actions .btn--primary, .tel span { display: none; } }
@media (max-width: 1099px) { .site-header__actions .btn--support { display: none; } }

/* --- Mobile-Toggle und Overlay ------------------------------------------- */

.navtoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  background: transparent;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-2);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (min-width: 1100px) { .navtoggle { display: none; } }
.navtoggle__bars { display: grid; gap: 4px; width: 18px; }
.navtoggle__bars i { display: block; height: 2px; background: currentColor; transition: transform var(--d-fast) var(--e-out), opacity var(--d-fast); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobilenav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: var(--c-white);
  overflow-y: auto;
  padding: var(--s-6) 0 var(--s-10);
  display: none;
}
.mobilenav.is-open { display: block; }
@media (min-width: 1100px) { .mobilenav { display: none !important; } }
.mobilenav__actions { display: grid; gap: var(--s-3); margin-block-end: var(--s-6); }
.mobilenav__group + .mobilenav__group { border-top: 1px solid var(--c-slate-200); }
.mobilenav__group > a,
.mobilenav__group > .mobilenav__head > a {
  display: block; padding: var(--s-4) 0; font-weight: 700; text-decoration: none; color: var(--c-text);
}
.mobilenav__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.mobilenav__more {
  background: transparent; border: 1px solid var(--c-slate-200); border-radius: var(--r-2);
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center; cursor: pointer; flex: none;
}
.mobilenav__more svg { width: 1rem; height: 1rem; transition: transform var(--d-fast) var(--e-out); }
.mobilenav__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobilenav__sub { display: grid; gap: var(--s-1); padding: 0 0 var(--s-4) var(--s-4); }
/* [hidden] muss die Author-Regel schlagen, sonst bleibt das Panel sichtbar,
   waehrend aria-expanded "false" meldet. */
.mobilenav__sub[hidden] { display: none; }
.mobilenav__sub a { display: block; padding: var(--s-2) 0; text-decoration: none; color: var(--c-slate-600); }
html:not(.js) .mobilenav__sub { display: grid !important; }
html:not(.js) .mobilenav__more { display: none; }
html:not(.js) .mobilenav { display: block; position: static; inset: auto; border-top: 1px solid var(--c-slate-200); }
html:not(.js) .navtoggle { display: none; }

/* --- Breadcrumb ----------------------------------------------------------- */

.crumbs { padding-block: var(--s-4); border-bottom: 1px solid var(--c-slate-100); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
             font-size: var(--t-label); font-family: var(--f-mono); letter-spacing: .06em; }
.crumbs li { display: flex; gap: var(--s-2); align-items: center; color: var(--c-slate-400); }
.crumbs li + li::before { content: '/'; color: var(--c-slate-200); }
.crumbs a { color: var(--c-slate-600); text-decoration: none; }
.crumbs a:hover { color: var(--c-blue); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--c-text); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(3rem, 1.5rem + 6vw, 7rem) clamp(3rem, 1.5rem + 5vw, 6rem);
  overflow: clip;
}
.hero__in {
  width: min(100% - 2 * var(--s-gut), var(--w-wide));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
  .hero--split .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.hero__lead { max-width: 42ch; font-size: var(--t-lead); color: var(--fg-muted); }
.hero__title { text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Angeschnittene Display-Zeile: Typografie als Bild (Regel 5) */
.hero__title .cut { color: var(--mark); }
.hero__title .out {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  paint-order: stroke fill;
}
.t-ink .hero__title .out, .t-blue .hero__title .out { -webkit-text-stroke-color: var(--c-slate-400); }

/* Kennwertleiste unter dem Hero */
.hero__meta {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hero__meta dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em;
                 text-transform: uppercase; color: var(--fg-label); }
.hero__meta dd { margin: var(--s-1) 0 0; font-weight: 700; font-size: var(--t-h4); }

/* --- Footer --------------------------------------------------------------- */

.site-footer { background: var(--c-ink); color: var(--c-text-inv); }
.site-footer a { color: #C4D2DC; text-decoration: none; }
.site-footer a:hover { color: var(--c-white); text-decoration: underline; }

.site-footer__top { padding-block: var(--s-9) var(--s-7); }
.site-footer__cols {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-footer__cols { grid-template-columns: 1.2fr 1fr 1.1fr 1fr; } }

.site-footer h2 {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-slate-400);
  margin-block-end: var(--s-4);
}
.site-footer ul { display: grid; gap: var(--s-2); font-size: var(--t-small); }
.site-footer address { font-style: normal; font-size: var(--t-small); line-height: 1.7; }
.site-footer__claim {
  font-size: var(--t-h3);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.015em;
  margin-block-end: var(--s-3);
}
.site-footer__bottom {
  border-top: 1px solid var(--c-ink-700);
  padding-block: var(--s-5);
  font-size: var(--t-label);
  color: var(--c-slate-400);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  align-items: center;
  justify-content: space-between;
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* --- CTA-Band (sitewide, vor dem Footer) ---------------------------------- */

.cta-band { position: relative; overflow: clip; }
.cta-band__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .cta-band__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-8); } }
.cta-band__box {
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, .05);
  padding: var(--s-6);
}
.cta-band__box dl { display: grid; gap: var(--s-4); }
.cta-band__box dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em;
                    text-transform: uppercase; color: var(--fg-label); }
.cta-band__box dd { margin: var(--s-1) 0 0; }
.cta-band__box dd a { font-size: var(--t-h4); font-weight: 700; }

/* --- 404 ------------------------------------------------------------------ */

.err__code {
  font-family: var(--f-mono);
  font-size: clamp(4rem, 2rem + 10vw, 9rem);
  line-height: 1;
  color: var(--c-orange);
}

.mobilenav__group--last {
  border-top: 1px solid var(--c-slate-200);
  padding-block: var(--s-4);
}

/* ==========================================================================
   Hero: Zeiger-Parallaxe
   --------------------------------------------------------------------------
   Die Ebenen des Hero bewegen sich unterschiedlich stark mit dem Mauszeiger.
   Zweck ist Tiefenwirkung, nicht Effekt: Das Schema liegt sichtbar vor dem
   Raster, die Ueberschrift bleibt fast ruhig, damit Lesbarkeit vorgeht.
   Amplituden sind klein (3 bis 14 px) und arbeiten ausschliesslich mit
   transform, deshalb entsteht kein Layout-Shift.

   --px und --py liefert assets/js/main.js im Bereich -1 bis 1.
   Ohne JavaScript, ohne feinen Zeiger (Touch) und bei reduzierter Bewegung
   bleiben beide Werte 0 und nichts bewegt sich.
   ========================================================================== */

.hero { --px: 0; --py: 0; --mx: 50%; --my: 42%; --glow: 0; }

/* E6 · Warmes Licht unter dem Zeiger (Playbook E6).
   Liegt als Hintergrundbild direkt auf dem Hero und damit unter dem Raster
   (dessen ::before hat z-index: -1). Der Schein wirkt dadurch wie Licht
   hinter der Zeichnung, nicht wie ein Fleck davor.
   --glow steuert die Staerke: 0 in Ruhe, 1 wenn der Zeiger im Hero ist. Ohne
   JavaScript, ohne Zeiger und bei reduzierter Bewegung bleibt es bei 0. */
.hero {
  background-image:
    radial-gradient(38rem 30rem at var(--mx) var(--my),
      rgba(236, 114, 4, calc(.20 * var(--glow))) 0%,
      rgba(236, 114, 4, calc(.09 * var(--glow))) 40%,
      rgba(236, 114, 4, 0) 72%);
}

.hero.grid-mark::before {
  transform: translate3d(calc(var(--px) * 5px), calc(var(--py) * 5px), 0);
}
.hero.grid-mark--reg::after {
  transform: translate3d(calc(var(--px) * -9px), calc(var(--py) * -9px), 0);
}
.hero__stage {
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -11px), 0);
}
.hero__grid > .stack-6 {
  transform: translate3d(calc(var(--px) * 3px), calc(var(--py) * 2px), 0);
}
/* Ohne Zeiger oder bei reduzierter Bewegung: alles stillstellen. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .hero.grid-mark::before,
  .hero.grid-mark--reg::after,
  .hero__stage,
  .hero__grid > .stack-6 { transform: none !important; }
  .hero { background-image: none; }
}