/* ==========================================================================
   DREVE HAUS- & GARTENSERVICE — Startseite
   Farbwelt: Gruen + Creme, dazu Beige, Salbei und Terrakotta als Akzente.
   Eigene Datei, damit styles.css und die Unterseiten unberuehrt bleiben.
   ========================================================================== */

:root {
  /* Gruentoene direkt aus dem Logo abgegriffen */
  --nx-deep:    #1b4327;
  --nx-dark:    #245430;
  --nx-mid:     #2a6035;
  --nx-cta:     #2f6b38;
  --nx-cta-h:   #3a8244;
  --nx-leaf:    #7aa82a;
  --nx-leaf-d:  #6a9224;
  --nx-leaf-l:  #eef5e2;
  /* Strahlendes Gelb, bewusst nur fuer Sterne und kleine Akzente */
  --nx-star:    #ffc220;
  /* Weisse Grundflaeche */
  --nx-cream:   #ffffff;
  --nx-cream-2: #f5f8f3;
  --nx-beige:   #7aa82a;
  --nx-beige-d: #6a9224;
  --nx-sage:    #9cc06a;
  --nx-sage-l:  #eef5e2;
  --nx-terra:   #7aa82a;
  --nx-terra-d: #6a9224;
  --nx-ink:     #13261a;
  --nx-body:    #4a5750;
  --nx-muted:   #78857c;
  --nx-line:    #e2e9e0;
  --nx-r:       28px;
  --nx-r-sm:    18px;
  --nx-e:       cubic-bezier(0.22, 1, 0.36, 1);
  --nx-e-soft:  cubic-bezier(0.33, 0.7, 0.25, 1);
}

.nx {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--nx-cream);
  color: var(--nx-body);
}
.nx :where(h1, h2, h3, h4) {
  font-family: inherit; overflow-wrap: break-word;
  letter-spacing: -0.038em; line-height: 1.03;
  color: var(--nx-ink); margin: 0; font-weight: 800;
}
.nx :where(p) { margin: 0; }
.nx-wrap { width: min(1280px, 100% - 48px); margin-inline: auto; }
@media (max-width: 680px) { .nx-wrap { width: calc(100% - 32px); } }

.nx-h-xl { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.nx-h-lg { font-size: clamp(2.05rem, 4vw, 3.1rem); }

/* ---------- Bausteine ---------------------------------------------------- */
.nx-btn[hidden], .nx-back[hidden], .nx-tool[hidden], .nx-card[hidden],
.nx-prog[hidden], .nx-done[hidden], .nx-opts[hidden], form[hidden],
.nx-gal__band[hidden], .nx-filelist[hidden], h2[hidden], p[hidden],
.nx-zurueck[hidden], .nx-kopf[hidden],
.nx-field[hidden], .nx-faq__a[hidden] { display: none !important; }

.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 32px; border: none; border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -0.012em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.4s var(--nx-e-soft), background 0.35s var(--nx-e-soft), box-shadow 0.4s var(--nx-e-soft);
}
.nx-btn:hover { transform: translateY(-2px); }
.nx-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.nx-btn--beige   { background: var(--nx-beige); color: var(--nx-deep); box-shadow: 0 10px 30px rgba(122,168,42,0.3); }
.nx-btn--beige:hover { background: var(--nx-beige-d); }
.nx-btn--green   { background: var(--nx-cta); color: #fff; box-shadow: 0 10px 30px rgba(47,107,56,0.26); }
.nx-btn--green:hover { background: var(--nx-cta-h); }
.nx-btn--terra   { background: var(--nx-terra); color: #fff; box-shadow: 0 10px 30px rgba(122,168,42,0.28); }
.nx-btn--terra:hover { background: var(--nx-terra-d); }
.nx-btn--wa      { background: #25d366; color: #fff; }
.nx-btn--wa:hover { background: #1ebe5b; }
.nx-btn--dark    { background: var(--nx-deep); color: #fff; }
.nx-btn--dark:hover { background: var(--nx-dark); }
.nx-btn--ghost   { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(10px); }
.nx-btn--ghost:hover { background: rgba(255,255,255,0.16); }
.nx-btn--outline { background: #fff; color: var(--nx-deep); border: 1px solid var(--nx-line); }
.nx-btn--outline:hover { border-color: var(--nx-cta); color: var(--nx-cta); }
.nx-btn--block   { width: 100%; }

.nx-lead { color: var(--nx-body); font-size: 1.08rem; line-height: 1.7; }

/* ========================== 1 — HERO ===================================== */
.nx-hero { position: relative; min-height: min(92vh, 880px); display: flex; flex-direction: column; isolation: isolate; }
.nx-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Das Motiv sitzt rechts, wo der Verlauf das Foto freigibt - links
   bleibt die ruhige Flaeche fuer den Text. */
.nx-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 30%; }
.nx-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  /* Der Verlauf ersetzt den frueheren Kasten: links dunkel genug zum Lesen,
     rechts gibt er das Foto frei. */
  background:
    linear-gradient(97deg,
      rgba(8,19,13,0.93) 0%, rgba(8,19,13,0.90) 26%,
      rgba(8,19,13,0.72) 46%, rgba(8,19,13,0.34) 64%,
      rgba(8,19,13,0.06) 82%, rgba(8,19,13,0) 100%),
    linear-gradient(to top, rgba(8,19,13,0.45), transparent 34%);
}
.nx-hero__top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0 0; }
.nx-hero__brand {
  display: inline-flex; align-items: center; text-decoration: none;
  background: rgba(255,255,255,0.95); border-radius: 14px; padding: 9px 16px;
  backdrop-filter: blur(8px); box-shadow: 0 8px 26px rgba(5,14,10,0.22);
  transition: transform 0.3s var(--nx-e);
}
.nx-hero__brand:hover { transform: translateY(-1px); }
.nx-hero__brand img { width: 136px; height: auto; display: block; }
.nx-hero__tools { display: flex; align-items: center; gap: 22px; }
.nx-hero__tel { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.02rem; }
.nx-hero__tel svg { width: 19px; height: 19px; color: var(--nx-beige); }
.nx-hero__body {
  position: relative; z-index: 2; flex: 1; display: flex; align-items: center;
  padding: calc(var(--nx-kopf-h, 150px) + 44px) 0 72px;
}
/* Breit genug, dass die drei Punkte in eine Zeile passen; die Fließtexte
   darin bleiben ueber ihre eigene max-width schmal und lesbar. */
.nx-hero__text { max-width: 790px; }

/* Ortsmarke ganz oben: sagt in einer Zeile, wer und wo */
.nx-hero__marke {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 13px; border-radius: 999px;
  background: rgba(122,168,42,0.22); border: 1px solid rgba(122,168,42,0.45);
  color: #d7ecb4; font-size: 0.88rem; font-weight: 600;
  margin-bottom: 26px;
}
.nx-hero__marke svg { width: 16px; height: 16px; color: var(--nx-leaf); flex: none; }

.nx-hero h1 {
  color: #fff; margin: 0 0 20px;
  font-size: clamp(2.1rem, 5.6vw, 4.2rem); line-height: 1.04;
  letter-spacing: -0.04em; overflow-wrap: break-word;
  text-shadow: 0 2px 28px rgba(5,14,10,0.5);
}
.nx-hero__gruen { color: #9ad13f; }

.nx-hero__sub {
  color: rgba(255,255,255,0.88); font-size: 1.1rem; line-height: 1.6;
  max-width: 44ch; margin: 0;
  text-shadow: 0 1px 16px rgba(5,14,10,0.5);
}

/* Drei Punkte, die die haeufigsten Rueckfragen vorwegnehmen */
.nx-hero__punkte {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px 26px;
}
.nx-hero__punkte li { display: flex; align-items: center; gap: 11px; }
.nx-hero__ico {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--nx-leaf);
  background: rgba(122,168,42,0.18); border: 1px solid rgba(122,168,42,0.32);
}
.nx-hero__ico svg { width: 19px; height: 19px; }
.nx-hero__punkte li > span:last-child {
  display: flex; flex-direction: column; line-height: 1.34;
  color: rgba(255,255,255,0.7); font-size: 0.85rem;
}
.nx-hero__punkte b { color: #fff; font-size: 0.95rem; font-weight: 700; }

.nx-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.nx-btn--klar {
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.nx-btn--klar:hover { background: rgba(255,255,255,0.17); border-color: rgba(255,255,255,0.7); }

/* Bewertungen: das staerkste Argument gehoert in den ersten Bildschirm */
.nx-hero__bewertung {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin: 26px 0 0; font-size: 0.93rem; color: rgba(255,255,255,0.78);
}
.nx-hero__bewertung b { color: #fff; font-weight: 800; }
.nx-hero__sterne { color: var(--nx-star); letter-spacing: 0.1em; font-size: 1rem; }

@media (max-width: 860px) {
  .nx-hero { min-height: auto; }
  .nx-hero__text { max-width: none; }
  .nx-hero__body { padding: calc(var(--nx-kopf-h, 130px) + 26px) 0 48px; }
  .nx-hero__tel span { display: none; }
  /* Auf dem Handy liegt der Text ueber dem ganzen Bild - der Verlauf
     muss deshalb von oben nach unten laufen statt von links. */
  .nx-hero__bg::after {
    background: linear-gradient(to bottom,
      rgba(8,19,13,0.84) 0%, rgba(8,19,13,0.66) 42%, rgba(8,19,13,0.9) 100%);
  }
  .nx-hero__punkte { gap: 12px 22px; margin-top: 24px; }
  .nx-hero__marke { margin-bottom: 20px; font-size: 0.83rem; }
}
@media (max-width: 560px) {
  .nx-hero__cta .nx-btn { width: 100%; }
  .nx-hero__top { padding-top: 18px; }
  .nx-hero__tools .nx-btn--beige { display: none; }
  .nx-hero__brand { padding: 7px 12px; }
  .nx-hero__brand img { width: 112px; }
  .nx-hero__sub { font-size: 1.02rem; }
}

/* ---------- Leistungsband ---------- */
.nx-ticker {
  position: relative; z-index: 2; background: var(--nx-cream);
  border-top: 1px solid var(--nx-line); padding: 26px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.nx-ticker__row { display: flex; width: max-content; animation: nx-slide 38s linear infinite; }
.nx-ticker:hover .nx-ticker__row { animation-play-state: paused; }
.nx-ticker__row > * { flex-shrink: 0; }
.nx-ticker a, .nx-ticker span {
  display: inline-flex; align-items: center; gap: 14px; padding: 0 34px;
  color: var(--nx-deep); text-decoration: none; font-size: 1.16rem; font-weight: 700;
  letter-spacing: -0.022em; white-space: nowrap; transition: color 0.34s var(--nx-e);
}
.nx-ticker a:hover { color: var(--nx-cta); }
.nx-ticker a::after, .nx-ticker span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nx-beige); }
@keyframes nx-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .nx-ticker__row { animation: none; }
  .nx-ticker { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* ========================== 2 — UEBER UNS ================================ */
.nx-about { padding: 86px 0 76px; background: var(--nx-cream); }
.nx-about__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 76px; align-items: start; }
.nx-about h2 { margin: 0 0 22px; }
.nx-about .nx-lead { max-width: 60ch; }
.nx-about__cta { margin-top: 34px; }
.nx-stats { display: grid; gap: 36px; padding-top: 6px; }
.nx-stat__n { font-size: clamp(2.9rem, 5vw, 3.9rem); font-weight: 800; letter-spacing: -0.05em; color: var(--nx-ink); line-height: 1; }
.nx-stat__n i { font-style: normal; color: var(--nx-terra); }
.nx-stat__l { margin-top: 10px; color: var(--nx-body); font-size: 1rem; }
.nx-about__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; }
.nx-about__pics figure { margin: 0; border-radius: var(--nx-r); overflow: hidden; }
.nx-about__pics img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
@media (max-width: 960px) {
  .nx-about { padding: 76px 0 68px; }
  .nx-about__grid { grid-template-columns: 1fr; gap: 46px; }
  .nx-stats { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .nx-about__pics { margin-top: 42px; }
}
@media (max-width: 620px) {
  .nx-stats { grid-template-columns: 1fr 1fr; }
  .nx-about__pics { grid-template-columns: 1fr; gap: 16px; }
}

/* ========================== 3 — LEISTUNGEN =============================== */
.nx-services { padding: 84px 0 88px; background: linear-gradient(165deg, var(--nx-dark) 0%, var(--nx-deep) 58%, #0d2219 100%); }
.nx-services h2 { color: #fff; margin: 0 0 46px; max-width: 18ch; }
.nx-svc { display: grid; gap: 26px; }
.nx-svc__card {
  display: grid; grid-template-columns: 1fr 1fr 0.86fr;
  background: var(--nx-cream); border-radius: var(--nx-r); overflow: hidden;
  transition: transform 0.5s var(--nx-e-soft), box-shadow 0.5s var(--nx-e-soft);
}
.nx-svc__card:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(5,14,10,0.3); }
.nx-svc__main { padding: 44px 38px 40px; display: flex; flex-direction: column; }
.nx-svc__main h3 { font-size: 1.86rem; margin-bottom: 16px; }
.nx-svc__main p { color: var(--nx-body); line-height: 1.68; font-size: 1.01rem; }
.nx-svc__main .nx-btn { margin-top: auto; align-self: flex-start; }
.nx-svc__list { padding: 44px 32px 40px 10px; }
.nx-svc__list h4 { font-size: 1.1rem; margin-bottom: 20px; }
.nx-svc__tags { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; }
.nx-svc__tags li {
  list-style: none; padding: 9px 16px; border-radius: 999px;
  background: var(--nx-sage-l); border: 1px solid rgba(122,168,42,0.3);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; color: #3c5347;
}
.nx-svc__pic { position: relative; min-height: 300px; }
.nx-svc__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1040px) {
  .nx-svc__card { grid-template-columns: 1fr 1fr; }
  .nx-svc__pic { grid-column: 1 / -1; min-height: 250px; order: -1; }
}
@media (max-width: 720px) {
  .nx-services { padding: 76px 0 80px; }
  .nx-services h2 { margin-bottom: 40px; }
  .nx-svc__card { grid-template-columns: 1fr; }
  .nx-svc__main { padding: 32px 24px 26px; }
  .nx-svc__list { padding: 0 24px 34px; }
  .nx-svc__main .nx-btn { width: 100%; }
}

/* ========================== 4 — WARUM DREVE ============================== */
.nx-why { padding: 84px 0; background: var(--nx-cream); }
.nx-why h2 { margin: 0 0 40px; max-width: 20ch; }

/* Ein Rahmen, das Foto laeuft hinter Text UND Karten durch */
.nx-why__stage {
  position: relative; border-radius: var(--nx-r); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 64px; padding: 50px 48px 46px;
  aspect-ratio: 16 / 10; min-height: 660px;
}
.nx-why__stage > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; z-index: -2;
}
.nx-why__stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(8,18,14,0.8) 0%, rgba(8,18,14,0.3) 34%, transparent 58%),
    linear-gradient(100deg, rgba(8,18,14,0.74) 0%, rgba(8,18,14,0.34) 40%, transparent 74%);
}
.nx-why__intro {
  position: relative; max-width: 52ch;
  color: #fff; font-size: 1.2rem; line-height: 1.66;
  text-shadow: 0 1px 16px rgba(8,18,14,0.6);
}

.nx-why__cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nx-why__card {
  position: relative; overflow: hidden;
  padding: 28px 28px 30px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.17);
  background: linear-gradient(150deg, rgba(14,26,20,0.82), rgba(14,26,20,0.56));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 44px rgba(8,18,14,0.26);
}
.nx-why__num { display: block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; color: var(--nx-beige); margin-bottom: 14px; }
.nx-why__card h3 { color: #fff; font-size: 1.22rem; margin-bottom: 12px; padding-top: 15px; border-top: 1px solid rgba(122,168,42,0.55); }
.nx-why__card p { color: rgba(255,255,255,0.82); font-size: 0.97rem; line-height: 1.62; }

@media (max-width: 1040px) {
  .nx-why__stage { aspect-ratio: auto; min-height: 0; gap: 44px; }
  .nx-why__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nx-why { padding: 76px 0; }
  .nx-why h2 { margin-bottom: 32px; }
  .nx-why__stage { padding: 30px 22px 28px; gap: 32px; }
  .nx-why__intro { font-size: 1.05rem; }
  .nx-why__cards { grid-template-columns: 1fr; gap: 14px; }
  .nx-why__card { padding: 22px 22px 24px; }
  /* Hochkant steht der Text oben – dort muss der Verlauf mit abdunkeln,
     sonst liegt er auf der hellen Hauswand. */
  .nx-why__stage::after {
    background:
      linear-gradient(to bottom, rgba(8,18,14,0.78) 0%, rgba(8,18,14,0.34) 26%, transparent 46%),
      linear-gradient(to top,    rgba(8,18,14,0.86) 0%, rgba(8,18,14,0.4) 30%, transparent 56%);
  }
}

/* ========================== 5 — LOGO-BAND ================================ */
.nx-brand { padding: 76px 0; background: var(--nx-cream-2); }
.nx-brand__grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: 76px; align-items: center; }
.nx-brand h2 { margin: 0 0 24px; }
.nx-brand__mark {
  display: grid; place-items: center; padding: 56px 46px; border-radius: var(--nx-r);
  background: #fff; border: 1px solid var(--nx-line); box-shadow: 0 24px 60px rgba(15,26,22,0.07);
}
.nx-brand__mark img { width: 100%; max-width: 420px; height: auto; display: block; }
.nx-brand__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; }
.nx-brand__facts li {
  list-style: none; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px; border-radius: 999px; background: #fff; border: 1px solid var(--nx-line);
  font-size: 0.92rem; font-weight: 600; color: var(--nx-body);
}
.nx-brand__facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-sage); }
@media (max-width: 920px) {
  .nx-brand { padding: 68px 0; }
  .nx-brand__grid { grid-template-columns: 1fr; gap: 38px; }
  .nx-brand__mark { padding: 34px 26px; }
}

/* ========================== 6 — ABLAUF =================================== */
.nx-how { padding: 84px 0 0; background: var(--nx-cream); }
.nx-how__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 68px; align-items: center; }
.nx-how h2 { margin: 0 0 24px; }
.nx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 56px; padding-top: 42px; border-top: 1px solid var(--nx-line); }
.nx-step h3 { font-size: 1.32rem; margin-bottom: 13px; }
.nx-step h3 i { font-style: normal; color: var(--nx-terra); margin-right: 7px; }
.nx-step p { color: var(--nx-body); font-size: 1rem; line-height: 1.66; }
.nx-marquee { margin-top: 62px; padding: 24px 0; overflow: hidden; background: linear-gradient(100deg, var(--nx-dark), var(--nx-deep)); }
.nx-marquee__row { display: flex; width: max-content; animation: nx-slide 30s linear infinite; }
.nx-marquee__row span {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 26px; padding: 0 26px;
  white-space: nowrap; color: #fff; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.018em;
}
.nx-marquee__row span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nx-beige); }
@media (prefers-reduced-motion: reduce) { .nx-marquee__row { animation: none; } }
@media (max-width: 920px) {
  .nx-how { padding: 76px 0 0; }
  .nx-how__grid { grid-template-columns: 1fr; gap: 34px; }
  .nx-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 46px; padding-top: 34px; }
  .nx-marquee { margin-top: 56px; }
}

/* ========================== 7 — ANFRAGE ================================== */
.nx-ask { padding: 84px 0; background: linear-gradient(165deg, var(--nx-dark), var(--nx-deep)); }
.nx-ask__grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 28px; align-items: stretch; }
.nx-ask__side {
  position: relative; overflow: hidden; border-radius: var(--nx-r);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 48px 44px 44px; min-height: 580px;
}
.nx-ask__side > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.nx-ask__side::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,18,14,0.95) 12%, rgba(8,18,14,0.5) 56%, rgba(8,18,14,0.3));
}
.nx-ask__side h2 { color: #fff; font-size: clamp(2rem, 3.3vw, 2.7rem); margin: 0 0 18px; }
.nx-ask__side p { color: rgba(255,255,255,0.82); line-height: 1.66; font-size: 1.04rem; }
.nx-ask__usp { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.18); }
.nx-ask__usp div { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 0.94rem; font-weight: 600; }
.nx-ask__usp svg { width: 18px; height: 18px; color: var(--nx-beige); }
.nx-ask__panel { background: var(--nx-cream); border-radius: var(--nx-r); padding: 48px 46px 44px; display: flex; flex-direction: column; }
.nx-prog { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.nx-prog__bar { flex: 1; height: 5px; border-radius: 999px; background: var(--nx-line); overflow: hidden; }
.nx-prog__fill { height: 100%; width: 20%; border-radius: 999px; background: var(--nx-terra); transition: width 0.45s var(--nx-e); }
.nx-prog__txt { font-size: 0.84rem; font-weight: 700; color: var(--nx-muted); white-space: nowrap; }
.nx-step-pane { display: none; animation: nx-fade 0.4s var(--nx-e); }
.nx-step-pane.is-on { display: block; }
@keyframes nx-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.nx-ask__panel h3 { font-size: 1.82rem; margin-bottom: 12px; }
.nx-ask__panel .nx-q { color: var(--nx-body); font-size: 1rem; line-height: 1.62; margin-bottom: 28px; }
.nx-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nx-opts--2 { grid-template-columns: repeat(2, 1fr); }
.nx-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 18px 16px 17px; border-radius: var(--nx-r-sm); cursor: pointer;
  border: 1.5px solid var(--nx-line); background: #fff; text-align: left;
  font: inherit; color: var(--nx-ink); transition: all 0.34s var(--nx-e-soft);
}
.nx-opt:hover { border-color: var(--nx-cta); transform: translateY(-2px); }
.nx-opt.is-sel { border-color: var(--nx-cta); background: var(--nx-sage-l); box-shadow: 0 0 0 3px rgba(47,107,56,0.12); }
.nx-opt img { width: 46px; height: 46px; object-fit: contain; display: block; }
.nx-opt svg { width: 26px; height: 26px; color: var(--nx-cta); }
.nx-opt b { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.012em; }
.nx-opt small { color: var(--nx-muted); font-size: 0.84rem; line-height: 1.45; }
.nx-field { margin-bottom: 17px; }
.nx-field label { display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: 8px; color: var(--nx-ink); }
.nx-field input, .nx-field select, .nx-field textarea {
  width: 100%; padding: 15px 17px; font: inherit; font-size: 0.97rem;
  border: 1.5px solid var(--nx-line); border-radius: 14px; background: #fff; color: var(--nx-ink);
  transition: border-color 0.34s var(--nx-e), box-shadow 0.34s var(--nx-e);
}
.nx-field input:focus, .nx-field select:focus, .nx-field textarea:focus {
  outline: none; border-color: var(--nx-cta); box-shadow: 0 0 0 3px rgba(47,107,56,0.13);
}
.nx-field textarea { min-height: 110px; resize: vertical; }
.nx-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nx-check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.89rem; color: var(--nx-body); line-height: 1.52; margin: 6px 0 22px; }
.nx-check input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--nx-cta); }
.nx-check a { color: var(--nx-cta); font-weight: 600; }
.nx-nav { display: flex; gap: 12px; align-items: center; margin-top: 30px; }
.nx-nav .nx-btn--green { flex: 1; }
.nx-back {
  background: none; border: none; font: inherit; cursor: pointer; color: var(--nx-muted);
  font-size: 0.94rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; padding: 8px 4px;
}
.nx-back:hover { color: var(--nx-ink); }
.nx-hint { margin-top: 16px; font-size: 0.85rem; color: var(--nx-muted); text-align: center; }
.nx-sum { background: var(--nx-cream-2); border-radius: var(--nx-r-sm); padding: 19px 21px; margin-bottom: 24px; }
.nx-sum dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 0.92rem; }
.nx-sum dt { color: var(--nx-muted); }
.nx-sum dd { margin: 0; font-weight: 700; color: var(--nx-ink); text-align: right; }
@media (max-width: 980px) {
  .nx-ask { padding: 76px 0; }
  .nx-ask__grid { grid-template-columns: 1fr; }
  .nx-ask__side { min-height: 380px; padding: 30px 24px 28px; }
  .nx-ask__panel { padding: 32px 24px 30px; }
  .nx-opts { grid-template-columns: 1fr 1fr; }
  .nx-field--row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nx-opts { grid-template-columns: 1fr; }
  /* Symbol neben den Text – halbiert die Hoehe je Kachel */
  .nx-opt {
    flex-direction: row; align-items: center; gap: 14px;
    padding: 14px 16px; flex-wrap: wrap;
  }
  .nx-opt img, .nx-opt svg { width: 36px; height: 36px; flex-shrink: 0; }
  .nx-opt b { flex: 1; }
  .nx-opt small { flex-basis: 100%; margin-left: 50px; margin-top: -4px; }
}

/* ========================== 8 — WERKZEUGE ================================ */
.nx-tools { padding: 78px 0; background: var(--nx-cream-2); }
.nx-tools__stack { display: grid; gap: 22px; }
.nx-tool {
  position: relative; overflow: hidden; border-radius: var(--nx-r);
  display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center;
  padding: 56px 58px;
}
.nx-tool--dark { background: linear-gradient(115deg, var(--nx-deep), var(--nx-dark)); }
.nx-tool--dark::before {
  content: ""; position: absolute; right: -8%; bottom: -70%; width: 46%; aspect-ratio: 1;
  filter: blur(60px); pointer-events: none;
  background: radial-gradient(circle, rgba(122,168,42,0.45), transparent 68%);
}
.nx-tool--light { background: #fff; border: 1px solid var(--nx-line); }
.nx-tool h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 20ch; margin: 0; line-height: 1.12; }
.nx-tool--dark h3 { color: #fff; }
.nx-tool__note { margin-top: 22px; font-size: 0.98rem; line-height: 1.6; max-width: 54ch; }
.nx-tool--dark .nx-tool__note { color: rgba(255,255,255,0.68); }
.nx-tool--light .nx-tool__note { color: var(--nx-body); }
.nx-tool > * { position: relative; }
@media (max-width: 860px) {
  .nx-tools { padding: 68px 0; }
  .nx-tool { grid-template-columns: 1fr; padding: 36px 26px; gap: 28px; }
  .nx-tool .nx-btn { width: 100%; }
}


/* ========================== GALERIE — durchlaufendes Band ================ */
.nx-gal { padding: 84px 0 78px; background: var(--nx-cream); }
.nx-gal h2 { margin: 0 0 18px; max-width: 18ch; }
.nx-gal__sub { max-width: 60ch; margin-bottom: 40px; }

.nx-gal__band {
  position: relative; overflow: hidden; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.nx-gal__track {
  display: flex; gap: 20px; width: max-content;
  will-change: transform;
}
.nx-gal__band:hover .nx-gal__track,
.nx-gal__band:focus-within .nx-gal__track { animation-play-state: paused; }

.nx-gal__item {
  position: relative; flex-shrink: 0;
  width: clamp(230px, 24vw, 340px); aspect-ratio: 4 / 5;
  border-radius: 22px; overflow: hidden; background: var(--nx-cream-2);
}
.nx-gal__item img, .nx-gal__item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nx-gal__play {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 10px;
  border: none; cursor: pointer; font: inherit; color: #fff;
  background: linear-gradient(to top, rgba(10,22,17,0.68), rgba(10,22,17,0.22));
  align-content: center;
}
.nx-gal__play span {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.94); color: var(--nx-deep);
  box-shadow: 0 10px 28px rgba(8,18,14,0.3);
  transition: transform 0.3s var(--nx-e);
}
.nx-gal__play:hover span { transform: scale(1.07); }
.nx-gal__play svg { width: 22px; height: 22px; margin-left: 3px; }
.nx-gal__play small { font-size: 0.84rem; font-weight: 700; letter-spacing: -0.01em; }
.nx-gal__item.is-playing .nx-gal__play { display: none; }

.nx-gal__empty { text-align: center; color: var(--nx-muted); font-size: 0.98rem; padding: 40px 24px; }
.nx-gal__empty a { color: var(--nx-cta); font-weight: 700; }

.nx-gal__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 52px; }

@keyframes nx-gal-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--nx-gal-end), 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .nx-gal__track { animation: none !important; }
  .nx-gal__band { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}
@media (max-width: 680px) {
  .nx-gal { padding: 76px 0 72px; }
  .nx-gal__sub { margin-bottom: 34px; }
  .nx-gal__track { gap: 14px; }
  .nx-gal__cta { margin-top: 36px; }
  .nx-gal__cta .nx-btn { width: 100%; }
}

/* ========================== DATEIANHANG IM FORMULAR ====================== */
.nx-opt-note { font-weight: 500; color: var(--nx-muted); }

/* Spamfalle: liegt ausserhalb des Bildschirms, nicht per display:none -
   das erkennen einfache Bots sonst und lassen das Feld leer. */
.nx-falle {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Kachel fuer Anfragen, die in keine der Leistungen passen */
.nx-opt--frei { border-style: dashed; }
.nx-opt__zeichen {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--nx-leaf-l); color: var(--nx-cta);
}
.nx-opt__zeichen svg { width: 23px; height: 23px; }
.nx-opt--frei.is-sel { border-style: solid; }
.nx-frei { margin-top: 18px; animation: nx-frei-auf 0.4s var(--nx-e-soft) both; }
.nx-frei__hilfe { display: block; margin-top: 7px; font-size: 0.84rem; color: var(--nx-muted); line-height: 1.5; }
@keyframes nx-frei-auf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nx-frei { animation: none; } }
.nx-drop {
  display: flex; align-items: center; gap: 15px; cursor: pointer;
  padding: 18px 20px; border: 1.5px dashed var(--nx-line); border-radius: 14px;
  background: #fff; transition: all 0.34s var(--nx-e-soft);
}
.nx-drop:hover { border-color: var(--nx-cta); background: var(--nx-leaf-l); }
.nx-drop svg { width: 26px; height: 26px; color: var(--nx-cta); flex-shrink: 0; }
.nx-drop b { display: block; font-size: 0.96rem; color: var(--nx-ink); }
.nx-drop small { display: block; margin-top: 3px; font-size: 0.82rem; color: var(--nx-muted); line-height: 1.45; }
.nx-filelist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.nx-filelist li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 11px; background: var(--nx-leaf-l);
  font-size: 0.88rem; color: var(--nx-ink);
}
.nx-filelist li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-filelist li small { color: var(--nx-muted); flex-shrink: 0; }
.nx-filelist li.is-bad { background: #fbeae6; color: #8e3c25; }

/* ========================== 9 — BEWERTUNGEN ============================== */

/* ========================== DANKE NACH DEM ABSENDEN ===================== */
.nx-done { text-align: center; padding: 10px 0 4px; animation: nx-fade 0.5s var(--nx-e); }
.nx-done__ico {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center;
  background: var(--nx-leaf-l); color: var(--nx-cta);
  box-shadow: 0 0 0 8px rgba(122,168,42,0.1);
}
.nx-done__ico svg { width: 32px; height: 32px; }
.nx-done h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 14px; }
.nx-done__text { color: var(--nx-body); font-size: 1.02rem; line-height: 1.66; max-width: 46ch; margin: 0 auto; }

.nx-done__sum {
  display: grid; grid-template-columns: auto 1fr; gap: 9px 18px;
  max-width: 400px; margin: 30px auto 0; text-align: left;
  padding: 20px 22px; border-radius: var(--nx-r-sm); background: var(--nx-cream-2);
  font-size: 0.93rem;
}
.nx-done__sum:empty { display: none; }
.nx-done__sum dt { color: var(--nx-muted); }
.nx-done__sum dd { margin: 0; font-weight: 700; color: var(--nx-ink); text-align: right; }

.nx-done__next {
  list-style: none; counter-reset: schritt; margin: 32px 0 0; padding: 0;
  display: grid; gap: 16px; text-align: left; max-width: 440px; margin-inline: auto;
}
.nx-done__next li {
  counter-increment: schritt; position: relative; padding-left: 44px;
}
.nx-done__next li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nx-deep); color: #fff; font-size: 0.82rem; font-weight: 800;
}
.nx-done__next b { display: block; color: var(--nx-ink); font-size: 0.99rem; margin-bottom: 3px; }
.nx-done__next span { color: var(--nx-body); font-size: 0.92rem; line-height: 1.55; }

.nx-done__hint { margin: 34px 0 14px; font-size: 0.9rem; color: var(--nx-muted); }
.nx-done__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.nx-fehler {
  margin-top: 16px; padding: 15px 18px; border-radius: 13px;
  background: #fbeae6; color: #8e3c25; font-size: 0.92rem; line-height: 1.55;
}
.nx-fehler a { color: #8e3c25; font-weight: 700; }

@media (max-width: 560px) {
  .nx-done__cta .nx-btn { width: 100%; }
  .nx-done__sum { grid-template-columns: 1fr; gap: 4px 0; }
  .nx-done__sum dd { text-align: left; margin-bottom: 8px; }
}

/* ========================== 9b — BEWERTUNGEN ============================== */
.nx-ref { padding: 84px 0; background: var(--nx-cream); }
.nx-ref h2 { margin: 0 0 44px; max-width: 20ch; }
.nx-ref__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; align-items: stretch;
}
/* Die ausfuehrlichste Bewertung bekommt mehr Platz und etwas mehr Gewicht. */
.nx-ref__card--gross {
  grid-column: span 2; background: var(--nx-leaf-l);
  border: 1px solid rgba(122,168,42,0.3);
}
.nx-ref__card--gross p {
  font-size: 1.24rem; font-weight: 600; line-height: 1.5;
  letter-spacing: -0.018em; color: var(--nx-ink);
}
.nx-ref__card { background: var(--nx-cream-2); border-radius: 22px; padding: 30px 30px 26px; display: flex; flex-direction: column; }
.nx-ref__stars { display: flex; gap: 4px; margin-bottom: 20px; color: var(--nx-star); }
.nx-ref__stars svg { width: 15px; height: 15px; }
.nx-ref__card p { color: var(--nx-body); font-size: 1rem; line-height: 1.64; }
.nx-ref__foot { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 26px; }
.nx-ref__ini {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--nx-sage-l); color: var(--nx-dark); font-size: 0.86rem; font-weight: 800;
}
.nx-ref__foot b { display: block; color: var(--nx-ink); font-size: 0.98rem; font-weight: 700; }
.nx-ref__foot small { color: var(--nx-muted); font-size: 0.88rem; }
.nx-ref__more { margin-top: 38px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nx-ref__score { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 800; color: var(--nx-ink); }
.nx-ref__score b { font-size: 1.8rem; letter-spacing: -0.04em; }
.nx-ref__score span { font-size: 0.95rem; font-weight: 600; color: var(--nx-muted); }
@media (max-width: 1040px) {
  .nx-ref__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-ref__card--gross { grid-column: span 2; }
  }
@media (max-width: 680px) {
  .nx-ref { padding: 72px 0; }
  .nx-ref h2 { margin-bottom: 34px; }
    .nx-ref__grid { grid-template-columns: 1fr; gap: 14px; }
  .nx-ref__card { padding: 24px 22px 22px; }
  .nx-ref__card--gross { grid-column: auto; }
  .nx-ref__card--gross p { font-size: 1.08rem; }
    }

/* ========================== 10 — EINSATZGEBIET =========================== */
/* ---------- Haeufig gestellte Fragen ---------- */
.nx-faq { padding: 72px 0 80px; background: var(--nx-cream-2); }
.nx-faq__grid {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px; align-items: start;
}
.nx-faq__text { position: sticky; top: calc(var(--nx-kopf-h, 120px) + 24px); }
.nx-faq__text h2 { margin: 0 0 16px; }
.nx-faq .nx-lead { max-width: 36ch; margin-bottom: 28px; }

.nx-faq__box {
  padding: 26px 26px 24px; border-radius: var(--nx-r);
  background: #fff; border: 1px solid var(--nx-line);
  box-shadow: 0 16px 36px -28px rgba(19,38,26,0.35);
}
.nx-faq__box strong { display: block; font-size: 1.06rem; color: var(--nx-ink); margin-bottom: 8px; }
.nx-faq__box p { font-size: 0.93rem; color: var(--nx-body); line-height: 1.6; margin-bottom: 18px; }
.nx-faq__box .nx-btn { width: 100%; justify-content: center; }
.nx-faq__tel {
  display: block; margin-top: 14px; text-align: center;
  font-size: 0.88rem; color: var(--nx-muted); text-decoration: none;
  transition: color 0.35s var(--nx-e-soft);
}
.nx-faq__tel b { color: var(--nx-ink); font-weight: 800; }
.nx-faq__tel:hover { color: var(--nx-cta); }
.nx-faq__tel:hover b { color: var(--nx-cta); }

.nx-faq__liste { display: flex; flex-direction: column; gap: 10px; }
.nx-faq__item {
  border: 1px solid var(--nx-line); border-radius: var(--nx-r-sm);
  background: #fff; overflow: hidden;
  transition: border-color 0.4s var(--nx-e-soft), box-shadow 0.4s var(--nx-e-soft);
}
.nx-faq__item.is-auf { border-color: rgba(122,168,42,0.5); box-shadow: 0 14px 34px -26px rgba(19,38,26,0.4); }
.nx-faq__frage { margin: 0; font-size: inherit; font-weight: inherit; }
.nx-faq__btn {
  display: flex; align-items: center; gap: 18px; width: 100%;
  padding: 20px 22px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left;
  font-size: 1.04rem; font-weight: 700; letter-spacing: -0.015em; color: var(--nx-ink);
  transition: color 0.35s var(--nx-e-soft);
}
.nx-faq__btn > span:first-child { flex: 1; }
.nx-faq__btn:hover { color: var(--nx-cta); }
.nx-faq__item.is-auf .nx-faq__btn { color: var(--nx-deep); }

/* Plus, das sich beim Oeffnen zum Minus dreht */
.nx-faq__plus {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--nx-leaf-l);
  transition: background 0.4s var(--nx-e-soft), transform 0.5s var(--nx-e);
}
.nx-faq__plus::before, .nx-faq__plus::after {
  content: ""; position: absolute; top: 50%; left: 50%; border-radius: 2px;
  background: var(--nx-cta); transform: translate(-50%, -50%);
  transition: opacity 0.4s var(--nx-e-soft), background 0.4s var(--nx-e-soft);
}
.nx-faq__plus::before { width: 13px; height: 2px; }
.nx-faq__plus::after  { width: 2px; height: 13px; }
.nx-faq__item.is-auf .nx-faq__plus { background: var(--nx-cta); transform: rotate(180deg); }
.nx-faq__item.is-auf .nx-faq__plus::before { background: #fff; }
.nx-faq__item.is-auf .nx-faq__plus::after  { opacity: 0; }

/* Antwort: faehrt weich auf, ohne feste Hoehe */
.nx-faq__a {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s var(--nx-e-soft);
}
.nx-faq--js .nx-faq__a { grid-template-rows: 0fr; }
.nx-faq--js .nx-faq__item.is-auf .nx-faq__a { grid-template-rows: 1fr; }
.nx-faq__inner { overflow: hidden; }
.nx-faq__inner > * { margin: 0; }
.nx-faq__inner p {
  padding: 0 22px 4px; font-size: 0.96rem; line-height: 1.7; color: var(--nx-body);
  max-width: 62ch;
}
.nx-faq__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 22px 22px; font-size: 0.92rem; font-weight: 700;
  color: var(--nx-cta); text-decoration: none;
  transition: gap 0.35s var(--nx-e-soft), color 0.35s var(--nx-e-soft);
}
.nx-faq__link svg { width: 16px; height: 16px; }
.nx-faq__link:hover { gap: 12px; color: var(--nx-deep); }

@media (max-width: 1000px) {
  .nx-faq__grid { grid-template-columns: 1fr; gap: 34px; }
  .nx-faq__text { position: static; }
  .nx-faq .nx-lead { max-width: 60ch; }
  .nx-faq__box { max-width: 520px; }
}
@media (max-width: 620px) {
  .nx-faq { padding: 56px 0 62px; }
  .nx-faq__btn { padding: 17px 16px; gap: 12px; font-size: 0.99rem; }
  .nx-faq__plus { width: 30px; height: 30px; }
  .nx-faq__inner p { padding: 0 16px 4px; font-size: 0.93rem; }
  .nx-faq__link { margin: 12px 16px 18px; }
  .nx-faq__box { padding: 22px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-faq__a { transition: none; }
  .nx-faq__plus { transition: background 0.34s var(--nx-e-soft); }
}

/* ---------- Einsatzgebiet mit Karte ---------- */
.nx-geb { padding: 74px 0 78px; background: var(--nx-cream); }
.nx-geb__grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.nx-geb__text h2 { margin: 0 0 18px; }
.nx-geb .nx-lead { max-width: 46ch; margin-bottom: 26px; }

.nx-geb__heim {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; border-radius: var(--nx-r-sm);
  background: var(--nx-leaf-l); border: 1px solid rgba(122,168,42,0.3);
}
.nx-geb__heim-ico {
  flex: none; position: relative; width: 52px; height: 52px; border-radius: 14px;
  background: #fff; border: 1px solid rgba(122,168,42,0.35);
  overflow: hidden;
}
/* Die Zeichnung hat in der Datei rundum viel Luft und sitzt leicht zu hoch.
   Das Bild wird deshalb ueber die Kachel hinaus vergroessert und ein Stueck
   nach unten gerueckt - die Zeichnung selbst bleibt dabei im Rahmen. */
.nx-geb__heim-ico img {
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 60px; max-width: none;   /* sonst greift die Breitensperre */
  object-fit: contain; display: block;
  transform: translate(calc(-50% - 1px), calc(-50% + 3px));
}
.nx-geb__heim strong { display: block; font-size: 0.97rem; color: var(--nx-ink); line-height: 1.3; }
.nx-geb__heim span { display: block; font-size: 0.89rem; color: var(--nx-body); }

.nx-geb__grp { margin-top: 26px; }
.nx-geb__grp h3 {
  font-size: 0.74rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--nx-muted); margin: 0 0 12px; font-weight: 700;
}
.nx-geb__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-geb__chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--nx-ink);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--nx-line); background: #fff; text-decoration: none;
  transition: color 0.35s var(--nx-e-soft), border-color 0.35s var(--nx-e-soft),
              background 0.35s var(--nx-e-soft), transform 0.35s var(--nx-e-soft);
}
.nx-geb__chip i { font-style: normal; opacity: 0; margin-left: -4px;
  transition: opacity 0.35s var(--nx-e-soft), margin 0.35s var(--nx-e-soft); }
.nx-geb__chip:hover, .nx-geb__chip:focus-visible, .nx-geb__chip.is-an {
  color: var(--nx-deep); border-color: var(--nx-leaf);
  background: var(--nx-leaf-l); transform: translateY(-1px);
}
a.nx-geb__chip:hover i, a.nx-geb__chip:focus-visible i { opacity: 1; margin-left: 0; }
.nx-geb__chip--still { cursor: default; color: var(--nx-body); font-weight: 500; }
.nx-geb__chip--still:hover { transform: none; background: #fff;
  border-color: var(--nx-line); color: var(--nx-body); }

.nx-geb__hinweis {
  margin-top: 26px; font-size: 0.92rem; color: var(--nx-body);
  max-width: 44ch; line-height: 1.65;
}
.nx-geb__hinweis a {
  color: var(--nx-cta); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid rgba(47,107,56,0.28); white-space: nowrap;
  transition: border-color 0.35s var(--nx-e-soft);
}
.nx-geb__hinweis a:hover { border-color: var(--nx-cta); }

/* Karte */
.nx-karte { margin: 0; }
.nx-karte svg {
  display: block; width: 100%; height: auto; border-radius: var(--nx-r);
  box-shadow: 0 24px 54px -28px rgba(19,38,26,0.34);
}
.nx-karte text { font-family: inherit; }

.nx-karte__grund { fill: #f2f7ec; }
.nx-karte__feld  { fill: #e1efd0; }
.nx-karte__wald  { fill: #c9e2ae; }

/* Einsatzgebiet */
.nx-karte__gebiet { fill: #bfe2a0; opacity: 0.52; }
.nx-karte__kante {
  fill: none; stroke: #4e8c2b; stroke-width: 5;
  stroke-dasharray: 22 18; stroke-linecap: round;
}

/* Strassen: helle Fassung, darueber die weisse Fahrbahn */
.nx-karte__strasse-rand path { fill: none; stroke: #dfe5da; stroke-width: 19; stroke-linecap: round; }
.nx-karte__strasse path      { fill: none; stroke: #ffffff; stroke-width: 13; stroke-linecap: round; }
.nx-karte__neben-rand path   { fill: none; stroke: #e4e9df; stroke-width: 12; stroke-linecap: round; }
.nx-karte__neben path        { fill: none; stroke: #ffffff; stroke-width: 7.5; stroke-linecap: round; }

/* Main */
.nx-karte__fluss {
  fill: none; stroke: #8ec5e8; stroke-width: 22;
  stroke-linecap: round; stroke-linejoin: round;
}
.nx-karte__fluss-txt {
  fill: #ffffff; font-size: 29px; font-weight: 700; letter-spacing: 0.12em;
}

/* Baeume und Autobahnschilder */
.nx-karte__baum path { fill: #a9d08a; }
.nx-karte__baum .nx-karte__stamm { fill: none; stroke: #94c073; stroke-width: 3.5; stroke-linecap: round; }
.nx-karte__schild rect { fill: #d6dde2; }
.nx-karte__schild text {
  fill: #5b6771; font-size: 25px; font-weight: 700;
  text-anchor: middle; letter-spacing: 0.02em;
}

/* Ortsmarken */
.nx-karte__pin { cursor: default; outline: none; }
.nx-karte__pin[data-ziel] { cursor: pointer; }
.nx-karte__hit { fill: transparent; }
.nx-karte__ring {
  fill: var(--nx-leaf); opacity: 0; transform-box: fill-box; transform-origin: center;
  transform: scale(0.55);
  transition: opacity 0.45s var(--nx-e-soft), transform 0.45s var(--nx-e);
}
.nx-karte__punkt {
  fill: #fff; stroke: var(--nx-deep); stroke-width: 6;
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.45s var(--nx-e), stroke 0.35s var(--nx-e-soft);
}
.nx-karte__pin--stadt .nx-karte__punkt { fill: var(--nx-deep); stroke: none; }
.nx-karte__txt {
  fill: var(--nx-ink); font-size: 32px; font-weight: 700; letter-spacing: -0.012em;
  paint-order: stroke; stroke: rgba(255,255,255,0.75); stroke-width: 5px; stroke-linejoin: round;
  transition: fill 0.35s var(--nx-e-soft);
}
.nx-karte__pin--stadt .nx-karte__txt { font-size: 44px; font-weight: 800; }
.nx-karte__pin--heim  .nx-karte__txt { fill: var(--nx-deep); font-size: 36px; font-weight: 800; }

.nx-karte__pin:hover .nx-karte__ring,
.nx-karte__pin.is-an .nx-karte__ring { opacity: 0.3; transform: scale(1); }
.nx-karte__pin:hover .nx-karte__punkt,
.nx-karte__pin.is-an .nx-karte__punkt { transform: scale(1.22); }
.nx-karte__pin:hover .nx-karte__txt,
.nx-karte__pin.is-an .nx-karte__txt { fill: var(--nx-cta); }

/* Standort Heidingsfeld */
.nx-karte__heim { fill: var(--nx-deep); }
.nx-karte__haus path {
  fill: none; stroke: #fff; stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.nx-karte__welle {
  fill: none; stroke: var(--nx-leaf); stroke-width: 5;
  transform-box: fill-box; transform-origin: center;
  animation: nx-karte-welle 3.6s var(--nx-e-soft) infinite;
}
@keyframes nx-karte-welle {
  0%   { transform: scale(0.95); opacity: 0.6; }
  70%  { transform: scale(1.95); opacity: 0; }
  100% { transform: scale(1.95); opacity: 0; }
}

.nx-karte__fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  margin-top: 16px; padding: 0 4px;
  font-size: 0.82rem; color: var(--nx-muted);
}
.nx-karte__legende { display: inline-flex; align-items: center; gap: 8px; }
.nx-karte__legende i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: #fff; border: 3px solid var(--nx-cta);
}
.nx-karte__legende i.is-heim { background: var(--nx-deep); border-color: var(--nx-deep); }
.nx-karte__mass { margin-left: auto; opacity: 0.75; }

/* Auf dem Handy ist die Karte klein - Schrift und Marken werden groesser,
   sonst ist nichts mehr zu lesen. */
@media (max-width: 700px) {
  .nx-karte__txt { font-size: 44px; stroke-width: 7px; }
  .nx-karte__pin--stadt .nx-karte__txt { font-size: 56px; }
  .nx-karte__pin--heim  .nx-karte__txt { font-size: 48px; }
  .nx-karte__punkt { stroke-width: 8; }
  .nx-karte__kante { stroke-width: 7; stroke-dasharray: 26 20; }
  .nx-karte__fluss-txt { font-size: 38px; }
  .nx-karte__schild text { font-size: 32px; }
  .nx-karte__strasse-rand path { stroke-width: 24; }
  .nx-karte__strasse path { stroke-width: 17; }
}

@media (max-width: 1000px) {
  .nx-geb__grid { grid-template-columns: 1fr; gap: 38px; }
  .nx-geb .nx-lead, .nx-geb__hinweis { max-width: 62ch; }
  .nx-geb__karte { max-width: 560px; }
}
@media (max-width: 620px) {
  .nx-geb { padding: 58px 0 62px; }
  .nx-geb__grid { gap: 30px; }
  .nx-geb__heim { padding: 13px 15px; gap: 12px; }
  .nx-karte__mass { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-karte__welle { animation: none; opacity: 0.35; }
}

/* ========================== WERKZEUG-SEITEN ============================== */
.nx-page { background: var(--nx-cream); min-height: 70vh; padding: 68px 0 94px; }
.nx-page__head { max-width: 780px; margin-bottom: 38px; }
.nx-page h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin: 0 0 16px; }
.nx-page__head p { color: var(--nx-body); font-size: 1.06rem; line-height: 1.66; }
.nx-crumb { display: flex; gap: 9px; align-items: center; font-size: 0.88rem; color: var(--nx-muted); margin-bottom: 22px; }
.nx-crumb a { color: var(--nx-cta); text-decoration: none; font-weight: 600; }
.nx-card { background: #fff; border-radius: var(--nx-r); border: 1px solid var(--nx-line); padding: 38px 40px 36px; }

#nxCheck:focus, #nxCheck:focus-visible { outline: none; }
.nx-quiz { max-width: 840px; }
.nx-quiz__q { font-size: 1.58rem; margin-bottom: 24px; }
.nx-quiz__opts { display: grid; gap: 11px; }
.nx-quiz__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 20px 23px; cursor: pointer; border: 1.5px solid var(--nx-line);
  border-radius: var(--nx-r-sm); background: #fff; font: inherit; font-size: 1.03rem;
  text-align: left; color: var(--nx-ink); transition: all 0.3s var(--nx-e-soft);
}
.nx-quiz__opt:hover { border-color: var(--nx-cta); background: var(--nx-cream); }
.nx-quiz__opt.is-sel { border-color: var(--nx-cta); background: var(--nx-sage-l); box-shadow: 0 0 0 3px rgba(47,107,56,0.1); }
.nx-quiz__opt svg { width: 18px; height: 18px; color: var(--nx-cta); flex-shrink: 0; }
.nx-score { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; margin-bottom: 32px; }
.nx-score__ring { position: relative; width: 152px; height: 152px; }
.nx-score__ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.nx-score__ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.nx-score__num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.045em; color: var(--nx-ink); }
.nx-score__num small { font-size: 0.9rem; font-weight: 600; color: var(--nx-muted); }
.nx-score h2 { font-size: 1.95rem; margin-bottom: 12px; }
.nx-score p { color: var(--nx-body); line-height: 1.66; font-size: 1.04rem; }
.nx-findings { display: grid; gap: 10px; margin: 28px 0 32px; }
.nx-finding { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: start; padding: 17px 19px; border-radius: var(--nx-r-sm); background: var(--nx-cream); }
.nx-finding__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; }
.nx-finding b { display: block; font-size: 1rem; margin-bottom: 5px; color: var(--nx-ink); }
.nx-finding span { color: var(--nx-body); font-size: 0.94rem; line-height: 1.58; }

.nx-gen { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 24px; align-items: start; }
.nx-gen__out { background: var(--nx-deep); border-radius: var(--nx-r); padding: 36px 36px 32px; color: #fff; }
.nx-gen__out h3 { color: var(--nx-beige); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.nx-gen__meta { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin-bottom: 26px; }
.nx-task { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; padding: 17px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.nx-task b { display: block; color: #fff; font-size: 1.07rem; margin-bottom: 5px; }
.nx-task span { color: rgba(255,255,255,0.62); font-size: 0.89rem; line-height: 1.5; }
.nx-badge { padding: 7px 14px; border-radius: 999px; white-space: nowrap; font-size: 0.78rem; font-weight: 700; background: rgba(122,168,42,0.16); color: var(--nx-beige); border: 1px solid rgba(122,168,42,0.4); }
.nx-freq { display: flex; gap: 8px; flex-wrap: wrap; }
.nx-freq button { padding: 12px 18px; border-radius: 12px; cursor: pointer; border: 1.5px solid var(--nx-line); background: #fff; font: inherit; font-size: 0.94rem; font-weight: 600; transition: all 0.3s var(--nx-e-soft); }
.nx-freq button.is-sel { border-color: var(--nx-cta); background: var(--nx-sage-l); color: var(--nx-cta); }
.nx-gen__empty { color: rgba(255,255,255,0.52); font-size: 0.98rem; line-height: 1.62; padding: 30px 0; }
@media (max-width: 920px) {
  .nx-gen { grid-template-columns: 1fr; }
  .nx-card { padding: 28px 22px 26px; }
  .nx-score { grid-template-columns: 1fr; gap: 20px; justify-items: center; text-align: center; }
}

/* ================= WHATSAPP NEBEN DEM ASSISTENTEN ======================== */
.nx-wa {
  position: fixed; right: 20px; bottom: 24px; z-index: 9991;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 10px 28px rgba(37,211,102,0.42);
  transition: transform 0.3s var(--nx-e), box-shadow 0.3s var(--nx-e);
}
.nx-wa:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 34px rgba(37,211,102,0.5); }
.nx-wa svg { width: 29px; height: 29px; }
@media (max-width: 860px) { .nx-wa { right: 16px; bottom: 20px; width: 50px; height: 50px; } .nx-wa svg { width: 26px; height: 26px; } }

body #dreve-cb-toggle { right: 86px !important; }
@media (max-width: 860px) { body #dreve-cb-toggle { right: 76px !important; bottom: 20px !important; } }

/* ---------- Sprungmarken / Einblendung ---------- */
.nx-anchor { display: block; height: 0; scroll-margin-top: 96px; }
.nx [id] { scroll-margin-top: 96px; }
.nx-rv { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--nx-e-soft), transform 0.85s var(--nx-e-soft); }
.nx-rv.is-in { opacity: 1; transform: none; }
.nx-rv-1 { transition-delay: 0.08s; }
.nx-rv-2 { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) { .nx-rv { opacity: 1; transform: none; transition: none; } }




/* ========================== KOPFZEILE MIT NAVIGATION ==================== */
/* ---------- Lesefortschritt ----------
   Duenne Linie ganz oben, die mitwaechst. Bewegt wird ueber transform,
   nicht ueber die Breite - das laeuft auf der Grafikkarte und loest
   kein Neuberechnen des Layouts aus. */
.nx-fortschritt {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 1300; pointer-events: none; overflow: hidden;
}
.nx-fortschritt i {
  display: block; width: 100%; height: 100%;
  /* Einfarbig im Logogruen: Die Linie laeuft je nach Zustand ueber die
     dunkelgruene Telefonzeile, ueber das Foto oder ueber die weisse
     Leiste. Ein Verlauf wuerde auf einem der drei Untergruende
     verschwinden, dieser Ton haelt sich auf allen.
     Kein Schatten: Der wird von scaleX mitverzerrt und bleibt bei
     Breite 0 als Fleck am linken Rand stehen. */
  background: var(--nx-leaf);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
  opacity: 0;
}
/* Ganz oben verschwindet die Linie sofort - ohne Ausblenden, sonst
   bleibt sie beim Hochscrollen noch einen Moment stehen. */
.nx-fortschritt.is-an i { opacity: 1; }
@media (max-width: 560px) { .nx-fortschritt { height: 2.5px; } }

.nx-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  transition: box-shadow 0.4s var(--nx-e-soft);
}
/* Der weisse Weichzeichner liegt auf einer eigenen Ebene unter dem Inhalt
   und nicht auf der Leiste selbst. Grund: backdrop-filter macht ein Element
   zum Bezugsrahmen fuer alles, was darin position:fixed ist - das Menue
   waere dann nur so hoch wie die Leiste statt bildschirmfuellend. */
.nx-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: 0; pointer-events: none;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.4s var(--nx-e-soft);
}
.nx-head.is-fest::before { opacity: 1; }
.nx-head__inner { display: flex; align-items: center; gap: 28px; padding: 16px 0;
  transition: padding 0.4s var(--nx-e-soft); }
.nx-head.is-fest .nx-head__inner { padding: 10px 0; }

/* Logo: hell ueber dem Foto, dunkel sobald die Leiste weiss wird */
.nx-head__logo { position: relative; display: block; flex-shrink: 0; line-height: 0; }
.nx-head__logo img {
  width: 150px; height: auto; display: block;
  transition: opacity 0.35s var(--nx-e-soft), width 0.4s var(--nx-e-soft);
}
.nx-head__logo--dunkel { position: absolute; inset: 0; opacity: 0; }
.nx-head.is-fest .nx-head__logo--hell   { opacity: 0; }
.nx-head.is-fest .nx-head__logo--dunkel { opacity: 1; }
.nx-head.is-fest .nx-head__logo img { width: 128px; }

/* Navigation */
.nx-head__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nx-head__nav > a {
  padding: 10px 14px; border-radius: 10px;
  color: rgba(255,255,255,0.9); text-decoration: none;
  font-size: 0.96rem; font-weight: 600; white-space: nowrap;
  transition: color 0.3s var(--nx-e-soft), background 0.3s var(--nx-e-soft);
}
.nx-head__nav > a:hover { color: #fff; background: rgba(255,255,255,0.12); }
.nx-head.is-fest .nx-head__nav > a { color: var(--nx-body); }
.nx-head.is-fest .nx-head__nav > a:hover { color: var(--nx-cta); background: var(--nx-leaf-l); }
.nx-head__nav-cta, .nx-head__close { display: none; }

/* Telefon und Aktion rechts */
.nx-head__tools { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nx-head__tel {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; padding: 6px 4px;
  transition: transform 0.3s var(--nx-e-soft);
}
.nx-head__tel:hover { transform: translateY(-1px); }
.nx-head__tel svg {
  width: 36px; height: 36px; padding: 9px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.14); color: #fff;
  transition: background 0.3s var(--nx-e-soft), color 0.3s var(--nx-e-soft);
}
.nx-head__tel span { display: flex; flex-direction: column; line-height: 1.2; }
.nx-head__tel small { font-size: 0.72rem; color: rgba(255,255,255,0.65); }
.nx-head__tel b { font-size: 1.04rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.nx-head.is-fest .nx-head__tel svg { background: var(--nx-leaf-l); color: var(--nx-cta); }
.nx-head.is-fest .nx-head__tel small { color: var(--nx-muted); }
.nx-head.is-fest .nx-head__tel b { color: var(--nx-ink); }

.nx-head__cta { min-height: 50px; padding: 0 24px; font-size: 0.95rem; }

/* Zustand: weisse Leiste nach dem Scrollen */
.nx-head.is-fest { box-shadow: 0 6px 28px rgba(15,26,22,0.08); }

/* Hamburger */
.nx-head__burger {
  display: none; width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12);
  cursor: pointer; padding: 0; position: relative;
  transition: all 0.3s var(--nx-e-soft);
}
.nx-head__burger span {
  display: block; position: absolute; left: 13px; width: 20px; height: 2px;
  border-radius: 2px; background: #fff;
  transition: all 0.35s var(--nx-e-soft);
}
.nx-head__burger span:nth-child(1) { top: 16px; }
.nx-head__burger span:nth-child(2) { top: 22px; }
.nx-head__burger span:nth-child(3) { top: 28px; }
.nx-head.is-fest .nx-head__burger { border-color: var(--nx-line); background: #fff; }
.nx-head.is-fest .nx-head__burger span { background: var(--nx-ink); }

/* Platzhalter, damit der Inhalt nicht unter der Leiste beginnt */
.nx-head-platz { height: 0; }

/* Sprungmarken duerfen nicht unter der festen Leiste landen */
html { scroll-padding-top: calc(var(--nx-kopf-h, 120px) + 18px); }
.nx-page, body > main > section:first-child:not(.nx-hero) { padding-top: calc(var(--nx-kopf-h, 120px) + 34px); }

@media (max-width: 1180px) {
  .nx-head__nav > a { padding: 10px 10px; font-size: 0.92rem; }
  .nx-head__inner { gap: 18px; }
  .nx-head__tel small { display: none; }
}
@media (max-width: 1020px) {
  .nx-head__tel span { display: none; }
  .nx-head__tel { padding: 0; }
}
@media (max-width: 900px) {
  .nx-head__burger { display: block; }

  /* Mobil schlicht halten: ganz oben eine duenne Zeile mit der Nummer,
     darunter Logo links, Angebotsknopf leicht nach innen gerueckt, Menue rechts. */
  .nx-head__inner {
    display: grid; align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px; padding: 8px 0 9px;
  }
  .nx-head.is-fest .nx-head__inner { padding: 7px 0 8px; }
  .nx-head__logo   { grid-area: auto; }
  .nx-head__tools  { display: contents; }
  .nx-head__burger { grid-column: 3; }

  /* Telefonzeile: duenn, klein, ganz oben */
  .nx-head__tel {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 0 16px; height: 28px; border-radius: 0;
    background: var(--nx-deep); color: #fff;
  }
  .nx-head__tel:hover { transform: none; }
  .nx-head__tel span { display: flex; flex-direction: row; align-items: baseline; gap: 6px; }
  .nx-head__tel small { display: inline; font-size: 0.7rem; color: rgba(255,255,255,0.6); }
  .nx-head__tel b { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; color: #fff; }
  .nx-head__tel svg {
    width: 15px; height: 15px; padding: 0; background: none;
    color: var(--nx-leaf); border-radius: 0;
  }
  .nx-head.is-fest .nx-head__tel { background: var(--nx-deep); }
  .nx-head.is-fest .nx-head__tel svg { background: none; color: var(--nx-leaf); }
  .nx-head.is-fest .nx-head__tel small { color: rgba(255,255,255,0.6); }
  .nx-head.is-fest .nx-head__tel b { color: #fff; }

  /* Die duenne Zeile braucht oben Platz */
  .nx-head__inner { margin-top: 28px; }

  .nx-head__cta {
    display: inline-flex; grid-column: 2; justify-self: center;
    margin: 0 0 0 10px; min-height: 40px; padding: 0 17px;
    font-size: 0.86rem; white-space: nowrap;
  }

}
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
}
@media (max-width: 900px) {
  .nx-head__nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    /* ueber Telefonzeile, Angebotsknopf und Burger */
    z-index: 400;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 6px; padding: 92px 22px 32px; margin: 0;
    background: var(--nx-deep);
    transform: translateX(100%); transition: transform 0.45s var(--nx-e-soft);
    box-shadow: -20px 0 60px rgba(8,18,14,0.3);
    overflow-y: auto;
  }
  .nx-head__nav.is-offen { transform: translateX(0); }
  .nx-head__nav > a { color: #fff !important; font-size: 1.06rem; padding: 14px 16px; }
  .nx-head__nav > a:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
  .nx-head__nav-cta {
    display: block !important; margin-top: 14px; text-align: center;
    background: var(--nx-beige); color: var(--nx-deep) !important;
    border-radius: 999px; padding: 16px 20px !important; font-weight: 700;
  }
  .nx-head__close {
    display: block !important; position: absolute; top: 20px; right: 18px;
    width: 42px; height: 42px; border: none; border-radius: 12px;
    background: rgba(255,255,255,0.12); color: #fff; font-size: 1.7rem; line-height: 1;
    cursor: pointer;
  }
  .nx-navsperre { overflow: hidden; }
  /* Bei offenem Menue treten die schwebenden Knoepfe zurueck */
  .nx-navsperre .nx-wa,
  .nx-navsperre #dreve-cb-toggle {
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s var(--nx-e-soft);
  }
  .nx-navsperre::after {
    content: ""; position: fixed; inset: 0; z-index: 1190;
    background: rgba(8,18,14,0.5); backdrop-filter: blur(2px);
  }
}
@media (max-width: 560px) {
  .nx-head__logo img { width: 96px; }
  .nx-head.is-fest .nx-head__logo img { width: 92px; }
  .nx-head__burger { width: 40px; height: 40px; border-radius: 11px; }
  .nx-head__burger span { left: 10px; width: 19px; }
  .nx-head__burger span:nth-child(1) { top: 13px; }
  .nx-head__burger span:nth-child(2) { top: 19px; }
  .nx-head__burger span:nth-child(3) { top: 25px; }
  .nx-head__cta { font-size: 0.83rem; padding: 0 15px; margin-left: 6px; }
  .nx-page, body > main > section:first-child:not(.nx-hero) { padding-top: calc(var(--nx-kopf-h, 100px) + 22px); }
}
@media (max-width: 390px) {
  .nx-head__logo img, .nx-head.is-fest .nx-head__logo img { width: 86px; }
  .nx-head__cta { font-size: 0.79rem; padding: 0 12px; margin-left: 4px; min-height: 38px; }
  .nx-head__tel b { font-size: 0.75rem; }
  .nx-head__tel small { display: none; }
}

/* ========================== GLANZ AM ANGEBOTS-KNOPF =================== */
/* Alle vier Sekunden wandert ein metallischer Lichtstreifen ueber den Knopf.
   Bewegt wird nur per transform - das laeuft auf der Grafikkarte und ruckelt
   deshalb nicht. */
.nx-btn--puls { position: relative; overflow: hidden; isolation: isolate; }
.nx-btn--puls::after {
  content: "";
  position: absolute; top: -60%; bottom: -60%; left: -45%; width: 38%;
  background: linear-gradient(90deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,0.22) 28%,
              rgba(255,255,255,0.72) 50%,
              rgba(255,255,255,0.22) 72%,
              rgba(255,255,255,0) 100%);
  transform: skewX(-19deg) translate3d(0, 0, 0);
  will-change: transform;
  pointer-events: none; z-index: 1;
  animation: nx-glanz 4s cubic-bezier(0.35, 0.1, 0.25, 1) infinite;
}
@keyframes nx-glanz {
  0%   { transform: skewX(-19deg) translate3d(0, 0, 0); }
  21%  { transform: skewX(-19deg) translate3d(420%, 0, 0); }
  100% { transform: skewX(-19deg) translate3d(420%, 0, 0); }
}
.nx-btn--puls:hover::after, .nx-btn--puls:focus-visible::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .nx-btn--puls::after { animation: none; opacity: 0; } }

/* ========================== ZURUECK, OBEN LINKS IM KAESTCHEN ============= */
.nx-kopf { display: flex; min-height: 26px; margin-bottom: 20px; }
.nx-zurueck {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: -6px; padding: 6px 10px 6px 6px;
  background: none; border: none; border-radius: 9px;
  font: inherit; font-size: 0.89rem; font-weight: 600;
  color: var(--nx-muted); text-decoration: none; cursor: pointer;
  transition: color 0.34s var(--nx-e), background 0.34s var(--nx-e);
}
.nx-zurueck svg { width: 15px; height: 15px; transition: transform 0.34s var(--nx-e); }
.nx-zurueck:hover { color: var(--nx-cta); background: var(--nx-leaf-l); }
.nx-zurueck:hover svg { transform: translateX(-2px); }
.nx-zurueck:focus-visible { outline: 2px solid var(--nx-cta); outline-offset: 2px; }

/* In der Dankesansicht steht der Text mittig – der Knopf bleibt trotzdem links */
.nx-done .nx-kopf { justify-content: flex-start; text-align: left; }

/* ========================== DANKESSEITE ================================= */
.nx-danke { padding: 84px 0 96px; }
.nx-danke__box {
  background: #fff; border: 1px solid var(--nx-line); border-radius: var(--nx-r);
  padding: 54px 40px 48px; max-width: 760px; margin: 0 auto;
  box-shadow: 0 24px 60px rgba(15,26,22,0.06);
}
.nx-danke__box h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 14px; }
.nx-danke__weiter { max-width: 980px; margin: 74px auto 0; text-align: center; }
.nx-danke__weiter h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 26px; }
.nx-danke__karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.nx-danke__karte {
  display: block; text-align: left; text-decoration: none;
  padding: 26px 26px 24px; border-radius: 20px;
  background: var(--nx-cream-2); border: 1px solid var(--nx-line);
  transition: all 0.34s var(--nx-e);
}
.nx-danke__karte:hover { transform: translateY(-3px); border-color: var(--nx-cta); background: var(--nx-leaf-l); }
.nx-danke__karte b { display: block; color: var(--nx-ink); font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.nx-danke__karte span { color: var(--nx-body); font-size: 0.94rem; line-height: 1.6; }
.nx-danke__zurueck { margin-top: 34px; }
.nx-danke__zurueck a { color: var(--nx-cta); font-weight: 700; text-decoration: none; }
@media (max-width: 820px) {
  .nx-danke { padding: 56px 0 72px; }
  .nx-danke__box { padding: 36px 24px 34px; }
  .nx-danke__karten { grid-template-columns: 1fr; }
  .nx-danke__weiter { margin-top: 48px; }
}


/* ======================================================================
   UNTERSEITEN IM GLEICHEN DESIGN WIE DIE STARTSEITE
   Die Leistungs-, Orts- und Ratgeberseiten benutzen noch die aelteren
   Klassen aus styles.css. Dieser Block legt die Gestaltung der Startseite
   darueber, damit die ganze Seite gleich aussieht.
   ====================================================================== */

/* ---- Kopfbereich der Unterseite ---- */
.service-page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nx-kopf-h, 150px) + 54px) 0 66px;
  background: linear-gradient(168deg, var(--nx-deep) 0%, #1f4c2c 48%, var(--nx-mid) 100%);
  color: #fff;
}
.service-page-hero::after {
  content: ""; position: absolute; right: -14%; top: -28%;
  width: 62vw; height: 62vw; max-width: 760px; max-height: 760px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(122,168,42,0.3), rgba(122,168,42,0) 70%);
  pointer-events: none;
}
.service-page-hero > .container { position: relative; z-index: 1; max-width: 1180px; }
.service-page-hero h1 {
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem);
  line-height: 1.07; letter-spacing: -0.035em; font-weight: 800;
  color: #fff; margin: 0 0 20px; max-width: 19ch;
}
.service-page-intro {
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.16rem); line-height: 1.68;
  color: rgba(255,255,255,0.84); max-width: 60ch; margin: 0 0 30px;
}
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.84rem; margin-bottom: 26px; color: rgba(255,255,255,0.55);
}
.breadcrumb a {
  color: rgba(255,255,255,0.72); text-decoration: none;
  transition: color 0.35s var(--nx-e-soft);
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,0.4); }

/* ---- Vertrauensleiste unter dem Kopf ---- */
.trust-bar { background: var(--nx-cream-2); border-bottom: 1px solid var(--nx-line); }
.trust-bar-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px;
  padding: 17px 0; justify-content: flex-start;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.87rem; font-weight: 600; color: var(--nx-body);
}
.trust-item svg { color: var(--nx-cta); }
.trust-stars { color: var(--nx-star); letter-spacing: 0.08em; }

/* ---- Abschnitte ---- */
.service-page-hero + .trust-bar + .section,
.section { padding: 74px 0; background: var(--nx-cream); }
.section-dark {
  padding: 74px 0; color: #fff;
  background: linear-gradient(165deg, var(--nx-deep) 0%, #1f4c2c 60%, var(--nx-mid) 100%);
}
.section h2, .section-dark h2 {
  font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.55rem);
  line-height: 1.12; letter-spacing: -0.032em; font-weight: 800; margin: 0 0 18px;
}
.section h2 { color: var(--nx-ink); }
.section-dark h2 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.8); }

.service-page-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 54px; align-items: start;
}
.service-page-content > h2:first-child { margin-top: 0; }
.service-page-content p { line-height: 1.75; color: var(--nx-body); }

/* ---- Foto im Seiteninhalt ---- */
.seiten-bild { margin: 30px 0 34px; }
.seiten-bild img {
  width: 100%; height: auto; max-height: 420px; object-fit: cover;
  border-radius: var(--nx-r); display: block;
  box-shadow: 0 20px 44px -30px rgba(19,38,26,0.45);
}
.seiten-bild figcaption {
  margin-top: 12px; font-size: 0.89rem; line-height: 1.6;
  color: var(--nx-muted); max-width: 60ch;
  padding-left: 15px; border-left: 3px solid var(--nx-leaf);
}
@media (max-width: 680px) {
  .seiten-bild { margin: 24px 0 26px; }
  .seiten-bild img { max-height: 280px; }
  .seiten-bild figcaption { font-size: 0.85rem; padding-left: 12px; }
}

/* ---- Leistungskacheln ---- */
.detail-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0 8px; }
.detail-service-item {
  padding: 24px 22px 22px; border-radius: var(--nx-r-sm);
  background: #fff; border: 1px solid var(--nx-line);
  transition: transform 0.4s var(--nx-e), border-color 0.4s var(--nx-e-soft), box-shadow 0.4s var(--nx-e-soft);
}
.detail-service-item:hover {
  transform: translateY(-3px); border-color: rgba(122,168,42,0.55);
  box-shadow: 0 18px 38px -28px rgba(19,38,26,0.45);
}
.detail-service-item h3 {
  font-size: 1.06rem; font-weight: 800; letter-spacing: -0.018em;
  color: var(--nx-ink); margin: 0 0 9px;
}
.detail-service-item p { font-size: 0.93rem; line-height: 1.65; color: var(--nx-body); margin: 0; }

/* ---- Ablauf in Schritten ---- */
.process-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.process-step {
  padding: 26px 20px 22px; border-radius: var(--nx-r-sm);
  background: #fff; border: 1px solid var(--nx-line);
}
.section-dark .process-step { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
.process-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--nx-leaf); color: var(--nx-deep);
  font-weight: 900; font-size: 1.02rem; margin-bottom: 15px;
}
/* Manche Schritte tragen ein Wort statt einer Zahl - dann breiter und als Pille */
.process-num--wort, .process-num--saison {
  width: auto; min-width: 0; height: auto; border-radius: 999px;
  padding: 7px 15px; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.055em; text-transform: uppercase; justify-self: start;
  display: inline-flex; background: var(--nx-leaf-l); color: var(--nx-deep);
}
/* Breite Wortmarken gehoeren ueber den Text, nicht daneben - sonst bleiben
   in einer vierspaltigen Reihe nur noch rund 80 px fuer den Absatz.
   Und wo Wortmarken stehen, ist der Text laenger: dann lieber zwei breite
   Spalten als vier schmale. */
.process-step:has(.process-num--wort),
.process-step:has(.process-num--saison) { flex-direction: column; align-items: flex-start; }
.process-steps:has(.process-num--wort),
.process-steps:has(.process-num--saison) {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.process-num--saison[data-saison="fruehjahr"] { background: #eaf4dc; color: #3f6b1a; }
.process-num--saison[data-saison="sommer"]    { background: #fdf3d6; color: #7a5a00; }
.process-num--saison[data-saison="herbst"]    { background: #f8ebdd; color: #8a4a1a; }
.process-num--saison[data-saison="winter"]    { background: #e6eef2; color: #2b5566; }
.section-dark .process-num--wort, .section-dark .process-num--saison {
  background: rgba(255,255,255,0.14); color: #fff;
}
.process-step h3 { font-size: 1rem; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.015em; }
.process-step p { font-size: 0.9rem; line-height: 1.62; margin: 0; }

/* ---- Einsatzgebiet-Chips ---- */
.service-area { margin-top: 36px; }
.area-block + .area-block { margin-top: 24px; }
.area-block h3 {
  font-size: 0.74rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--nx-muted); margin: 0 0 12px; font-weight: 700;
}
.section-dark .area-block h3 { color: rgba(255,255,255,0.55); }
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chip, .area-chip-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.88rem; font-weight: 600; color: var(--nx-ink);
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--nx-line); background: #fff;
  transition: color 0.35s var(--nx-e-soft), border-color 0.35s var(--nx-e-soft),
              background 0.35s var(--nx-e-soft), transform 0.35s var(--nx-e-soft);
}
.section-dark .area-chip, .section-dark .area-chip-link {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #fff;
}
.area-chip-link:hover {
  color: var(--nx-deep); border-color: var(--nx-leaf);
  background: var(--nx-leaf-l); transform: translateY(-1px);
}
.area-chip-strong { background: var(--nx-deep); border-color: var(--nx-deep); color: #fff; font-weight: 700; }
.area-note { margin-top: 16px; font-size: 0.89rem; color: var(--nx-muted); line-height: 1.6; }

/* ---- Bewertung auf der Leistungsseite ---- */
.service-review-card, .review-card {
  padding: 28px 26px 24px; border-radius: var(--nx-r);
  background: #fff; border: 1px solid var(--nx-line);
  box-shadow: 0 18px 40px -30px rgba(19,38,26,0.4);
}
.review-stars { color: var(--nx-star); letter-spacing: 0.1em; margin-bottom: 12px; }
.review-text { font-size: 1.02rem; line-height: 1.7; color: var(--nx-ink); }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.review-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800;
  background: var(--nx-leaf-l); color: var(--nx-deep);
}
.review-name { font-weight: 700; color: var(--nx-ink); font-size: 0.95rem; }
.review-source { font-size: 0.82rem; color: var(--nx-muted); }
.service-review-note { margin-top: 14px; font-size: 0.85rem; color: var(--nx-muted); }

/* ---- Fragen auf der Unterseite: gleiche Optik wie auf der Startseite ---- */
.faq-section { margin-top: 52px; }
.faq-section > h2 { margin-bottom: 22px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--nx-line); border-radius: var(--nx-r-sm);
  background: #fff; overflow: hidden;
  transition: border-color 0.4s var(--nx-e-soft), box-shadow 0.4s var(--nx-e-soft);
}
.faq-item[open] { border-color: rgba(122,168,42,0.5); box-shadow: 0 14px 34px -26px rgba(19,38,26,0.4); }
.faq-question {
  display: flex; align-items: center; gap: 18px; list-style: none; cursor: pointer;
  padding: 19px 22px; font-size: 1.02rem; font-weight: 700;
  letter-spacing: -0.015em; color: var(--nx-ink);
  transition: color 0.35s var(--nx-e-soft);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ""; }
.faq-question:hover { color: var(--nx-cta); }
.faq-question::after {
  content: ""; flex: none; margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--nx-leaf-l) no-repeat center/13px 13px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b38' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: background-color 0.4s var(--nx-e-soft), transform 0.5s var(--nx-e);
}
.faq-item[open] .faq-question { color: var(--nx-deep); }
.faq-item[open] .faq-question::after {
  background-color: var(--nx-cta); transform: rotate(180deg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.faq-answer { padding: 0 22px 20px; animation: nx-faq-auf 0.42s var(--nx-e-soft) both; }
.faq-answer p { font-size: 0.96rem; line-height: 1.72; color: var(--nx-body); margin: 0; max-width: 64ch; }
@keyframes nx-faq-auf {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Spalte rechts ---- */
.service-page-aside { position: sticky; top: calc(var(--nx-kopf-h, 120px) + 22px); display: grid; gap: 16px; }
.aside-box {
  padding: 24px 22px 22px; border-radius: var(--nx-r-sm);
  background: #fff; border: 1px solid var(--nx-line);
}
.aside-box h3 {
  font-size: 1.02rem; font-weight: 800; letter-spacing: -0.018em;
  color: var(--nx-ink); margin: 0 0 10px;
}
.aside-box p { font-size: 0.91rem; line-height: 1.62; color: var(--nx-body); }
.aside-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aside-links a {
  display: block; padding: 8px 0; font-size: 0.92rem; font-weight: 600;
  color: var(--nx-body); text-decoration: none;
  border-bottom: 1px solid var(--nx-line);
  transition: color 0.35s var(--nx-e-soft), padding 0.35s var(--nx-e-soft);
}
.aside-links li:last-child a { border-bottom: 0; }
.aside-links a:hover { color: var(--nx-cta); padding-left: 5px; }

/* ---- Knoepfe auf den Unterseiten ---- */
.service-page-hero .btn, .section .btn, .section-dark .btn, .aside-box .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.4s var(--nx-e), background 0.4s var(--nx-e-soft),
              color 0.4s var(--nx-e-soft), border-color 0.4s var(--nx-e-soft);
}
.service-page-hero .btn:hover, .section .btn:hover,
.section-dark .btn:hover, .aside-box .btn:hover { transform: translateY(-2px); }
.btn-accent { background: var(--nx-leaf); color: var(--nx-deep); }
.btn-accent:hover { background: #88bb30; }
.service-page-hero .btn-ghost, .section-dark .btn-ghost {
  background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.3);
}
.service-page-hero .btn-ghost:hover, .section-dark .btn-ghost:hover { background: rgba(255,255,255,0.18); }
.section .btn-ghost { background: #fff; color: var(--nx-ink); border-color: var(--nx-line); }
.section .btn-ghost:hover { border-color: var(--nx-cta); color: var(--nx-cta); }
.btn-full { width: 100%; }

@media (max-width: 1000px) {
  .service-page-layout { grid-template-columns: 1fr; gap: 40px; }
  .service-page-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .service-page-hero { padding: calc(var(--nx-kopf-h, 130px) + 30px) 0 46px; }
  .section, .section-dark { padding: 56px 0; }
  .detail-services, .process-steps { grid-template-columns: 1fr; }
  .faq-question { padding: 16px 16px; gap: 12px; font-size: 0.99rem; }
  .faq-question::after { width: 30px; height: 30px; }
  .faq-answer { padding: 0 16px 17px; }
  .trust-bar-inner { gap: 10px 20px; padding: 14px 0; }
  .trust-item { font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-answer { animation: none; }
}

/* ── WISSENSBLOCK: Hinweiskasten + Quellenzeile ──────────────────────
   Für die Rechts- und Fachhinweise auf den Leistungsseiten. Der Kasten
   greift die Logofarbe als linke Kante auf, damit er sich vom laufenden
   Text abhebt, ohne wie eine Werbefläche zu wirken. */
.service-why .service-highlight,
.service-page-content > .service-highlight {
  margin: 22px 0 4px;
  padding: 18px 22px;
  background: var(--nx-leaf-l, #f5f8f3);
  border-left: 4px solid var(--nx-leaf, #7aa82a);
  border-radius: 10px;
}
.service-why .service-highlight strong,
.service-page-content > .service-highlight strong {
  display: block;
  font-size: 0.97rem;
  font-weight: 800;
  color: var(--nx-deep, #0f1a16);
  margin-bottom: 6px;
}
.service-why .service-highlight p,
.service-page-content > .service-highlight p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
}
.service-hinweis {
  margin-top: 18px;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-secondary, #5b6b63);
}
@media (max-width: 560px) {
  .service-why .service-highlight,
  .service-page-content > .service-highlight { padding: 16px 18px; }
}

/* ── ANKER DER LEISTUNGS-KACHELN ─────────────────────────────────────
   Die Kacheln sind jetzt direkt verlinkbar (…#leistung-xy) und stehen
   so auch in der Auszeichnung. Ohne scroll-margin-top landet das Ziel
   beim Sprung unter der festen Kopfzeile. */
[id^="leistung-"], .nx [id^="leistung-"] { scroll-margin-top: 124px; }
@media (max-width: 900px) { [id^="leistung-"], .nx [id^="leistung-"] { scroll-margin-top: 96px; } }