/* =========================================================================
   Schlüsseldienst Naumburg — dedicated stylesheet
   Uses ONLY tokens defined in global.css (colors, fonts, radii, shadows).
   No new colors or fonts are introduced on this page.
   Namespace: all classes prefixed "nb-" to avoid collisions with other pages.
   ========================================================================= */

.nb-page{ background:var(--c-bg); }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

.nb *{ box-sizing:border-box; }

.nb h1, .nb h2, .nb h3{
  font-family:var(--font-display);
  color: #ffffff;
  margin:0;
  line-height:1.15;
}

.nb p{
  font-family:var(--font-body);
  color:var(--c-text-soft);
  line-height:1.7;
  margin:0;
}

/* ---------- shared: eyebrow / section head ---------- */
.nb-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:1rem;
}
.nb-eyebrow--alt{ color:var(--c-text-soft); }
.nb-eyebrow--onDark{ color:var(--primary); }
.nb-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px var(--primary-l);
  animation:nb-pulse 1.8s ease-in-out infinite;
}
@keyframes nb-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}

.nb-section-head{
  max-width:640px;
  margin:0 0 3rem;
}
.nb-section-head h2{
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  font-weight:800;
  margin-bottom:.9rem;
  color: #4c4c4c;
}
.nb-section-head p{ font-size:1.02rem; }
.nb-section-head--onDark h2{ color:#ffffff; }
.nb-section-head--onDark p{ color:rgba(255,255,255,.72); }

/* ---------- buttons ---------- */
.nb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.95rem 1.7rem;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.98rem;
  text-decoration:none;
  transition:transform var(--transition) ease, box-shadow var(--transition) ease, background var(--transition) ease;
  border:2px solid transparent;
  white-space:nowrap;
}
.nb-btn--primary{
  background:var(--primary);
  color:#ffffff;
  box-shadow:var(--shadow-glow);
}
.nb-btn--primary:hover{ transform:translateY(-2px); background:var(--primary-hover); }
.nb-btn--ghost{
  background:transparent;
  color: #ffffff;
  border-color:var(--c-border);
}
.nb-btn--ghost:hover{ border-color:var(--primary); color:var(--primary); }
.nb-btn--wa{
  background:var(--btn-wh);
  color:#ffffff;
}
.nb-btn--wa:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.nb-btn--lg{ padding:1.15rem 2.2rem; font-size:1.05rem; }

/* =========================================================================
   HERO — split "dispatch console" layout, unique to this page
   ========================================================================= */
.nb-hero{
  background:var(--c-dark);
  padding:5rem 0 4rem;
  position:relative;
  overflow:hidden;
}
.nb-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 400px at 85% 10%, var(--primary) 0%, transparent 60%);
  opacity:.14;
  pointer-events:none;
}
.nb-hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:3rem;
  align-items:center;
}
.nb-hero__title{
  font-size:clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight:800;
  color:#ffffff;
  margin-bottom:1.3rem;
}
.nb-highlight{ color:var(--primary); }
.nb-hero__lead{
  color:rgba(255,255,255,.78);
  font-size:1.08rem;
  max-width:540px;
  margin-bottom:2rem;
}
.nb-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:2rem;
}
.nb-hero__facts{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1.6rem;
  margin:0;
  padding:0;
}
.nb-hero__facts li{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:rgba(255,255,255,.85);
  font-size:.92rem;
  font-family:var(--font-display);
  font-weight:600;
}
.nb-hero__facts i{ color:var(--primary); font-size:1.1rem; }

/* Dispatch card */
.nb-dispatch{
  background:var(--c-dark-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  padding:2rem;
  box-shadow:var(--shadow-lg);
  position:relative;
}
.nb-dispatch__head{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:rgba(255,255,255,.65);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:1rem;
}
.nb-dispatch__head i{ color:var(--primary); }
.nb-dispatch__time{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.6rem, 6vw, 3.4rem);
  color:#ffffff;
  line-height:1;
}
.nb-dispatch__time span{
  font-size:1.1rem;
  font-weight:700;
  color:var(--primary);
  margin-left:.4rem;
}
.nb-dispatch__label{
  color:rgba(255,255,255,.55);
  font-size:.85rem;
  margin:.5rem 0 1.6rem;
}
.nb-dispatch__steps{
  list-style:none;
  margin:0 0 1.6rem;
  padding:0;
  display:grid;
  gap:.85rem;
}
.nb-dispatch__steps li{
  display:flex;
  align-items:center;
  gap:.8rem;
  color:rgba(255,255,255,.85);
  font-size:.92rem;
}
.nb-dispatch__num{
  width:24px; height:24px;
  flex-shrink:0;
  border-radius:50%;
  background:rgba(239,73,51,.18);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:.78rem;
}
.nb-dispatch__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--primary);
  color:#fff;
  padding:.6rem 1rem;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
}

/* =========================================================================
   TRUST STRIP
   ========================================================================= */
.nb-trust{
  background:var(--c-bg-alt);
  border-bottom:1px solid var(--c-border);
  padding:1.6rem 0;
}
.nb-trust__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1rem;
}
.nb-trust__item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.9rem;
  color:var(--c-text);
  text-align:center;
}
.nb-trust__item i{ color:var(--primary); font-size:1.2rem; }

/* =========================================================================
   SERVICES — bento grid
   ========================================================================= */
.nb-services{ padding:5.5rem 0; }
.nb-bento{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:1fr;
  gap:1.4rem;
}
.nb-bento__card{
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:2rem;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition) ease, box-shadow var(--transition) ease, border-color var(--transition) ease;
}
.nb-bento__card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--primary-l);
}
.nb-bento__card i{
  display:inline-flex;
  width:52px; height:52px;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius);
  background:var(--primary-l);
  color:var(--primary);
  font-size:1.4rem;
  margin-bottom:1.1rem;
}
.nb-bento__card h3{
  font-size:1.15rem;
  font-weight:800;
  margin-bottom:.6rem;
}
.nb-bento__card p{ font-size:.94rem; }
.nb-bento__card--lg{ grid-column:span 1; grid-row:span 2; background:var(--c-dark); border-color:var(--c-dark); }
.nb-bento__card--lg h3, .nb-bento__card--lg p{ color:#fff; }
.nb-bento__card--lg p{ color:rgba(255,255,255,.72); }
.nb-bento__card--lg i{ background:rgba(239,73,51,.2); }
.nb-bento__card--wide{ grid-column:span 2; }

/* =========================================================================
   RESPONSE TIMELINE — dark section, vertical rail
   ========================================================================= */
.nb-timeline{
  background:var(--c-dark);
  padding:5.5rem 0;
}
.nb-timeline__rail{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  display:grid;
  gap:2.4rem;
}
.nb-timeline__rail::before{
  content:"";
  position:absolute;
  left:23px;
  top:8px;
  bottom:8px;
  width:2px;
  background:rgba(255,255,255,.12);
}
.nb-timeline__rail > li{
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:1.4rem;
  align-items:start;
}
.nb-timeline__marker{
  position:relative;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  box-shadow:var(--shadow-glow);
  z-index:1;
}
.nb-timeline__time{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--primary);
  text-transform:uppercase;
  margin-bottom:.4rem;
}
.nb-timeline__body h3{
  color:#fff;
  font-size:1.15rem;
  font-weight:800;
  margin-bottom:.4rem;
}
.nb-timeline__body p{
  color:rgba(255,255,255,.68);
  font-size:.94rem;
  max-width:520px;
}

/* =========================================================================
   PRICING
   ========================================================================= */
.nb-pricing{ padding:5.5rem 0; background:var(--c-bg-alt); }
.nb-price-list{
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  background:var(--c-bg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.nb-price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.6rem;
  border-bottom:1px solid var(--c-border);
}
.nb-price-row:last-child{ border-bottom:none; }
.nb-price-label{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--c-text);
  font-size:.98rem;
}
.nb-price-pill{
  flex-shrink:0;
  background:var(--primary-l);
  color:var(--primary);
  font-family:var(--font-display);
  font-weight:800;
  font-size:.92rem;
  padding:.4rem 1rem;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
.nb-price-note{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  margin-top:1.2rem;
  font-size:.86rem;
  color:var(--c-muted);
}
.nb-price-note i{ margin-top:.15rem; }

/* =========================================================================
   AREA / MAP
   ========================================================================= */
.nb-area{ padding:5.5rem 0; }
.nb-area__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.nb-area__chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin:1.6rem 0 2rem;
  padding:0;
}
.nb-area__chips li{
  display:flex;
  align-items:center;
  gap:.45rem;
  background:var(--c-bg-alt);
  border:1px solid var(--c-border);
  color:var(--c-text);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.88rem;
  padding:.5rem .95rem;
  border-radius:var(--radius-pill);
}
.nb-area__chips i{ color:var(--primary); font-size:.9rem; }
.nb-area__cta{ display:flex; flex-wrap:wrap; gap:1rem; }

.nb-area__map{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--c-border);
}
.nb-leaflet-map{
  width:100%;
  height:420px;
}

/* =========================================================================
   FAQ
   ========================================================================= */
.nb-faq{ padding:5.5rem 0; background:var(--c-bg-alt); }
.nb-faq__list{ display:grid; gap:1rem; max-width:820px; }
.nb-faq__item{
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:.3rem 1.4rem;
}
.nb-faq__item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--c-text);
  font-size:1rem;
}
.nb-faq__item summary::-webkit-details-marker{ display:none; }
.nb-faq__item summary i{
  flex-shrink:0;
  color:var(--primary);
  transition:transform var(--transition) ease;
}
.nb-faq__item[open] summary i{ transform:rotate(180deg); }
.nb-faq__body{ padding:0 0 1.2rem; }
.nb-faq__body p{ font-size:.95rem; }

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.nb-final-cta{
  background:var(--primary);
  padding:3.2rem 0;
}
.nb-final-cta__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
}
.nb-final-cta h2{
  color:#fff;
  font-size:clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight:800;
  margin-bottom:.4rem;
}
.nb-final-cta p{ color:rgba(255,255,255,.85); font-size:1rem; }
.nb-final-cta .nb-btn--primary{
  background:#ffffff;
  color:var(--primary);
  box-shadow:none;
}
.nb-final-cta .nb-btn--primary:hover{ background:var(--c-bg-alt); }

/* =========================================================================
   Floating "scroll to top" visibility (scoped to this page's own button)
   ========================================================================= */
#nbFloatTop{
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--transition) ease, transform var(--transition) ease, visibility var(--transition) ease;
}
#nbFloatTop.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1024px){
  .nb-hero__grid{ grid-template-columns:1fr; }
  .nb-dispatch{ max-width:480px; }
  .nb-bento{ grid-template-columns:repeat(2, 1fr); }
  .nb-bento__card--lg{ grid-column:span 2; grid-row:span 1; }
  .nb-bento__card--wide{ grid-column:span 2; }
  .nb-area__grid{ grid-template-columns:1fr; }
  .nb-trust__grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:640px){
  .nb-hero{ padding:3.2rem 0 2.6rem; }
  .nb-hero__actions{ flex-direction:column; align-items:stretch; }
  .nb-hero__actions .nb-btn{ width:100%; }
  .nb-hero__facts{ gap:1rem; }
  .nb-bento{ grid-template-columns:1fr; }
  .nb-bento__card--lg,
  .nb-bento__card--wide{ grid-column:span 1; grid-row:span 1; }
  .nb-timeline__rail > li{ grid-template-columns:40px 1fr; gap:1rem; }
  .nb-timeline__marker{ width:40px; height:40px; font-size:1rem; }
  .nb-price-row{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .nb-leaflet-map{ height:320px; }
  .nb-area__cta{ flex-direction:column; align-items:stretch; }
  .nb-area__cta .nb-btn{ width:100%; }
  .nb-final-cta__inner{ flex-direction:column; align-items:flex-start; }
  .nb-final-cta .nb-btn{ width:100%; justify-content:center; }
  .nb-section-head{ margin-bottom:2rem; }
}

@media (max-width:420px){
  .nb-dispatch{ padding:1.5rem; }
  .nb-trust__grid{ grid-template-columns:1fr 1fr; gap:.8rem; }
  .nb-trust__item{ font-size:.8rem; flex-direction:column; gap:.3rem; }
}